JavaScript 类型转换之谜：为什么 [] + 0 = ‘0‘ 而 {} + 0 = 0？

在 JavaScript 面试中，表达式 [] + 0 和 {} + 0 的结果差异常令人困惑。它们揭示了 JavaScript 类型转换的核心机制，下面我们深入解析背后的原理。

---

案例一：[] + 0 = '0'（字符串拼接）

转换步骤：

1. 数组 [] 转换为原始值
   JavaScript 对对象（包括数组）执行 ToPrimitive 转换：

   • 优先调用 valueOf() → 返回数组本身（非原始值，继续下一步）

   • 调用 toString() → 空数组转为 空字符串 ''

2. 表达式变为 '' + 0
+ 运算符遇到字符串时触发字符串拼接：

   • 数字 0 被转为字符串 '0'

   • 最终结果：'' + '0' = '0'

✅ 关键点：

• 数组优先转为字符串（toString()）

• + 在字符串存在时执行拼接

---

案例二：{} + 0 = 0（数字加法）

语法歧义解析：

• JavaScript 将开头的 {} 解析为 空代码块（而非空对象！）

• 实际执行的代码等价于：

  js

  {}; // 空块（无操作）
  +0; // 一元正号操作符

• +0 将 0 转换为数字（结果仍是 0）

验证真实对象行为：

若想将 {} 作为对象处理，需用括号消除歧义：

js

console.log(({}) + 0); // "[object Object]0"

此时：

1. 对象 {} 通过 toString() 转为 "[object Object]"

2. 字符串拼接："[object Object]" + "0"

---

核心规则总结

表达式	关键机制	结果
[] + 0	数组转字符串 → 拼接	'0'（字符串）
{} + 0	{} 被解析为代码块 → 一元+	0（数字）
({}) + 0	对象转字符串 → 拼接	"[object Object]0"

---

背后的 JavaScript 哲学

1. 隐式类型转换
   JavaScript 在运算中自动转换类型，规则由操作符和操作数共同决定。

2. 运算符重载
   + 根据操作数类型切换功能（数字加法/字符串拼接）。

3. 语法解析歧义
   {} 在行首被解析为代码块，而非对象字面量。

---

面试要点

• 遇到 + 运算符时，优先检查操作数中是否存在字符串。

• 对象转原始值：优先 valueOf()，若无有效值则用 toString()。

• 使用括号 ( ) 可显式控制表达式解析顺序。

理解这些机制，就能驾驭 JavaScript 的隐式转换逻辑，避免掉入类型陷阱！