js隐式转换的规则

隐式转换介绍:

  • 在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 
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容