【前端每天一题】🔥 第 12 题：== 与 === 的区别？为什么 [] == ![] 是 true？

== 与 === 的区别 - 前端高频必考题

第 12 题：== 与 === 的区别？为什么 [] == ![] 是 true？

这道题属于前端面试常年 TOP 级别，必考。

第 12 题：== 与 === 的区别？为什么 [] == ![] 是 true？

---

一、===（严格相等）

不进行类型转换，类型不同必定不等。

示例：

1 === '1'           // false
true === 1          // false
null === undefined  // false

---

二、==（抽象相等）

会进行复杂的隐式类型转换。

转换规则（必须背）：

1. 对象 == 基本类型 → 对象转成基本类型（调用 valueOf 或 toString）
2. 字符串、数字、布尔值 → 最终都会先转成数字比较
3. null 和 undefined 只互相相等
4. NaN == 任何值都是 false

---

三、重点：对象与基本类型比较

对象 == 基本类型 → 对象 → 基本类型（toPrimitive）

示例：

[] == 0   // true
// [] -> '' -> 0 == 0

为什么 [] 会变成 ""？

因为：

[].toString() === '' 

---

四、终极面试题：为什么 [] == ![] 是 true？

这是前端面试真·高频题。

✔ 第一步：先算 ![]

• [] 是对象，所以是真值 → true
• ![] → false

所以表达式变成：

[] == false

✔ 第二步：false 转成数字

根据规则：布尔值 → 数字

• false → 0

[] == 0

✔ 第三步：对象转基本类型（数组 → 字符串 → 数字）

• [].toString() → ''
• Number('') → 0

最终：

0 == 0 → true

---

五、另外三个容易考的陷阱题（你顺便拿下）

❓ 1. "0" == false → ?

• false → 0
• "0" → Number("0") = 0
• 结果： true

❓ 2. [] == [] → ?

• 引用类型比较地址
• 两个不同数组地址不同
• 结果： false

❓ 3. null == undefined → ?

• 规则规定它俩互相相等
• 结果： true

---

六、总结表（面试官最爱）

表达式	结论	原因
[] == ![]	true	![]→false→0；[]→""→0
[] == false	true	false→0；[]→0
[] == 0	true	[]→""→0
"" == 0	true	""→0
null == undefined	true	规则
[] == []	false	引用不同

---

七、速记卡片（背这个就够了）

🎯 === 不转换类型
🎯 == 会类型转换，最终都转成数字比较

📌 布尔转数字：true=1，false=0
📌 对象和基本类型比较：对象 → 基本类型（toString/valueOf）
📌 数组变成：[].toString() === ''

🔥 必考：[] == ![]
[] == false → false→0；[]→""→0 → 0==0 → true