【学习笔记04】JavaScript数据类型

0yizhiyang

于 2022-11-23 17:59:15 发布

阅读量209

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_58190023/article/details/127581982

版权

JavaScript 专栏收录该内容

78 篇文章 3 订阅

订阅专栏

一、JavaScript中数据

数据在计算机内存中存储方式不同
按照不同的存储方式，将数据进行分类，不同存储方式的数据分类不同，称为数据的数据类型(存储方式)

1、基本数据类型

	1. 布尔类型
	2. 数值类型
	   整数类型
	   浮点数类型
	   NaN
	3. 字符串类型
	4. null类型
	5. undefined类型

2、引用数据类型 / 复杂数据类型

	1. 函数
	2. 数组
	3. 对象

二、布尔类型 boolean / bool

布尔类型只有两个数值
布尔类型往往是比较判断的执行结果

	true： 表示真 / 正确
	false：表示假 / 错误

    var b = 50 > 60 ;
    console.log( b );    //false
 
    var c = 50 < 60 ;
    console.log( c );  //true

true / false 是JavaScript中的关键词，true / false 不是一个英文单词
对于计算机程序来说，true / false 就是类似于100、50这样的数值数据
可以直接赋值给变量存储
true / false 作为关键词必须要小写

    // true / false 可以作为数值数据、直接赋值给变量存储
    // true / false 作为关键词必须要小写
    var d = true ;
    var e = false ;

补充知识：在html中有一些属性成为布尔属性

常见的布尔属性reversed、checked、selected、multiple、 readonly、disabled等等

	  <ol reversed>
	    <li>列表</li>
	    <li>列表</li>
	  </ol>
	
	  <input type="radio" checked> 
	  <input type="checkbox" checked> 
	
	  <select name="" id="">
	    <option value="">北京1</option>
	    <option value="">北京2</option>
	    <option value="" selected>北京5</option>
	  </select>
	
	  <input type="file" multiple>
	  <input type="text" readonly>
	  <button disabled>按钮</button>

三、字符串类型 string / str

一串由字符、数字、符号等等内容组成的数据
字符串类型的表示必须有定界符
定界符中定义的内容就是字符串的内容
实际项目中推荐使用的定界符，执行效率更高

    // 使用定界符包裹的内容 就是 字符串内容
    var str = '我是js程序的字符串' ;
    console.log( str ); 

    // 输出的是 数值类型 100
    console.log( 100 ); 
    // 输出的是 布尔类型 true
    console.log( true ); 

    // 输出的是 字符串类型数据
    console.log( 'true' ); 
    console.log( '100' ); 

    console.log( "100" ); 
    console.log( `100` );

在这里插入图片描述

总结

只要是定界符包裹的就是串
只要是没有定界符包裹的就是值

四、输入框

window.prompt()，通过输入框输入数据，输入的数据可以使用变量存储
实际项目中一般是使用input输入框输入数据

	// 将通过输入框输入的数据 
	// 赋值存储到变量res中
	var res = window.prompt('请您输入数据');
	console.log( res );

五、NaN（not a number）

表达式运算结果是数值类型，但是不是一个具体的数字
往往是有非数字参与运算的结果
NaN 可以作为数据数值直接赋值给变量，赋值时一定是严格遵守大小写

    var a = 100 - 60 ;
    console.log( a );   //40

    var b = 100 - '贵阳' ;
    console.log( b );    //NaN

（一）核心1：有NaN参与的运算结果一定还是`NaN`

    console.log( 100 + NaN );
    console.log( 100 - NaN );
    console.log( 100 * NaN );
    console.log( 100 / NaN );

在这里插入图片描述

（二）核心2：两个NaN比较是不是相等，结果是 `false`

1. 补充说明

=== 判断符号两侧的表达式，数据类型和数值是不是相等
如果相等, 结果是true;如果不相等, 结果是false

2. 代码实现

NaN不是一个具体的数值数据
JavaScript在比较判断时, 就不能判断，是不是具体的数值相同
比较判断的结果就是false

    // === 判断符号两侧的表达式
    console.log( 10 === 10 );   //true
    console.log( 10 === 9 );    //false
    
	// NaN不是一个具体的数值数据 
    console.log( NaN === NaN );   //false

    // 执行结果都是NaN 比较判断的结果也是false
    console.log( 100 - '北京' === 100 - '上海' );  //false

在这里插入图片描述

六、数值类型（整数 integer / int）

负整数、0 、正整数

其他进制整数的存储语法

1.JavaScript中数值的存储输出，默认都是按照十进制数值进行的
2.其他进制的数值，必须要定义标识符
3.JavaScript程序才会按照指定的进制，进行数据的存储

1、二进制

0 1
在数值前添加0b或者0B
在存储时，定义的数值按照二进制数值存储

    // 什么标识符都没有定义 
    // JavaScript 按照默认的十进制数值存储 
    var res1 = 100 ;
    // 输出时默认按照十进制数值输出
    console.log( res1 );   // 100

    // 在数值前添加标识符0b,JavaScript按照指定的二进制数值存储 
    var res2 = 0b100 ;
    // 输出时自动转化为十进制数值输出
    console.log( res2 );   // 4

2、八进制

0 1 2 3 4 5 6 7
在数值前添加0o或者0O
在存储时，定义的数值按照八进制数值存储

    // 在数值前添加标识符0o, JavaScript按照指定的八进制数值存储 
    var res = 0o100 ;
    // 输出时自动转化为十进制数值输出
    console.log( res );   // 64

特别注意：
	1. 有的语法说可以添加标识符0，也会按照八进制数值存储 
	2. 但是在实际项目的严格模式中，这样的语法形式会报错

3、十进制

0 1 2 3 4 5 6 7 8 9

4、十六进制

0 1 2 3 4 5 6 7 8 9 a b c d e f
在数值前添加 0x 或者 0X
在存储时定义的数值按照十六进制数值存储

    // 在数值前添加标识符0x, JavaScript按照指定的十六进制数值存储 
    var res = 0X100 ;
    // 输出时 自动转化为 十进制数值 输出
    console.log( res );

5、注意

实际项目中 js程序运行结果，不会生成二进制、八进制、十六进制的数据
往往是数据库中存储的数据，有可能是二进制、八进制、十六进制的数据
前端程序员需要做的就是正确的按照进制存储数据，按照需要的进制输出数据

6、按照指定进制输出

变量.toString( 进制 );
将变量中存储的数据转化为指定的进制

    // 在变量中存储十进制数值100
    var a = 100 ;

    // 默认按照十进制输出
    console.log( a );

    // 将存储的数据转化为二进制数值输出
    console.log( a.toString( 2 ) );

    // 将存储的数据转化为八进制数值输出
    console.log( a.toString( 8 ) );

    // 将存储的数据转化为十六进制数值输出
    console.log( a.toString( 16 ) );

    // 存储二进制的数值100100,按照二进制数值输出
    // 存储时数值前添加0b
    var a = 0b100100;
    // 输出时使用, 变量.toString(2) 
    console.log( a.toString( 2 ) );

在这里插入图片描述
如果需要执行进制转化，可以使用操作系统的计算器

七、数值类型（浮点数 float）

浮点数就是小数

（一）核心问题1：有效数值

在计算机程序中，不会允许小数的位数是无穷多位
在JavaScript程序中，浮点数的有效数值最多17位
从左起第一个非0的数字开始计算有效数值的位数，也就是所有的有效数值最多17个

    // 左起第一个非0数字开始计算,所有的数字最多17位
    console.log( 123.456789012345678901234567890123456789 );      //123.45678901234568
    console.log( 0.000123456789012345678901234567890123456789 );   //0.00012345678901234567

（二）核心问题2：溢出 / 精度丢失 / 误差

在算机程序中，浮点数的存储形式是以近似值的形式存储数据
也就是 0.1 存储的数据是 0.100000000000001
也就是 0.2 存储的数据是 0.200000000000003

在浮点数直接运算或者比较时，一定会出现浮点数的误差 / 溢出 / 精度丢失
这样的情况，在特殊时会表现出来，大部分不情况程序执行是正确的

   // 精度丢失 / 溢出 / 误差
    console.log( 0.1 * 0.1 );    //0.010000000000000002
    console.log( 0.1 * 0.3 );    //0.03

    // 如果正常计算 (0.1 + 0.7) * 10 就是 8 
    // 但是现在有浮点数的精度丢失 / 溢出 / 误差
    // 判断的结果是 false
    console.log( (0.1 + 0.7) * 10 === 8 );    //false

    // 大部分情况下运算结果是正确的
    // 特殊情况下运算结果是错误的
    console.log( (0.2 + 0.6) * 10 === 8 );   //true
    console.log( (0.4 + 0.4) * 10 === 8 );   //true

在这里插入图片描述
实际项目中，在VUE等框架语法中，有浮点数专门的运算方法，防止出现误差/溢出/精度丢失

（三）核心问题3：科学计数法

是数值的一种表现形式表示语法

	2e3  2乘以10的3次方  结果是2000
	2e-3 2乘以10的-3次方 也就是2除以10的3次方，结果是0.002 
	
	科学技术法是作为一个整体表达式运行的 
	单独拿出其中的某一个部分，没有任何意义

科学计数法表达式的一切数值都是浮点数类型
2e3 表示的数值是2000 ，本质上是浮点数类型
科学计数法不算整数的语法形式

    // 虽然输出的数值是2000，但是科学计数法表达式的数值都是按照浮点数类型计算 
    console.log( 2e3 ); 
    
    // 输出结果也是2000 但是数值类型是浮点数类型
    console.log( 2000.00000 );

八、null 和 undefined

null表示空值，是正确赋值，但是赋值的数据是一个'空' 值
undefined表示应该赋值，没有正确赋值
在定义变量时，应该给变量赋值存储的数据
如果只是定义变量，没有赋值存储的数据
JavaScript程序，会给没有赋值数据的变量存储 undefined 数据

   //  给变量a，赋值存储'空'值
    var a = null ;
    console.log( a );
    
    //  定义变量b，但是没有赋值存储的数据
    //  JavaScript程序自动给没有赋值的变量，赋值存储undefined
    var b ; 
    console.log( b );