面试题：JavaScript 中赋值操作符扩展用法之复合赋值

Question

请解释 `a += b` 这种复合赋值操作符在 JavaScript 中的执行原理，与 `a = a + b` 有什么潜在区别？并且举例说明在数组和对象的操作场景下，这种复合赋值可能会带来的不同结果。

Answer 1

1. a += b 在 JavaScript 中的执行原理：
   • a += b 首先会计算 a + b 的值，然后将计算结果赋值给 a。它是一种简写形式，本质上是对 a 进行重新赋值。例如：

   let a = 5;
   let b = 3;
   a += b; // 等价于 a = a + b，此时 a 的值为 8
   

2. 与 a = a + b 的潜在区别：
   • 对于基本数据类型（如数字、字符串、布尔值等），a += b 和 a = a + b 在行为上基本没有区别。但是对于引用数据类型（如数组、对象），a += b 会隐式地调用 toString 方法，而 a = a + b 也会调用 toString 方法，但在处理引用类型时细节上可能有一些不同。
   • 例如，当 a 是数组时：

   let arr1 = [1, 2];
   let arr2 = [3, 4];
   arr1 += arr2;
   console.log(arr1); // "1,23,4"，这里 arr1 变成了字符串，因为数组执行 += 时会先调用 toString 方法将数组转为字符串
   let arr3 = [1, 2];
   let arr4 = [3, 4];
   arr3 = arr3 + arr4;
   console.log(arr3); // "1,23,4"，同样因为数组执行 + 运算时会调用 toString 方法转为字符串
   

3. 数组操作场景下的不同结果：
   • 对于 a += b：

   let arrA = [1, 2];
   let arrB = [3, 4];
   arrA += arrB;
   console.log(arrA); // "1,23,4"，原数组被转换为字符串并与另一个数组转换后的字符串拼接
   

   • 如果使用 a = a.concat(b) 这种方式来合并数组（类似 a = a + b 对于数组操作的合理替代方式）：

   let arrC = [1, 2];
   let arrD = [3, 4];
   arrC = arrC.concat(arrD);
   console.log(arrC); // [1, 2, 3, 4]，得到一个新的合并后的数组，原数组没有被破坏并转换为字符串
   

4. 对象操作场景下的不同结果：
   • JavaScript 中对象直接使用 += 会报错，因为对象没有默认的 toString 转换逻辑适用于 += 操作。例如：

   let obj1 = {x: 1};
   let obj2 = {y: 2};
   // obj1 += obj2; // 报错，Uncaught TypeError: can't convert to primitive value
   

   • 如果使用 Object.assign 来合并对象（类似 a = a + b 对于对象操作的合理替代方式）：

   let obj3 = {x: 1};
   let obj4 = {y: 2};
   let newObj = Object.assign({}, obj3, obj4);
   console.log(newObj); // {x: 1, y: 2}，得到一个新的合并后的对象