美文网首页
js隐式转换的规则

js隐式转换的规则

作者: 时间的溺水者 | 来源:发表于2020-07-01 22:04 被阅读0次

    隐式转换介绍:

    • 在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 

    相关文章

      网友评论

          本文标题:js隐式转换的规则

          本文链接:https://www.haomeiwen.com/subject/owpdqktx.html