【易错求解】为什么 [] == "" && [] == 0 && "" == 0 && [] != [] ？

Question

问题描述

为什么 [] == "" && [] == 0 && "" == 0 && [] != [] ？

console.log('[] == ![]', [] == ![])
console.log('[] != []', [] != [])
console.log('[] == []', [] == [])
console.log('[] == ""', [] == "")
console.log('[] == 0', [] == 0)
console.log('"" == 0', "" == 0)

---

类似的代码还有很多

console.log(1 + 1 + '1')
console.log('1' + 1 + 1 )
console.log(0 + [])
console.log(0 - [])
console.log({} + []);

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 1

如果是工作中，大概率不需要为此劳心费神，一般我们只需要使用 === 强等于做类型匹配，加上 TypeScript 大概率不会出现这种怪异的代码。

如果是面试的话，那么我们需要掌握几个点

1. 是否有显式类型转换，这里需要注意一下表达式的运算优先级

2. 当做计算的时候，可以记住一个顺序。会把引用类型变成基本类型。

   1. Symbol(Symbol.toPrimitive)
   2. valueOf
   3. toString

console.log(34 == '034')
console.log(52 == '0x34')

a = new Proxy([],{
    get(obj, key){
        console.log('proxy', 'get', '1', key, obj[key] instanceof Function?obj[key]():obj[key])
        return obj[key]
    }
});
b = new Proxy([],{
    get(obj, key){
        console.log('proxy', 'get', '2', key, obj[key] instanceof Function?obj[key]():obj[key])
        return obj[key]
    }
});

// performance

console.group(`a == !b`)
console.log(a == !b)
console.groupEnd(`a == !b`)

console.group(`1 + a`)
console.log(1 + a)
console.groupEnd(`1 + a`)

console.group(`'1' + a`)
console.log('1' + a)
console.groupEnd(`'1' + a`)


console.group(`a + 1`)
console.log(a + 1)
console.groupEnd(`a + 1`)

console.group(`a + '1'`)
console.log(a + '1')
console.groupEnd(`a + '1'`)

MDN - JavaScript 数据类型和数据结构

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 2

这是由于 JavaScript 隐式类型转换规则导致的。涉及到的JavaScript知识点：数据类型和类型转换、运算符。
面试题中会考，平时工作一般碰不到。

举例：

[] == "" && [] == 0 && "" == 0
首先，对于 [] == ""，JavaScript 会将 [] 转换成字符串类型，得到 ""，然后再比较。同理，对于 "" == 0，JavaScript 会将 "" 和 0 都转换为数字类型，得到 0 == 0。而对于 [] == 0，JavaScript 会将 [] 转换成数字类型，得到 0，然后再比较。因此，这个表达式的结果为 true。

[] != []
JavaScript 中的 == 和 != 运算符是将两个操作数转换成相同类型之后再比较，对于对象类型（包括数组），会先将其转换成原始类型。因此，两个不同的空数组是两个不同的对象，所以它们的比较结果是 false。

[] == ![]
这个表达式看起来有些奇怪。首先，![] 的结果是 false，因为 [] 转换成布尔类型为 true，取反后为 false。然后，对于 [] == false，JavaScript 会将 [] 转换成数字类型，得到 0，然后再比较。因此，这个表达式的结果为 true。

1 + 1 + '1' 和 '1' + 1 + 1
这两个表达式看似相似，但结果却不同。在第一个表达式中，1 + 1 得到数字类型的 2，然后 2 + '1' 又得到字符串类型的 '21'。在第二个表达式中，'1' + 1 得到字符串类型的 '11'，然后 '11' + 1 又得到字符串类型的 '111'。

0 + [] 和 0 - []
对于 0 + []，JavaScript 会将空数组转换成字符串类型，得到 ""，然后再将 0 和 "" 都转换成数字类型，得到 0。对于 0 - []，JavaScript 会将空数组转换成数字类型，得到 0，然后再将 0 减去 0，得到 0。

{} + []
对于 {} + []，JavaScript 会先将空数组转换成字符串类型，得到 ""，然后再将空对象转换成字符串类型，得到 "[object Object]"，最后再将这两个字符串拼接起来，得到 "[object Object]"。