深入探究JS基本数据类型及其转换

本文对基本数据类型及其转化进行深入解析

数据类型

• undefined 只声明未定义 变量没有初始值时，或访问一个不存在的值（对象属性或数组项），将被赋予undefined
• null 表示一个空值(空对象)，判断对象是否为空 if(对象 == null){…} 正负数：+null == 0 -null == -0
• number 整数、浮点数
• boolean： true/false
• string 字符串 十六进制的字符串表示形式 ‘\x41’ //A-65 十六进制 41 长度是1

空字符串’’ ,空格 ’ ’ , 空值null 三者都不相等

null和 undefined

两者都是完全不可变的，没有属性和方法，也不能给其属性赋值。
试图访问或定义一个属性将会引发一个类型错误（TypeError）。

Number类型

NaN 一种特殊的数值，表示非数字 ,数据类型：Number

• NaN不与任何数相等 包括他本身 ，可以使用 isNaN()函数进行判断
• NaN与任何数字计算，结果为 NaN , 除了 和 字符串拼接 会被转换成’NaN’

浮点型

• 浮点类型 var floatNum=10.0//定义的形式是浮点型,但是解析器会解析成10,其实是整型。10.00000 控制台输出 10
• 浮点数不能比较 0.1+0.2==0.3 false
  • 原因：运算精度 0.1+0.2==0.3000000000004
  • 解决： a==b => (a-b)<0.000000000001 来判断a,b是否相等

进制

• 八进制 0开头 十六进制 0x开头 070->56 079->79(9超过8了不是8进制)

取值范围

• Number对象的属性获取取值范围：Number.MIN_VALUE ,Number.MAX_VALUE [5e-324,1.7976931348623157e+308]
• 超过取值返回 -> Infinity 或 -Infinity
• isFinite(x);//判断x是否为有限数据 是->true，否则返回false
• 异常处理：0/0 ->NaN，除数为0->无穷

  if(isNaN(x/y)==true||isFinite(x/y)==false){
  	console.log('除零异常')
  }
  

typeof（）——数据类型的检测,返回字符串类型

• typeof(null)//‘object’ typeof(typeof(null));// 返回值类型：string
• 对象、数组、null->'object’对象
• undefined->‘undefined’

类型转换

1. 其他类型->Boolean

   • undefined->false
   • null->false
   • object: array,非空对象->true
   • number: 非0->true 0->false NaN->false
   • string:’’ -> false 非空字符串（包括空格）->true Boolean(‘0’) true

undefined，null，NaN，0，空字符串’’ 转换为布尔类型为false

2. 其他类型->Number

   • Number(null);//0
   • Number(undefined);//NaN
   • Number(’’);//0
   • Number(’ ');//0
   • Number([]);//0 Number([4]); 4 Number([2,4,1]); NaN Number([‘2’]); 2
   • Number({});//NaN
   • {}==null;//false
   • Boolean->Number true->1 false->0
   • String->Number Number(‘100px’); NaN Number(‘100’); 100
   • 八进制的字符串类型 转换成数字会直接去掉前缀0 ‘070’->70
   • 十六进制的字符串类型 转换成十进制数字 ‘0xa’ -> 10

undefined，object ，不能转换为数字的string类型 ，转换成一个特殊数字类型 NaN
null,空格，空字符串，空数组 转换为 0

运算符

• 算数 ±*/ % ++ –
• 赋值 =
• 关系 > < >= <= == != === 值和类型都相等 返回布尔值true/false
• 逻辑 && || ！ && || 返回值类型number ，! 返回值类型 布尔型
• 位运算 二进制 左移<< 右移>> 左移一位，相当于乘2 右移一位，相当于除2

优先级：算数>比较>逻辑（!>&&>||）>赋值>逗号

隐式转换

算数运算

• 字符串与其他数据类型 + 运算时，+ 表示字符串拼接，隐式调用String(),将其他类型 -> 字符串
• 算数(++/— +/-（一元正负）*/%)，关系运算(< > <= >= 有数字)时，会把其他数据类型转换成 number类型

1. 运算符 + 的含义：

   • 字符串 连接
     '12'+'34'=='1234' '1'+NaN == '1NaN' 5+'5'==55 true+'1'=='true1' false+null==0
   • 数字的加法 ；
   • 正数：
     +'2343'-> 2343 +'asdf'->NaN -null-> -0 +undefined == NaN

2. 自加自减

   • 注意：自加自减 操作符只能是变量不能是常量 ++true ×

3. 除法

   • 非0/非0 不是整除 是小数
   • 非0/除0 =>无穷大 Infinity
   • 0/0 => NaN

4. 乘法 ：不同数据类型做乘法，不能转换成数字的字符串，返回 NaN

   5*‘5’== 25 字符串->数字 'hello’4 -> NaN
   falsenull==0

与undefined类型进行算数运算时，结果都是NaN （undefined转换为number类型为NaN）

逻辑运算，其他类型转换为boolean类型运算

undefined，null,NaN 类型进行逻辑运算时，转换为false
如果两个操作数都是null/NaN/undefined，返回null/NaN/undefined

1. 逻辑与 && 的运算方式，返回值类型：number 或 boolean

   • 左侧（转换为布尔值）为真，返回右边的操作数本身,类型为操作数原本的类型。

   1&&2 ->2   3&&2 -> 2   
   1&&true -> true  true && 7 -> 7   25 && false ->false true&&false->false
   

   • 左侧（转换为布尔值）为假，返回 左边的操作数本身 。

   false && 0 ->false 0 && false ->0 0&&任何数 返回 0 （短路）

   undefined/null/NaN && 任何数（注意顺序不能变） 结果为：undefined/null/NaN

   null && 0 ->null 0 && null ->0

2. 逻辑或 || 的运算方式 返回值类型：number 或 boolean

   • 左侧为真，返回左边的操作数。3||1->3 1||3->1(短路)
   • 左侧为假,返回右边的操作数。 0||3->3 false||2->2

   可以转换成false的数据 ||undefined/null/NaN = undefined/null/NaN

3. 逻辑非： 将操作数转换成布尔值 ，再求反。返回值类型：boolean

   !0 == true !2 == false !true == false !false == true 在这里插入代码片
   !null true !NaN true !undefined true

关系运算，返回true/false 将其他类型 转换成 number类型 比较

• 字符串之间比较时 比较每一位的ASCLL码,从左往右，按位比较 ‘2’>‘10’ true
• string 类型 与 number 类型 比较时, string会自动转换成number类型
• 数字与布尔类型进行关系运算时，布尔类型自动转换为数字类型
  只有str==1 时 Number(str)==true

undefined，null，NaN 都不大于0，不小于0，不等于0 ，与任何数比较 返回 false（boolean类型）,例外：undefined==null

• NaN与任何数都不相等
• undefined==null 值相等 undefined!==null 类型不相等

全等=== 不全等 ！== 在比较之前不转换类型

isNaN();

检测输入的参数是否为 数字 或 可转换为数字的其他数据类型。
可以转换成数字 返回 false；不能转换成数字类型的其他类型，返回true。

isNaN(undefined);-> true  不能转换成数字 NaN
isNaN(null);-> false  可以被转换成数字 0
isNaN('');->false 空字符串
isNaN(' ');->false 空格
isNaN(true);->false 布尔数据类型 可以转换成数字* 
isNaN('true');->true 不能转换成数字的字符串类型 转换成数字时 返回 NaN
isNaN(NaN);->true  isNaN('NaN');->true 
isNaN(2e3);->false isNaN('2e3');-> false  e-科学计数法表示10 2e3===2000===2*10^3

isNaN(1/0)==false  //isNaN(Infinity); false

isNaN函数认为undefined类型和字符串类型中含有非数字的数据都不能转换为数字，函数返回true

特例：由于科学记数法，e作为特殊的字符处理，所以符合科学记数法的字符串也能转换为数字。
但是必须符合科学计数法的规则：e两边都要有数字，指数e后面必须有整型数字，否则会报错

parseInt();parseFloat(); 将可以转换成数字的字符串类型 转换成 数字

parseInt();  返回值类型 都是 number
	parseInt('abc');->NaN 数据类型：number
	parseInt(123);->123 
	parseInt(true);->NaN
	parseInt('23.78a6');//输出23

parseFloat(); 返回值类型 number
	parseFloat(123);->123  不会加小数点 
	parseFloat('123');->123 

Number();与parseInt(); parseFloat();的区别

Number(); 将**所有其他类型** 转换成 数字类型。 **只要字符串中含有非e的其他字母或者特殊字符，就直接转换为NaN**
Number('16px');->NaN
parseInt(); parseFloat();->截取非e字母前面的数字  

如果输入的字符以数字开头，但是中间或者结尾有除了e以外其他字母或者特殊字符，就会只把开头的数字进行转换

实例：在js应用经常需要获取到宽高等信息，这些信息一般都带有px后缀，通过parseInt和parseFloat都能获取相应的数字

parseFloat('16px');parseFloat('16esaxsdc');parseFloat('16e');输出16
parseInt('12px'); parseInt('12px1'); parseInt('12pxasdc'); 输出12

parseFloat('16e1') parseFloat('16e1adc') //输出160
parseFloat('23.78e6');//23780000

感谢观看，希望能给大家带来一些帮助 ~