浅析js中隐式类型转换的规则(巨坑)

虽然开发中基本都是用的===全等,==很少用,基本不用,但奈何有些面试题考的很刁钻,我就来做个小总结把

大多数隐式转换的规则:

先说结论:大多数情况下,隐式转换都遵循这个规则,当然有特殊情况,特殊情况特殊对待就行了,当使用==判等时,会转成同类型再比较
在这里插入图片描述
1. 对象和布尔值比较

对象和布尔值进行比较时,对象先转换为字符串,然后再转换为数字,布尔值直接转换为数字

[] == true; //false []转换为字符串'',然后转换为数字0,true转换为数字1,所以为false

2. 对象和字符串比较

对象和字符串进行比较时,对象转换为字符串,然后两者进行比较。

[1,2,3] == '1,2,3' // true [1,2,3]转化为'1,2,3',然后和'1,2,3', so结果为true;

3. 对象和数字比较

对象和数字进行比较时,对象先转换为字符串,然后转换为数字,再和数字进行比较。

[1] == 1; // true `对象先转换为字符串再转换为数字,二者再比较 [1] => '1' => 1 所以结果为true

4. 字符串和数字比较

字符串和数字进行比较时,字符串转换成数字,二者再比较。

'1' == 1 // true

5. 字符串和布尔值比较

字符串和布尔值进行比较时,二者全部转换成数值再比较。

'1' == true; // true

6. 布尔值和数字比较

布尔值和数字进行比较时,布尔转换为数字,二者比较。

true == 1 // true

以上把四种类型两两不同的比较了一遍,都印证了我一开始说的隐式转换规则,没毛病



转boolean值为false的情况:

下面6种值转化为布尔值时为false,其他转化都为true

1、undefined(未定义,找不到值时出现)

2、null(代表空值)

3、false(布尔值的false,字符串"false"布尔值为true)

4、0(数字0,字符串"0"布尔值为true)

5、NaN(无法计算结果时出现,表示"非数值";但是typeof NaN===“number”)

6、""(双引号)或’’(单引号) (空字符串,中间有空格时也是true)

console.log(!!undefined)    //false
console.log(!!null)        //false
console.log(!!"")  		 //false
console.log(!!false)    //false
console.log(!!NaN)    //false
console.log(!!0)     //false

这样就好理解以下情况了:

console.log(![])   //true
console.log(!{})   //true



复杂数据类型的转换规则:

1.先使用valueOf()方法获取原始值
2.再使用toString()转成字符串
3.在使用number把字符串转成数字

console.log([1,2].valueOf())    //[1,2]
console.log([1,2].valueOf().toString())   //1,2

console.log({name:"test"}.valueOf())   //{name:”test“}
console.log({name:"test"}.valueOf().toString())  //[object Object]
console.log([].valueOf())    //[]
console.log([].valueOf().toString())   //""

console.log({}.valueOf())   //{}
console.log({}.valueOf().toString())  //[object Object]

这样就解释如下这种奇怪的现象了

[] == false  //true
       
{} == false  //false  



特殊情况:

当然上述也说了大多数情况下遵循的规则而已,也有很多特殊情况,我们来特殊区别一下:

![] == false   //true   多了一个!,此时[ ]会优先转成boolean值,
所以为true,取反就是false了,结果为true
[]==![] //true   因为有!,优先级最高,![]结果为false,最终转换成 [] == false 的比较,
按照开篇多数情况下的规则图转换,结果为true
[]==[]   //false   比较的是地址
{}=={}   //false  比较的是地址



到目前为止,以下的特殊情况,你应该都能判断出来了:

///太坑
console.log([]==0)   //true
console.log(![]==0)  //true

//神坑
console.log([]==![])   //true
console.log([]==[])   //false

//史诗级坑
console.log({}=={})    //false
console.log({}==!{})    //false
//相当于
console.log({}==false)   //false
//相当于
console.log({}==0)    //false
//相当于 
console.log("[object Oject]"==0)    //false

看到一篇博客,总结的比我好
推荐看下

猜你喜欢

转载自blog.csdn.net/fesfsefgs/article/details/109101502