JS隐式数据类型转换详解

墨蓝 2022-11-29 11:44 227阅读 0赞

## 隐式数据类型转换介绍 ##

前面有总结过 JS数据类型转换 Number(), toString(), parseInt()等都是属于强制转换。有时我们遇到当运算符在运算时，如果两边数据类型不统一，CPU无法计算，这是编译器会自动将运算符两边的数据做一个数据类型转换，转换成一样的数据类型在进行运算，这种无需程序员手动转换，而由编译器自动转换的方式就称为隐式转换。

## 隐式转换规则 ##

1.  转为number类型：+ - \* / ++ --（算数运算符） > < >= <= == != === !==（比较运算符）；
2.  转为string类型：+ 不仅是算术运算符，还可以做为字符串连接符把数据转换成string类型；
3.  转为boolean类型： !（逻辑非运算符）

**另外需要补充的一点常用的几种运算符各运算符优先级：**

*  算术运算符：+ - \* / ++ –
 *  比较运算符： > < >= <= == != === !==
 *  逻辑运算符：&& || !
 *  赋值运算符：= += -= \*= /=
 *  算术运算符 > 比较运算符 > 逻辑运算符 > 赋值运算符

**字符串连接符与算术隐式转换规则混淆**

console.log(1 + true);      //2
    console.log(1 + "true");    //"1true"
    console.log(1 + undefined); //NaN
    console.log(1 + null);      //1

> \+两边有一边是字符串，那这个+就是字符串连接符，它会把其他数据类型调用String()方法转成字符串然后拼接；  
> \+做为算术运算符会把其他数据类型调用Number()转成数字然后做加法运算;  
> 布尔值true会被转换数字 1， undefined会被转换为 NaN， null会转换为数字 0

**比较运算符会把其他数据类型转换number数据类型后再比较**

console.log("2" > 10);      //false
    console.log("a" > 10);      //false
    console.log(10 > "a");      //false
    console.log(Number("a"));   //NaN
    console.log("2" > "10");    //true 
    // ==> '2'.charCodeAt() > '10'.charCodeAt() 
    // ==> 50 > 49 
    // ==> true
    console.log(false == 0);    	//true
    console.log(false == "");   	//true
    console.log(Number(false));     //0
    console.log(NaN == NaN);        //false
    console.log(undefined == null); //true
    console.log(Number(NaN));       //NaN
    console.log(Number(undefined)); //NaN
    console.log(Number(null))       //0

> 比较运算符的一边是字符串的时候，会调用 Number() 方法把字符串转换成数字在进行比较；  
> 当关系运算符两边都是字符串的时候，此时同时转成number然后比较关系。  
> 重点：此时并不是按照Number()的形式转成数字，而是按照字符串对应的unicode编码来转成数字，使用字符串.charCodeAt(字符下标，默认为0) 方法可以查看字符的unicode编码。  
> 布尔值和数字比较时，会把布尔值通过Number() 转成数字再进行比较，true转成 1，false 转成 0；  
> 字符串和布尔值比较时，会把字符串和布尔值都通过Number() 转成数字再进行比较  
> 在javascript中有两种特殊情况无视规则：
> 
> 1.  null == undefined
> 2.  NaN和谁都不相等，包括他自己

## 复杂数据类型的隐式转换 ##

**复杂数据类型转成number数据类型：**

1.  先使用 valueOf() 方法获取原始值，如果原始值不是number数据类型，则使用 toString() 方法转成string；
2.  再通过 Number() 方法装成number数据类型需要注意的：空数组的toString()方法会得到空字符串，而空对象的toString()方法会得到字符串\[object Object\]

console.log([1,2] == '1,2'); 		//true 先将左边数组转成string，然后右边也是string则转成unicode编码运算
    console.log([] == 0);       		//true 默认通过同String()转成空字符串，再通过Number("")转成0
    var a = { };
    console.log(a == 0);        		//false
    console.log(a.valueOf().toString());//"[object Object]"

**逻辑非隐式转换和比较运算符隐式转换搞混淆**

> 0、-0、NaN、undefined、null、""(空字符串)这几种情况转换布尔类型会得到 false，除了这几种情况外所有数据类型都会得到 true

//大坑
    console.log ( [] == 0 );      //true
    console.log ( ! [] == 0 );    //true
    //神坑
    console.log ( [] == ! [] );  //true
    console.log ( [] == [] );    //false
    //史诗级坑
    console.log({ } == !{ });     //false
    console.log({ } == { });      //false

**\[\] 与 0比较：**

*  \[\].valueOf().toString() 得到空字符串
 *  Number("") == 0 成立

**!\[\] 与 0比较：**

*  逻辑非优先级高于关系运算符 !\[\] = false (空数组转布尔得到true，然后取反得到false)
 *  false == 0 成立

**\[\] 与 !\[\]比较：**

*  \[\].valueOf().toString() 得到空字符串 “”
 *  !\[\] = false
 *  Number("") == Number(false) 成立 都是0

**\[\] 与 \[\]比较：**

*  引用类型数据存在堆内存中，栈内存中存储的是地址，所以他们的结果是false

**\{\} 与 !\{\}比较：**

*  \{\}.valueOf().toString() 得到字符串’\[object Object\]’
 *  !\{\} = false
 *  Number(’\[object Object\]’) == Number(false) 不成立，因为转换到最后 是NaN 和 0 比较，所以结果为 false

**\{\} 与 \{\}比较：**

*  引用类型数据存在堆内存中，栈内存中存储的是地址，所以他们的结果是false