JS 加法运算竟然暗藏玄机？空数组与空对象

「小墨是前端」致力于分享实用前端技术、挖掘优秀的开源项目，带你探索前端的奇妙世界，共同学习进步。

大家在学习 JavaScript时一定遇到过各种匪夷所思的现象，特别是类型转换，总能给你带来意想不到的“惊喜”。本期我们就从一个简单的加法运算入手，带你揭开 JavaScript 类型转换的神秘。

JavaScript 是一门弱类型语言，也就是说你不需要显式地声明变量的类型，JavaScript 会根据上下文自动进行类型转换。虽然方便，但也容易产生一些让人迷惑的结果，就像今天的主角——[] + []和[] + {}。

先来看[] + []。你可能会认为结果是一个包含两个空数组的数组，但实际结果却是一个空字符串""。这是因为 JavaScript 在进行加法运算时，如果遇到数组，会先将其转换为字符串，然后再进行拼接。空数组转换为字符串的结果就是空字符串，所以两个空字符串相加，结果自然也是空字符串。

console.log([] + []); // 输出 ""

接下来我们看看[] + {}。这次的结果更加出人意料，它是一个字符串"[object Object]"。这是因为 JavaScript 在进行加法运算时，如果遇到对象，会将其转换为字符串"[object Object]"，然后再与另一边的操作数进行拼接。由于空数组会被转换为字符串，所以[] + {}的结果就是"[object Object]"。

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

为了更好地理解类型转换的规则，我们再来看一些例子：

console.log(1 + []);      // 输出 "1"

console.log(1 + {});      // 输出 "1[object Object]"

console.log({} + []);      // 输出 0 (部分浏览器可能输出 "[object Object]")

console.log(true + []);    // 输出 "true"

console.log(true + {});    // 输出 "true[object Object]"

可以看到，数字和布尔值与空数组或空对象相加，都会先进行类型转换，然后再进行字符串拼接。

而{} + []比较特殊，{}在这个表达式中会被解析为一个代码块，而非空对象。代码块的运算结果为undefined，undefined转换为数字后为NaN，最终NaN与空数组转换为的数字 0 相加后依然为NaN，在某些浏览器输出0，而在部分浏览器，{}可能被解析成一个空对象,因此转换为"[object Object]"。

当进行加法运算时，JavaScript 会根据操作数的类型进行自动转换，而数组和对象会被转换成字符串。理解这些规则，能够帮助我们避免一些常见的错误，写出更健壮的 JavaScript 代码。

创作不易，求点赞、求在看、求转发！你的支持是我创作的最大动力！关注小墨，带你解锁更多前端技能！