JS相等性比较陷阱揭秘：理解`[]==![]`为`true`背后的宽松相等运算符与类型转换

发表于 2024-05-23 更新于 2024-05-24 分类于 JS 阅读次数： Waline：本文字数： 2.9k 阅读时长 ≈ 3 分钟

引言

JavaScript是一门弱类型（或称动态类型）语言，这意味着变量的类型可以在运行时改变，为开发者提供了极大的灵活性。然而，这也引入了类型转换的概念，尤其是在使用宽松相等运算符==进行比较时。宽松相等不仅比较值，还会在必要时自动转换类型以进行比较，这一特性有时会导致预期之外的结果。

下面来看一组比较运算符的例子：

[] == []  // false
[] == ![] // true
[] == !{} // true
{} == !{} // Uncaught SyntaxError: Unexpected token '=='
{} == {}  // Uncaught SyntaxError: Unexpected token '=='
{} == ![] // Uncaught SyntaxError: Unexpected token '=='
{} == []  // Uncaught SyntaxError: Unexpected token '=='
({} == !{}) // false

提出问题：为什么[] == ![]会得出true这样一个看似反直觉的结果？
下面，我们将会逐步接近答案，揭开这个陷阱。

JavaScript中的比较运算符

严格相等与宽松相等

严格相等运算符 === 要求两边的值及其类型完全一致才能返回 true，是最安全的比较方式。
宽松相等运算符 == 在比较前，如果两侧数据类型不匹配，会尝试将它们转换成相同类型后再比较，这便是问题的根源所在。

类型转换规则

类型转换发生在比较操作中，涉及多种类型间的转换逻辑，例如：

布尔值转数字 (true 转换为 1, false 转换为 0)
字符串与数字之间的相互转换
对象转换为原始值（通常是字符串或数字）

深入解析`[] == ![]`

逻辑非运算符`!`

首先，理解![]是如何工作的。逻辑非运算符!会对表达式求布尔值，然后取反。对于数组（即使是空数组[]），在布尔上下文中被视为true，因此![]的结果是false。在宽松比较的上下文中，false进一步被转换为数字0。

数组到字符串再到数字

接下来，考虑左侧的空数组[]。在宽松相等比较中，数组会首先转换为它的字符串表示形式，即""（空字符串）。随后，空字符串在进一步的比较中会被转换为数字0。

比较”” == 0

因此，[] == ![] 的比较实质上变为"" == 0。在JavaScript的宽松比较规则下，空字符串""和数字0都被认为是“空”或“假”值，在比较时被视作相等。这解释了为什么[] == ![]的结果是true，尽管直观上两者看似完全不同。

宽松相等运算符的其他陷阱示例

除了[] == ![]，宽松相等还可能导致其他令人迷惑的结果，例如：

0 == '0'：数字0与字符串'0'在宽松比较中相等。
null == undefined：这两种特殊的值在比较时也被认为是相等的。

最佳实践与建议

为了避免由宽松相等引发的潜在问题，建议采取以下措施：

首选严格相等运算符 “===”：除非你明确知道并期望类型转换发生，否则总是使用严格相等。
显式类型转换：当你确实需要进行类型转换时，显式地进行，比如使用Number(), String()或Boolean()函数，以增强代码的可读性。
代码审查：团队内部实施代码审查，可以帮助识别并纠正潜在的比较陷阱。
单元测试：编写测试用例来验证比较逻辑的正确性，确保代码行为符合预期。

再次回顾开始的问题

[] == []  // false
[] == ![] // true
[] == !{} // true
{} == !{} // Uncaught SyntaxError: Unexpected token '=='
{} == {}  // Uncaught SyntaxError: Unexpected token '=='
{} == ![] // Uncaught SyntaxError: Unexpected token '=='
{} == []  // Uncaught SyntaxError: Unexpected token '=='
({} == !{}) // false

现在我们可以对它们挨个做出解释：

[] == [] // false
这里两个空数组虽然内容相同，但在使用宽松相等==比较时，因为它们是两个不同的对象实例，所以结果为false。
[] == ![] // true
这个表达式实际上分两步理解：
1. ![] 首先执行，[]转换为布尔值再取反，结果是false。
2. []会转换为""，而false被转换为0。就成了"" == 0的比较。根据JavaScript的类型转换规则，空字符串和数字0在比较时被认为是相等的（因为都转为了相同的布尔值false），所以结果为true。
[] == !{} // true
!{}同样是非空对象转换为布尔值取反，与上面相同，结果为true。
{} == !{} 、{} == {} 、{} == ![] // Uncaught SyntaxError: Unexpected token '=='

这里就不再是宽松相等比较类型转换的问题了
这些表达式报错是因为在JS中，大括号 {} 既可以表示对象字面量也可以表示代码块。
在这些情况下，解释器尝试将它们解释为代码块，但是紧接着的 == 或 != 导致了语法错误，因为代码块后面直接跟比较操作符是不合法的。解决这个问题需要确保大括号用于创建对象时明确其意图，例如通过赋值或声明变量的方式：({} == !{}) // false、let obj = {} 等。
({} == !{}) // false
这里就是合法的比较了，!{}同样转换为false，然后{}转换为原始值字符串[object Object]
所以表达式变成了[object Object] == false，结果为false。

理解JavaScript的宽松相等运算符及其隐含的类型转换机制，是成为高效JavaScript开发者的关键之一。尽管这些特性有时可能引入意料之外的行为，但通过掌握它们，我们可以编写出更加健壮、易于维护的代码。面对[] == ![]这样的谜题，我们不再困惑，而是能清晰地解析其背后的逻辑，进而避免类似的陷阱。

引言