对象加数组之谜：透视幕后的运作原理

2023-10-08 18:25:19

在编程的世界中，对象的加法运算往往会产生一些出乎意料的结果，尤其是在与数组进行运算时。例如，如果我们尝试将一个空对象和一个数组相加，我们会惊讶地发现结果竟然为0；而反之，将数组和空对象相加却得到一个看似奇怪的字符串"[object Object]”。

面对如此匪夷所思的结果，不禁让人好奇：幕后究竟发生了什么？为了揭开这个谜题，让我们踏上探索JavaScript运算符和抽象语法树（AST）的神秘之旅。

运算符的魅力：深入浅出

运算符是JavaScript语言中不可或缺的基本元素，它就像魔法棒一样，赋予了程序员操纵数据和控制流程的能力。在JavaScript中，运算符种类繁多，常见的有算术运算符（如+、-、*、/）、比较运算符（如==、===、!=、!==）、逻辑运算符（如&&、||、!）等。这些运算符就像编程语言中的砖块，构成了程序的基本逻辑和结构。

抽象语法树：程序的骨架

抽象语法树（AST）是一个抽象的概念，它将程序代码解析成一个层次结构，以树状图的方式展现出程序的语法结构。AST就像是一幅代码的蓝图，了代码的组成部分及其相互之间的关系。通过分析AST，我们可以清晰地了解程序的逻辑和结构，从而更深入地理解代码的运行机制。

对象加数组：谜团揭秘

现在，让我们回到对象加数组的谜题上。要理解为什么对象加数组等于0，我们需要借助AST来一探究竟。

const obj = {};
const arr = [];
console.log(obj + arr); // 0

通过观察AST，我们可以发现，obj + arr的表达式被解析为以下AST：

ExpressionStatement
  BinaryExpression
    Left
      ObjectExpression
        Properties
          []
    Right
      ArrayExpression
        Elements
          []

在这个AST中，对象和数组都被解析为相应的节点，加号（+）则表示一个二元运算符。在执行这段代码时，JavaScript引擎首先会将对象和数组转换成它们的原始值，即分别为[object Object]和[]。然后，引擎将这两个原始值进行数字相加运算，由于它们都是非数字值，因此结果为NaN（Not a Number），最终再将NaN转换成数字0，这就是为什么对象加数组等于0的原因。

数组加对象：反转谜团

反过来，当我们尝试将数组和对象相加时，就会得到一个字符串"[object Object]”。同样地，我们可以通过AST来理解这种现象。

const arr = [];
const obj = {};
console.log(arr + obj); // "[object Object]"

ExpressionStatement
  BinaryExpression
    Left
      ArrayExpression
        Elements
          []
    Right
      ObjectExpression
        Properties
          []

在这种情况下，AST与之前的情况类似，只是左右节点互换了位置。然而，由于JavaScript引擎在执行代码时，会将非原始值（如对象和数组）自动转换成它们的字符串表示形式，因此数组和对象相加时，实际上是将数组的字符串表示形式和对象的字符串表示形式进行连接，最终得到的结果为"[object Object]”。