[] == 0? {} == 0? —— 三分钟包学包会的==转换

172 阅读3分钟

[] == 0为什么是true,{} == 0为什么是false,给我一首歌的时间,话不多说,直接开冲

==的转换规则

等于运算符==检查其两个操作数是否相等,会尝试强制类型转换并且比较不同类型的操作数。

这里只看其中一个操作数是对象的情况:

如果操作数之一是对象,另一个是数字或字符串,会尝试使用对象的valueOf()toString()方法将对象转换为原始值

原始值:也就是基本数据类型undefined、null、boolean、number、string等。

valueOf

常见的数组对象这两种类型的valueOf返回值

对象返回值
Array默认返回数组本身
Object默认返回对象本身

toString

  • 数组:数组的toString 方法返回一个字符串,包含用逗号分隔的每个数组元素。其实也就是arr.toString()相当于arr.join()
  • 对象:对象的toString() 默认返回 [object type] ,其中 type 是对象的类型

对象的这个其实就是我们常用的检测数据类型的方法

Object.prototype.toString.call(''); // [object String]
Object.prototype.toString.call(123); // [object Number]
Object.prototype.toString.call(true); // [object Boolean]
Object.prototype.toString.call(undefined); // [object Undefined]
Object.prototype.toString.call(null); // [object Null]

结果

根据上面的已知条件看结果:

[] == 0  
// 数组的valueOf方法返回数组本身,但它本身不是原始值,所以调用toString方法。
// [].toString()为'', '' == 0 结果为true
​
[0] == 0  // [0].toString()为'0' '0' == 0 结果为true
​
[1, 2] == '1,2' // [1, 2].toString()相当于 [1, 2].join() 结果为'1,2' 所以结果为trueconsole.log({} == 0)   
// 对象的valueOf方法返回对象本身,但它本身不是原始值,所以调用toString方法。
// ({}).toString()为'[object Object]', '[object Object]' == 0 结果为false

简单来说,看到==一边是数字或字符串,另一边如果是数组,调用join();如果是对象,替换为字符串[object type]


额外说下,对象转换为原始值的时候优先掉的是valueOf,从上面可以看到数组和对象的valueOf默认返回它本身,好像没啥用。但我们可以改写数组和对象原型上的valueOf方法,所以类似另一种==问题也就解决了。

Object.prototype.valueOf = function() {
    return '🥬'
}
console.log({} == '🥬')  // true

完结收工


附:可不看的==全规则

  • 如果两个操作数都是对象,则仅当两个操作数都引用同一个对象时才返回true

  • 如果一个操作数是null,另一个操作数是undefined,则返回true

  • 如果两个操作数是不同类型的,就会尝试在比较之前将它们转换为相同类型:

    • 当数字与字符串进行比较时,会尝试将字符串转换为数字值。

    • 如果操作数之一是Boolean,则将布尔操作数转换为1或0。

      • 如果是true,则转换为1
      • 如果是 false,则转换为0
    • 如果操作数之一是对象,另一个是数字或字符串,会尝试使用对象的valueOf()toString()方法将对象转换为原始值。

  • 如果操作数具有相同的类型,则将它们进行如下比较:

    • Stringtrue仅当两个操作数具有相同顺序的相同字符时才返回。
    • Numbertrue仅当两个操作数具有相同的值时才返回。+0并被-0视为相同的值。如果任一操作数为NaN,则返回false
    • Booleantrue仅当操作数为两个true或两个false时才返回true