21个JavaScript诡异相等案例全解析：从“[] == ![]“到“NaN !== NaN“的终极避坑指南-优快云博客

21个JavaScript诡异相等案例全解析：从"[] == ![]"到"NaN !== NaN"的终极避坑指南

【免费下载链接】JavaScript-Equality-Table 项目地址: https://gitcode.com/gh_mirrors/ja/JavaScript-Equality-Table

你是否曾被JavaScript的相等性比较折磨得怀疑人生？为什么0 == ""返回true而0 === ""返回false？为什么[] == ![]这个看似荒谬的表达式结果竟然是true？为什么连NaN === NaN都会返回false？今天，我们将通过21组精心挑选的对比案例，结合官方规范和实际代码，彻底解开JavaScript相等性比较的谜题。读完本文后，你将能够准确预测任何相等性比较的结果，理解隐式类型转换的底层逻辑，并掌握在实际开发中避免这些"陷阱"的最佳实践。

一、JavaScript相等性比较的两种模式

JavaScript提供了两种相等性比较操作符：抽象相等(==)和严格相等(===)，它们的核心区别在于是否执行类型转换。

1.1 严格相等(`===`)：类型与值必须完全匹配

严格相等操作符在比较前不执行任何类型转换，当且仅当操作数的类型相同且值相等时才返回true。这种比较方式直观且不易出错，是大多数情况下的推荐选择。

// 类型不同，直接返回false
console.log(1 === "1"); // false
console.log(true === 1); // false
console.log(null === undefined); // false

// 类型相同，比较值是否相等
console.log("hello" === "hello"); // true
console.log(NaN === NaN); // false (特殊情况)
console.log({} === {}); // false (引用不同)

1.2 抽象相等(`==`)：允许类型转换的"宽松"比较

抽象相等操作符在比较前会先尝试将操作数转换为相同类型，然后再比较它们的值。ECMAScript规范定义了一套复杂的类型转换规则，这也是大多数"诡异"结果的根源。

// 类型不同但转换后值相等
console.log(1 == "1"); // true
console.log(0 == false); // true
console.log("" == false); // true

// 看似荒谬却符合规则的结果
console.log([] == ![]); // true
console.log(null == undefined); // true
console.log({} == "[object Object]"); // true

1.3 相等性比较决策流程图

mermaid

二、21个典型值的全面比较矩阵

以下是JavaScript中21个常见值之间的严格相等(===)比较结果矩阵。绿色单元格表示比较结果为true，白色表示false。

┌─────────────┬──────┬───────┬────┬────┬─────┬────────┬─────────┬──────┬──────┬───────┬───┬──────┬──────────┬────────┬───────────┬─────┬──────┬──────┬─────┐
│             │ true │ false │ 1  │ 0  │ -1  │ "true" │ "false" │ "1"  │ "0"  │ "-1"  │ "" │ null │ undefined│ []     │ {}        │ [[]]│ [0]  │ [1]  │ NaN │
├─────────────┼──────┼───────┼────┼────┼─────┼────────┼─────────┼──────┼──────┼───────┼───┼──────┼──────────┼────────┼───────────┼─────┼──────┼──────┼─────┤
│ true        │ 绿   │ 白    │ 白  │ 白  │ 白   │ 白     │ 白      │ 白    │ 白    │ 白     │ 白 │ 白    │ 白       │ 白      │ 白        │ 白   │ 白    │ 白    │ 白   │
│ false       │ 白   │ 绿    │ 白  │ 白  │ 白   │ 白     │ 白      │ 白    │ 白    │ 白     │ 白 │ 白    │ 白       │ 白      │ 白        │ 白   │ 白    │ 白    │ 白   │
│ 1           │ 白   │ 白    │ 绿  │ 白  │ 白   │ 白     │ 白      │ 白    │ 白    │ 白     │ 白 │ 白    │ 白       │ 白      │ 白        │ 白   │ 白    │ 白    │ 白   │
│ 0           │ 白   │ 白    │ 白  │ 绿  │ 白   │ 白     │ 白      │ 白    │ 白    │ 白     │ 白 │ 白    │ 白       │ 白      │ 白        │ 白   │ 白    │ 白    │ 白   │
│ -1          │ 白   │ 白    │ 白  │ 白  │ 绿   │ 白     │ 白      │ 白    │ 白    │ 白     │ 白 │ 白    │ 白       │ 白      │ 白        │ 白   │ 白    │ 白    │ 白   │
│ "true"      │ 白   │ 白    │ 白  │ 白  │ 白   │ 绿     │ 白      │ 白    │ 白    │ 白     │ 白 │ 白    │ 白       │ 白      │ 白        │ 白   │ 白    │ 白    │ 白   │
│ "false"     │ 白   │ 白    │ 白  │ 白  │ 白   │ 白     │ 绿      │ 白    │ 白    │ 白     │ 白 │ 白    │ 白       │ 白      │ 白        │ 白   │ 白    │ 白    │ 白   │
│ "1"         │ 白   │ 白    │ 白  │ 白  │ 白   │ 白     │ 白      │ 绿    │ 白    │ 白     │ 白 │ 白    │ 白       │ 白      │ 白        │ 白   │ 白    │ 白    │ 白   │
│ "0"         │ 白   │ 白    │ 白  │ 白  │ 白   │ 白     │ 白      │ 白    │ 绿    │ 白     │ 白 │ 白    │ 白       │ 白      │ 白        │ 白   │ 白    │ 白    │ 白   │
│ "-1"        │ 白   │ 白    │ 白  │ 白  │ 白   │ 白     │ 白      │ 白    │ 白    │ 绿     │ 白 │ 白    │ 白       │ 白      │ 白        │ 白   │ 白    │ 白    │ 白   │
│ ""          │ 白   │ 白    │ 白  │ 白  │ 白   │ 白     │ 白      │ 白    │ 白    │ 白     │ 绿 │ 白    │ 白       │ 白      │ 白        │ 白   │ 白    │ 白    │ 白   │
│ null        │ 白   │ 白    │ 白  │ 白  │ 白   │ 白     │ 白      │ 白    │ 白    │ 白     │ 白 │ 绿    │ 白       │ 白      │ 白        │ 白   │ 白    │ 白    │ 白   │
│ undefined   │ 白   │ 白    │ 白  │ 白  │ 白   │ 白     │ 白      │ 白    │ 白    │ 白     │ 白 │ 白    │ 绿       │ 白      │ 白        │ 白   │ 白    │ 白    │ 白   │
│ []          │ 白   │ 白    │ 白  │ 白  │ 白   │ 白     │ 白      │ 白    │ 白    │ 白     │ 白 │ 白    │ 白       │ 白      │ 白        │ 白   │ 白    │ 白    │ 白   │
│ {}          │ 白   │ 白    │ 白  │ 白  │ 白   │ 白     │ 白      │ 白    │ 白    │ 白     │ 白 │ 白    │ 白       │ 白      │ 白        │ 白   │ 白    │ 白    │ 白   │
│ [[]]        │ 白   │ 白    │ 白  │ 白  │ 白   │ 白     │ 白      │ 白    │ 白    │ 白     │ 白 │ 白    │ 白       │ 白      │ 白        │ 白   │ 白    │ 白    │ 白   │
│ [0]         │ 白   │ 白    │ 白  │ 白  │ 白   │ 白     │ 白      │ 白    │ 白    │ 白     │ 白 │ 白    │ 白       │ 白      │ 白        │ 白   │ 白    │ 白    │ 白   │
│ [1]         │ 白   │ 白    │ 白  │ 白  │ 白   │ 白     │ 白      │ 白    │ 白    │ 白     │ 白 │ 白    │ 白       │ 白      │ 白        │ 白   │ 白    │ 白    │ 白   │
│ NaN         │ 白   │ 白    │ 白  │ 白  │ 白   │ 白     │ 白      │ 白    │ 白    │ 白     │ 白 │ 白    │ 白       │ 白      │ 白        │ 白   │ 白    │ 白    │ 白   │
└─────────────┴──────┴───────┴────┴────┴─────┴────────┴─────────┴──────┴──────┴───────┴───┴──────┴──────────┴────────┴───────────┴─────┴──────┴──────┴─────┘

注：此矩阵基于项目源码中的values.js文件定义的21个值生成，每个单元格表示对应行和列值的严格相等比较结果。

三、十大诡异相等案例深度剖析

3.1 `[] == ![]`：为什么空数组等于它的否定？

这个表达式堪称JavaScript相等性比较中最反直觉的案例之一：

console.log([] == ![]); // true

解析步骤：

![]首先计算，逻辑非操作符将数组转换为布尔值。根据规则，任何对象(包括空数组)都转换为true，因此![]结果为false。
现在表达式简化为[] == false。
由于操作数类型不同(对象 vs 布尔值)，根据抽象相等规则，布尔值先转换为数字：false → 0。
表达式变为[] == 0。
对象需要转换为原始值，空数组[]调用toString()方法得到空字符串""。
现在表达式为"" == 0，字符串与数字比较，字符串转换为数字："" → 0。
最终比较0 == 0，结果为true。

3.2 `null == undefined`：为什么两个"空"值相等？

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

解析：

ECMAScript规范特别规定，null和undefined在抽象相等比较中被视为相等。这是一个特殊 case，不涉及任何类型转换。但它们的类型不同(null是Null类型，undefined是Undefined类型)，因此严格相等比较返回false。

3.3 `0 == ""`：为什么数字零等于空字符串？

console.log(0 == ""); // true
console.log(0 === ""); // false

解析：

数字与字符串比较，字符串需要转换为数字。
空字符串""转换为数字0。
比较变为0 == 0，结果为true。

3.4 `NaN !== NaN`：为什么NaN不等于它自己？

console.log(NaN == NaN); // false
console.log(NaN === NaN); // false
console.log(Number.isNaN(NaN)); // true
console.log(Object.is(NaN, NaN)); // true

解析：

NaN(Not-a-Number)是一个特殊的数值，表示不是数字的结果。根据IEEE 754浮点数标准，NaN与任何值(包括自身)的比较结果都是false。这是一个特例，需要使用Number.isNaN()函数或Object.is()方法来正确检测NaN。

3.5 `[] == ""`：为什么空数组等于空字符串？

console.log([] == ""); // true
console.log([] === ""); // false

解析：

对象与字符串比较，对象需要转换为原始值。
数组的toString()方法默认返回元素用逗号分隔的字符串，空数组[]调用toString()得到空字符串""。
比较变为"" == ""，结果为true。

3.6 `{} == "[object Object]"`：对象的默认转换

console.log({} == "[object Object]"); // true
console.log({} === "[object Object]"); // false

解析：

对象与字符串比较，对象需要转换为原始值。
普通对象调用toString()方法返回"[object Object]"。
比较变为"[object Object]" == "[object Object]"，结果为true。

3.7 `true == 1`：布尔值与数字的转换

console.log(true == 1); // true
console.log(true === 1); // false
console.log(true == "1"); // true

解析：

布尔值与其他类型比较时，布尔值先转换为数字：true → 1，false → 0。
true == 1 → 1 == 1 → true。
true == "1" → 1 == "1" → 字符串转换为数字 → 1 == 1 → true。

3.8 `new Date(0) == 0`：日期对象的比较

console.log(new Date(0) == 0); // true
console.log(new Date(0) === 0); // false

解析：

对象与数字比较时，对象转换为原始值。Date对象的valueOf()方法返回时间戳(毫秒数)。
new Date(0)表示1970年1月1日00:00:00 UTC，其时间戳为0。
比较变为0 == 0，结果为true。

3.9 `[null] == ""`：包含null的数组比较

console.log([null] == ""); // true
console.log([undefined] == ""); // true

解析：

数组与字符串比较，数组转换为字符串。
数组的toString()方法会递归将元素转换为字符串并以逗号分隔。
[null].toString() → ""(因为null转换为字符串是"null"？不，这里有更复杂的规则)
- 实际上，数组的join()方法(由toString()调用)会将null和undefined转换为空字符串。
- [null].join(',') → ""，因此[null] == "" → "" == "" → true。

3.10 `0 == "\n"`：空白字符的数字转换

console.log(0 == "\n"); // true
console.log(0 == "\t"); // true
console.log(0 == " "); // true

解析：

字符串与数字比较时，字符串会被转换为数字。
只包含空白字符(空格、制表符、换行符等)的字符串转换为数字0。
"\n" → 0，因此0 == "\n" → true。

四、if语句中的真值判断

除了相等性比较，JavaScript中的if语句也会对值进行布尔转换。项目中专门有一个标签页展示了不同值在if语句中的表现：

// 项目源码中的if语句测试逻辑
function testIfStatement(value) {
  return new Function("if(" + value + "){return true}else{return false}")();
}

以下是常见值在if语句中的结果：

值	if(value)结果	说明
true	true	布尔值true
false	false	布尔值false
1	true	非零数字
0	false	零
-1	true	非零数字
""	false	空字符串
"hello"	true	非空字符串
null	false	null值
undefined	false	undefined值
[]	true	数组对象(即使为空)
{}	true	对象(即使为空)
NaN	false	非数字
Infinity	true	无穷大

记忆口诀： 在JavaScript中，只有6个值被视为"假值"(falsy)，其他所有值都是"真值"(truthy)：

false
0 和 -0
"" (空字符串)
null
undefined
NaN

五、相等性比较的最佳实践

5.1 优先使用严格相等(`===`)

项目README明确建议："When in doubt, use three equals signs."(有疑问时，使用三个等号)。严格相等避免了隐式类型转换带来的意外结果，使代码更可预测。

// 推荐做法
console.log(1 === "1"); // false，类型不同
console.log(0 === false); // false，类型不同
console.log(null === undefined); // false，类型不同

5.2 了解并规避常见陷阱

陷阱表达式	结果	替代方案
`x == null`	检查null或undefined	`x === null \|\| x === undefined`
`"" == 0`	true	`x === "" \|\| x === 0`
`[] == ""`	true	`Array.isArray(x) && x.length === 0`
`NaN == NaN`	false	`Number.isNaN(x)`
`x == true`	可能不符合预期	`x === true`

5.3 特殊值的比较方法

5.3.1 NaN的检测

由于NaN不等于任何值(包括自身)，检测NaN需要使用专门的方法：

// 推荐：ES6的Number.isNaN()
console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN("not a number")); // false

// 不推荐：全局isNaN()会先转换值
console.log(isNaN(NaN)); // true
console.log(isNaN("not a number")); // true (先转换为NaN)

// ES5兼容写法
function isNaNValue(x) {
  return x !== x; // 只有NaN满足x !== x
}

5.3.2 数组和对象的比较

数组和对象的相等性比较检查的是引用而非值：

// 引用比较
const a = [];
const b = [];
console.log(a === b); // false (不同引用)

// 深度比较需要自定义函数或库
function deepEqual(x, y) {
  // 处理基本类型和引用相同的情况
  if (x === y) return true;
  
  // 处理null和undefined
  if (x === null || y === null || typeof x !== 'object' || typeof y !== 'object') {
    return false;
  }
  
  // 处理数组
  if (Array.isArray(x) && Array.isArray(y)) {
    if (x.length !== y.length) return false;
    for (let i = 0; i < x.length; i++) {
      if (!deepEqual(x[i], y[i])) return false;
    }
    return true;
  }
  
  // 处理对象
  const keysX = Object.keys(x);
  const keysY = Object.keys(y);
  if (keysX.length !== keysY.length) return false;
  
  for (const key of keysX) {
    if (!keysY.includes(key) || !deepEqual(x[key], y[key])) return false;
  }
  return true;
}

console.log(deepEqual([1, 2], [1, 2])); // true
console.log(deepEqual({a: 1}, {a: 1})); // true

5.4 常见场景的安全比较

场景	不安全写法	安全写法
检查空字符串	`if (x == "")`	`if (x === "")`
检查数字0	`if (x == 0)`	`if (x === 0)`
检查null/undefined	`if (x == null)`	`if (x === null \|\| x === undefined)`
检查布尔值	`if (x == true)`	`if (x === true)`
检查数组为空	`if (arr == "")`	`if (Array.isArray(arr) && arr.length === 0)`

六、项目使用指南

6.1 本地运行项目

要在本地查看完整的JavaScript相等性比较表，可以按以下步骤操作：

# 克隆仓库
git clone https://gitcode.com/gh_mirrors/ja/JavaScript-Equality-Table

# 进入项目目录
cd JavaScript-Equality-Table

# 打开index.html文件
# 在浏览器中直接打开或使用简易HTTP服务器
python -m http.server 8000
# 然后访问 http://localhost:8000

项目提供了三种视图：

== 比较表：展示抽象相等比较结果
=== 比较表：展示严格相等比较结果
if() 表：展示不同值在if语句中的表现

6.2 统一版本视图

项目还提供了一个"统一版本"视图，将==和===的结果合并展示：

# 访问统一版本
http://localhost:8000/unified/

统一版本使用不同颜色标识三种结果：

绿色：==和===都为true
黄色：==为true但===为false
白色：==和===都为false

七、总结与展望

JavaScript的相等性比较虽然复杂，但只要理解了其底层规则，就能避免大部分陷阱。本文通过21个常见值的比较矩阵和10个典型诡异案例的深入解析，帮助你建立对==和===行为的清晰认识。

核心要点回顾：

严格相等(===)：类型和值必须完全匹配，不执行类型转换
抽象相等(==)：允许类型转换，遵循ECMAScript的转换规则
真值判断：if语句中只有6个值被视为假值，其他均为真值
最佳实践：优先使用===，了解并规避常见陷阱，特殊值特殊处理

JavaScript语言不断发展，虽然相等性比较的基本规则已稳定，但新的API如Object.is()提供了更多比较选项。Object.is()行为类似===，但能正确处理NaN和-0等特殊情况：

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

希望本文能帮助你彻底理解JavaScript的相等性比较，写出更健壮、更可预测的代码。记住，在面对复杂的比较场景时，项目提供的可视化表格是你的好帮手！

如果你觉得本文有帮助，请点赞、收藏并关注，下期我们将深入探讨JavaScript中的类型转换机制！

【免费下载链接】JavaScript-Equality-Table 项目地址: https://gitcode.com/gh_mirrors/ja/JavaScript-Equality-Table

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

21个JavaScript诡异相等案例全解析：从“[] == ![]“到“NaN !== NaN“的终极避坑指南