'+'和'=='隐式转换的变装游戏?一文带你揭秘

152 阅读3分钟

前两篇文章我们主要讨论了JS中的相关显示转换如简单数据类型之间的转换和复杂数据类型与简单数据类型之间的转换,今天我们来揭开隐式转换的神秘面纱

简单数据类型之间是如何转换的?一文带你搞懂

复杂数据类型如何转成简单数据类型?一文带你搞懂

在JavaScript中,隐式类型转换(也称为强制转换或自动转换)是指语言自动将一个类型的值转换为另一个类型的值。这种转换可以在不同的上下文中发生,比如算术运算、关系比较、逻辑操作等。虽然它可以让编程更加灵活,但也可能导致代码行为的不可预测性。

这里主要讨论 + 和 ==

1. +

  • '+' 的转换原则
    • 如果两个操作数都是数字:+ 运算符执行加法操作。
    • 如果其中一个操作数是字符串:+ 运算符执行字符串连接操作。
    • 如果其中一个操作数是对象(如数组):+ 运算符首先尝试将对象转换为原始值(通过调用 valueOf() 或 toString() 方法),然后再根据转换后的原始值类型决定执行加法还是字符串连接。
console.log(1 + '1') // 11

console.log( + '1') // 1

console.log( + []); // 0

console.log( + ['1']) // 1

console.log( + {}) // NaN 

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

console.log([] + []) // ""

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

2. ==

  • '=='的转换原则
  • 如果两个操作数的类型相同:
    • 如果两个操作数都是 undefined 或 null,则它们相等。
    • 如果两个操作数都是数字,则直接比较它们的值。
    • 如果两个操作数都是字符串,则直接比较它们的值。
    • 如果两个操作数都是布尔值,则直接比较它们的值。
    • 如果两个操作数都是对象,则比较它们是否引用同一个对象。
  • 如果两个操作数的类型不同:
    • 如果一个操作数是 null,另一个操作数是 undefined,则它们相等。
    • 如果一个操作数是数字,另一个操作数是字符串,则尝试将字符串转换为数字,然后比较。
    • 如果一个操作数是布尔值,另一个操作数是数字或字符串,则尝试将布尔值转换为数字(true 转换为 1,false 转换为 0),然后比较。
    • 如果一个操作数是对象,另一个操作数是数字或字符串,则尝试将对象转换为原始值(通过调用 valueOf() 或 toString() 方法),然后比较。
console.log(true == 1);  // true
console.log(false == 0); // true

console.log(5 == '5');   // true

console.log(null == undefined); // true

var obj = { valueOf: function() { return 2; } };
console.log(obj == 2); // true

console.log(NaN == NaN); // false
console.log(0 == -0);    // true

console.log([]==[]) // false 不同的地址

let x=123;

let y ={
    valueOf:function(){
        return 123;
    }
}

console.log(x == y) // true

相信看完本次分享你已经对JS的类型转换有了一个大概的认识了,那就快去实战检验一下吧,如果你觉的对你有帮助的话就点个赞再走吧