隐式转换介绍:
在js中,当运算符在运算时,如果两边数据不统一,CPU就无法计算,这时我们编译器会自动将运算符两边的数据做一个数据类型转换,转成一样的数据类型再计算。这种无需程序员手动转换,而由编译器自动转换的方式就称为隐式转换。
例如1 > "0"这行代码在js中并不会报错,编译器在运算符时会先把右边的"0"转成数字0`然后在比较大小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
- 案列:
字符串连接符与算术运算符隐式转换规则混淆
如:
console.log(1+'true') // 1true
console.log(1+true) // 2
console.log(1+undefined) // NaN
console.log(1+null) // 1
原理分析:
- 1、将字符串连接符+: 会把其他数据类型调用String()返回专场字符串然后拼接。
- 2、算术运算符+:会把其他数据类型调用Number()方法转成数字后在做加法计算。
console.log(1+'true') // 1true
上面的+是字符串连接符: String(1) + 'true' = '1true'。
console.log(1+true) // 2
上面的+ 是算术运算符: 1 + Number(true) = 1 + 1 = 2。
console.log(1+undefined) // NaN
上面的+ 是算术运算符: 1 + Number(undefined) = 1 + NaN = NaN。
console.log(1+null)
上面的+ 是算术运算符:1 + Number(null) = 1 + 0 = 1
关系运算符:会把其他数据类型转换成number之后再比较关系
console.log('2' > 10) // fasle
console.log('2' > '10') // true
console.log('abc' > 'b') // false
console.log('abc' > 'aad') // true
console.log(NaN == NaN) // false
console.log(undefined == null) // true
null == null // true
null === null // true
undefined == undefined // true
undefined === undefined // true
原理分析:
- 当关系运算符两边有一边是字符串的时候,会将其他类型数据使用Number()转换,然后比较。
console.log('2' > 1) // false Number('2') > 10 => 2 > 10 => false
- 当关系运算符两边都是字符串的时候,此时同时转成Number然后比较关系。
此时并不是按照Number() 的形式转成数字,而是按照字符串对应的nuicode编码来转成数字。
使用这个方法可以查看字符的unicode编码:字符串的charCodeAt()
console.log('2' > '10') // true '2'.charCodeAt() > '10'.charCodeAt()
多个字符串从左往右一次比较
console.log('abc' > 'b') // false 先比较'a' 和 'b', 'a' 与 ’b‘不相等 直接出结果
console.log('abc' > 'aab') // true 先和’a‘ 和 ’a‘ 比较,两者相等,则继续比较。
复杂数据类型隐式转化是先转String,在转number运算
console.log([1,2] == '1,2') // true
console.log([1,2] === '1,2') // false
逻辑非隐式转换与关系运算符隐式转换搞混淆
[] == 0 // true
[] === 0 // false
![] == 0 // true
![] === 0 // false
[] == ![] // true
[] == [] // false
{} == !{} // false
{} == {} // false
原理分析:
- 1、关系运算符: 将其他数据类型转成数字
- 2、逻辑非: 将其他数据类型使用Boolean()转成布类型
以下八种情况转为布尔类型false类型:
0 ,-0, NaN, undefined, null , '', false, document.all()
其余全是true。
[] == 0 // true
- a、[],valueOf().toString() 得到空字符串。
- b、Number('') == 0 // 成立。
![] == 0 // true
本质是 ![]逻辑fei表达式结果 与 0 比较的关系。
* a、逻辑非 优先级高于关系运算非 ![] = false
* b、false == 0