4、前端笔记-JS-数据类型

news2024/11/17 23:24:50

1、数据类型简介

1.1为什么需要数据类型

不同的数据占用的存储空间不同，为了充分利用存储空间，便于把数据分成所需内存大小不同的数据，定义了不同的数据类型

1.2变量的数据类型

js是弱类型（动态语言）的语言，不需要提前声明变量的类型，在程序运行过程中，类型会被自动确定
所以js的变量的数据类型是只有程序在运行过程中，根据等号右边的值来确定的
所以同一个变量的数据类型可以变化

var x=10;//int
	x="xiaomi";//字符串

1.3基本数据类型

Number \ Boolean \Undefined\Null
在这里插入图片描述

1.3.1数字型Number

整型和浮点型
0八进制：0~7 010–转为10进制=8
0x十六进制：0-9，A-F，0xa转为10进制=10

a.数字型范围

最大值：Number.MAX_VALUE;
最小值：Number.MIN_VALUE;
无穷大 ：Infinity
非数字：NaN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //最大值
        console.log(Number.MAX_VALUE);
        //数值型最小值
        console.log(Number.MIN_VALUE);
        //无穷大 Infinity
        console.log(Number.MAX_VALUE*2);
        // 负无穷大 -Infinity
        console.log(-Number.MAX_VALUE*2);
        //非数字 NaN
        console.log('aaa'-100);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

b.isNaN

isNaN()方法用来判断非数字，并且返回一个值，如果是数字，返回的就是false,如果不是数字返回的是true

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.log(isNaN('12a'));//true
        console.log(isNaN('12'));//false
        console.log(isNaN(12));//false
        console.log(typeof('12'));
    </script>
</head>

<body>

</body>

</html>

在这里插入图片描述

1.3.2 字符串型String

可以用单引号或双引号，推荐用单引号。

a.特殊用法：

字符串嵌套，外单内双或内单外双

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str="我是'猫🐱'";
        console.log(str);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

b.字符串转义符

以\开头
\n \ ’ " \t \b
\b表示空的格子，不是空格

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str="我是'猫🐱'";
        console.log(str);
        var str1='abc\ndef\\ghi\'jk\"lmn\topq\brst';
        console.log(str1);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

c.练习1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var text='酷热难耐，火辣的太阳底下，我挺拔的身姿成为了最独特的风景。\n我审视四周，这里是我的舞台，我就是天地间的王者。\n这一刻，我豪气冲天，终于大喊一声："收破烂了啦"';
        alert(text);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

d.字符串长度

length属性获取字符串长度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str="I am 里";
        console.log(str.length);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

e.字符串拼接+号

数值型+字符串=字符串
数值型+数值型=数值型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.log("我今年"+18+"岁");
        console.log(12+12);
        console.log('12'+'12');
        var age=23;
        console.log("我今年"+age);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

1.3.3 布尔型Boolean

有两个值：true和false
boolean类型做加法运算：true作为1，false作为0
做拼接时，还是true/false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var flag1=true;
        var flag2=false;
        console.log(flag1+1);//2
        console.log(flag2+1);//1
        console.log('aa'+flag1);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

1.3.4 Undefined和NULL

undefined

undefined:一个变量声明但没有赋值，会有一个默认的undefined与字符串相加=字符串
undefined与数值相加=NaN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var text;
        console.log(text+"我们");
        console.log(text+1);//NaN
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

NULL

NULL+字符串=字符串
NULL+数值=数值
NULL+undefined=NaN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var space=null;
        console.log("我是"+space);
        console.log(12+space);
        console.log(space+undefined);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

1.4获取变量的数据类型

使用typeof获取变量的数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var num=10;
        console.log(typeof num);//number
        var str="100";
        console.log(typeof str);//string
        var flag=true;
        console.log(typeof flag);//boolean
        var und=undefined;
        console.log(typeof und);//undefined
        var non=null;
        console.log(typeof non);//object
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

1.5 字面量

字面量就是表示如何表达这个值
数字字面量：8，9 ，10
字符串字面量：’前端’
布尔
字面量：true,false

1.6数据类型转换

把一种数据类型的变量转成另一种数据类型
转换的3种方式：

  • 转换为字符串类型
  • 转换为数字型
  • 转换为布尔型

（1）转换为字符串类型

最常用的是加号拼接，这种方式叫隐式转换

方式说明示例
toString()转成字符串var num=1;alert(num.toString())
String()强制转换成字符串var num=1;alert(String(num))
加号拼接和字符串拼接的结果都是字符串var num=1;alert(num+“字符串”)

(2)转换为数字型**

输入promot输入的都是字符型

方式说明示例
parseInt(string)将string转为整数类型parseInt(“78”)
parseFloat(string)将string转为浮点类型parseInt(“7.8”)
Number()强制转换将string类型转为数值型Number(“12”)
js隐式转换算术运算符 -*/‘12’-0
在这里插入代码片<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.log("parseInt");
        // 1.parseInt将接受到的字符串转为数值型
        console.log(parseInt('12'));
        // 如果是输入的小数值，则转整数类型时，会向下取整'12.5'--12
        console.log(parseInt('12.6'));
        // 如果输入的是数值+字符串，则转换时留数值，去掉字符串 '120px'  --120 'rem120px'--NaN
        console.log(parseInt("120px"));
        console.log("parseFloat")
        //2.parseFloat将接收到的字符转为浮点数
        console.log(parseFloat('3.14'));//3.14
        console.log(parseFloat('120px'));//120
        console.log(parseFloat('rem120'));//NaN
        
        // 3.Number(变量)
        console.log("Number")
        console.log(Number('123px'));//NaN
        console.log(Number('123'));//123
        //4.隐式转换
        console.log("算术符隐式转换")
        console.log('12'-0);//12
        console.log('129'-'9');//120


    </script>
</head>

<body>

</body>

</html>

在这里插入图片描述

（3）转为Boolean类型

方式说明示例
Boolean()函数将其他类型转为布尔值Boolean(‘true’)
  • 代表空、否定的值会被转为false,如
'' 0  NaN null undefined

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //转为false
        console.log(Boolean(""));
        console.log(Boolean(0));
        console.log(Boolean(NaN));
        console.log(Boolean(null));
        console.log(Boolean(undefined));
        //转为true,除上述转为false的其他值
        console.log(Boolean('aaa'));
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

2、扩展

2.1解释型语言和编译型语言

翻译器翻译的方式：编译和解释。两种方式的区别在于翻译的时间点不同
编译器：代码执行前先编译，生成中间代码文件，如java的class文件
解释器：代码运行时进行解释，并立即执行，如javaScript

2.2 标识符、关键字、保留字

标识符：开发人员为变量、属性、函数、参数取得名字。标识符不能是保留字和关键字
关键字：JS本身已经使用的子，如break if else
保留字：预留的关键字，如name let int const

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/113224.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

这12类Oracle日期函数，全都给你总结了

这12类Oracle日期函数，全都给你总结了

在使用Oracle数据库过程中&#xff0c;对日期的使用不可避免&#xff0c;那Oracle中的日期函数有哪些呢&#xff1f;本篇就日期函数进行整理了&#xff0c;不一定全部了解记住&#xff0c;但是要做到心中有数&#xff0c;以后在写脚本的时候就不会绕弯子了。 1、sysdate、curr…
阅读更多...
大话设计模型 Task05 状态、适配、单例

大话设计模型 Task05 状态、适配、单例

目录一、状态模式问题描述问题分析模式定义代码实现二、适配器模式问题描述问题分析模式定义代码实现三、单例模式问题描述问题分析模式定义代码实现一、状态模式 问题描述 假设我们要描述一名员工一天不同时间的工作状态&#xff0c;正常来看是比较简单的&#xff0c;直接从…
阅读更多...
卡塔尔世界杯半自动越位识别技术(SAOT)的工作原理

卡塔尔世界杯半自动越位识别技术(SAOT)的工作原理

随着卡塔尔世界杯的深入举行&#xff0c;半自动越位识别技术 (Semi-automated offside technology&#xff0c;简称为 SAOT) 这项数字技术正在被越来越多的国内外球迷所熟知。 作为 VAR(Video Assistant Referee&#xff0c;视频助理裁判) 的扩展&#xff0c;SAOT 的引入是为了…
阅读更多...
腾讯云轻量应用服务器使用 OpenFaaS 部署云函数！

腾讯云轻量应用服务器使用 OpenFaaS 部署云函数！

OpenFaaS 是开源的流行 FaaS&#xff08;Function-as-a-Service&#xff0c;函数即服务&#xff09;框架&#xff0c;OpenFaaS 让开发者聚焦业务代码的编写&#xff0c;无需过多关注语言框架、部署、配置等其他步骤。 轻量应用服务器 Lighthouse 为您提供了 OpenFaaS 应用镜像…
阅读更多...
C语言程序设计--个人账簿管理系统

C语言程序设计--个人账簿管理系统

目的在于&#xff1a; 为编码人员提供依据&#xff1b;为修改、维护提供条件&#xff1b;项目负责人将按计划书的要求布置和控制开发工作全过程&#xff1b;项目质量保证组将按此计划书做阶段性和总结性的质量验证和确认。 本说明书的预期读者包括&#xff1a; 项目开发人员&…
阅读更多...
车用DC-DC模块 1224V转5V2A过认证大塑料外壳

车用DC-DC模块 1224V转5V2A过认证大塑料外壳

名称&#xff1a;车用12V转5V2A电源转换器 型号&#xff1a;LM40J5V2A3S 性质&#xff1a;非隔离型的BUCK电源转换器&#xff0c; 特点&#xff1a;采用集成IC设计&#xff0c;具有转换效率高&#xff0c;体积小&#xff0c;稳定可靠的特点&#xff0c;采用灌胶工艺&#xf…
阅读更多...
Arcgis使用教程（十三）ARCGIS地图制图之地图输出参数设置详解

Arcgis使用教程（十三）ARCGIS地图制图之地图输出参数设置详解

目录 1.加载数据 2.页面大小设置 2.1 根据页面大小设置地图 2.2 根据固定比例尺设置页面大小 1.加载数据 在Arcmap中加载中国矢量图层数据&#xff08;中国省级行政区图&#xff0c;国界线两个图层&#xff09;&#xff0c;切换到Layout View窗口&#xff0c;设置地图符号要…
阅读更多...
jvm-sandbox-repeater环境搭建

jvm-sandbox-repeater环境搭建

引流回放这个技术现在真的越来越成为了很多公司测试同学必备的一个工具了。当然引流回放的技术有很多&#xff0c;比如下来会提到的jvm-sandbox-repeater。 当然你也可以通过日志分析解析的方式去获取到请求返回的信息等。因为刚听过testerhome开发者大会&#xff0c;好几个主题…
阅读更多...
不愧是阿里内部的「排序和数据结构学习笔记」面面俱到、太全了

不愧是阿里内部的「排序和数据结构学习笔记」面面俱到、太全了

算法——成为程序员强者的必经之路 算法到底有多重要不必多说&#xff0c;说「算法正在统治世界」也不为过。 在编程行业内&#xff0c;有句话是这么说的「薪资越高、算法越重要」&#xff0c;互联网头部企业花费了大量的时间和金钱&#xff0c;用来研究新算法&#xff0c;不…
阅读更多...
Python pandas有几千个库函数，你用过几个？（6）

Python pandas有几千个库函数，你用过几个？（6）

上一篇链接&#xff1a; Python pandas有好几百个库函数&#xff0c;你都用过吗&#xff08;5&#xff09;_Hann Yang的博客-CSDN博客 DataFrame 类方法&#xff08;211个&#xff0c;其中包含18个子类、2个子模块&#xff09; >>> import pandas as pd >>&g…
阅读更多...
详解c++---string的介绍(下)

详解c++---string的介绍(下)

这里写目录标题前言string的Modifiersoperatorappendpush_backassigninserterasereplaceswappop_backString的operationsc_strcopyfindrfindfind_first_offind_last_offind_first_not_of和find_last_not_of前言 本片文章我们将继续介绍string的使用&#xff0c;点击&#xff1…
阅读更多...
从IP V4 向IP V6 过渡（计算机网络-网络层）

从IP V4 向IP V6 过渡（计算机网络-网络层）

目录 从IP V4 向IP V6 过渡 用双协议栈进行从 IPv4 到 IPv6 的过渡 使用隧道技术从 IPv4 到 IPv6 过渡 从IP V4 向IP V6 过渡 向 IPv6 过渡只能采用逐步演进的办法&#xff0c;同时&#xff0c;还必须使新安装的 IPv6 系统能够向后兼容 IPv6 系统必须能够接收和转发 IPv4 分…
阅读更多...
node.js+uni计算机毕设项目基于微信小程序停车系统（程序+小程序+LW）

node.js+uni计算机毕设项目基于微信小程序停车系统（程序+小程序+LW）

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流 项目运行 环境配置&#xff1a; Node.js Vscode Mysql5.7 HBuilderXNavicat11VueExpress。 项目技术&#xff1a; Express框架 Node.js Vue 等等组成&#xff0c;B/S模式 Vscode管理前后端分离等…
阅读更多...
node.js+uni计算机毕设项目基于微信小程序的订房系统（程序+小程序+LW）

node.js+uni计算机毕设项目基于微信小程序的订房系统（程序+小程序+LW）

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流 项目运行 环境配置&#xff1a; Node.js Vscode Mysql5.7 HBuilderXNavicat11VueExpress。 项目技术&#xff1a; Express框架 Node.js Vue 等等组成&#xff0c;B/S模式 Vscode管理前后端分离等…
阅读更多...
【12.23-12.24】Member Inference Attack

【12.23-12.24】Member Inference Attack

文章目录前言一、Repeated Knowledge Distillation with Confidence Masking to Mitigate Membership Inference Attacks1.1 Member Inference Attack2.2 Confidence Score Masking2.3 Knowledge Distillation二、Membership Inference Attacks Against Machine Learning Model…
阅读更多...
垃圾收集器

垃圾收集器

1.术语 (1).吞吐量 CPU用于运行用户代码的时间与CPU总消耗的比值。 (2).全局停顿(Stop The World) 是在垃圾回收过程中&#xff0c;需要将JVM内存冻结的一种状态。在全局停顿状态下&#xff0c;除GC线程外&#xff0c;Java其它线程都是停止执行的&#xff0c;本地方法可以执行…
阅读更多...
二叉树15：左叶子之和

二叉树15：左叶子之和

主要是我自己刷题的一些记录过程。如果有错可以指出哦&#xff0c;大家一起进步。 转载代码随想录 原文链接&#xff1a; 代码随想录 leetcode链接&#xff1a;404. 左叶子之和 题目&#xff1a; 给定二叉树的根节点 root &#xff0c;返回所有左叶子之和。 示例&#xff1a…
阅读更多...
支持设备的待机唤醒功能

支持设备的待机唤醒功能

系统待机唤醒功能 1 说明背景 1.1 需求 支持 GPU 进入低功耗模式&#xff0c;让用户选择降低设备的功耗 1.2 概念 上位词&#xff1a;APM, ACPI 同类词&#xff1a;睡眠模式, S0~S5 下位词&#xff1a;系统挂起, 系统唤醒, 运行时设备电源管理 1&#xff09;ACPI 在计算机…
阅读更多...
Rabbit MQ的基本使用

Rabbit MQ的基本使用

目录 1. MQ是什么&#xff0c;有哪些作用&#xff1f; 2. 主要的MQ框架有哪些&#xff1f; 3. RabbitMQ安装 4. RabbitMQ中的主要概念 5. 消息队列的核心概念 6. 一个简单的生产者和消费者示例。 6.1 消息发送者模块 1. MQ是什么&#xff0c;有哪些作用&#xff1f; 消…
阅读更多...
Jenkins配合git构建持续构建流程

Jenkins配合git构建持续构建流程

作者&#xff1a;朱金灿 来源&#xff1a;clever101的专栏 为什么大多数人学不会人工智能编程&#xff1f;>>> 理解CI CI(Continuous Integration)翻译成持续集成&#xff0c;是指在源代码变更后自动检测、检出、构建、自动化测试到发布的过程。常见的开源CI工具有J…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023