JavaScript中数组结合Rest参数的对象解构行为解析

1. 解构赋值语句的具体执行过程 #

首先要明确：数组在JS里本质是特殊的对象，它的索引（0、1...）其实是字符串类型的对象属性键，同时还自带length这个自有属性。

这条解构语句的执行步骤如下：

1. 先执行右侧表达式[1, 2]，得到一个数组实例。把它当作普通对象看时，拥有三个可枚举自有属性："0": 1、"1": 2、"length": 2。
2. 对象解构的...foo属于Rest模式，它的作用是：创建一个新的普通对象，然后遍历右侧对象的所有未被解构模式单独匹配的可枚举自有属性，把这些键值对全部复制到新对象中。
3. 因为这条语句里没有单独解构任何属性（比如const {0: bar, ...foo} = [1,2]这种写法才会单独匹配0属性），所以数组的所有可枚举自有属性都会被收集到foo里。
4. 最终foo的值是{0: 1, 1: 2, length: 2}，打印后就会输出这个对象。

2. 不使用解构赋值的等价实现 #

可以用Object.assign或者手动遍历属性来模拟这个逻辑：

方法一：使用Object.assign #

Object.assign会把源对象的所有可枚举自有属性复制到目标对象里，和Rest解构的行为一致：

const arr = [1, 2];
const foo = Object.assign({}, arr);
console.log(foo); // 输出 {0: 1, 1: 2, length: 2}

方法二：手动遍历属性 #

通过遍历数组的可枚举自有属性，手动复制到新对象：

const arr = [1, 2];
const foo = {};
// 遍历数组的可枚举属性
for (const key in arr) {
  // 确保只复制自有属性（排除原型链上的属性）
  if (arr.hasOwnProperty(key)) {
    foo[key] = arr[key];
  }
}
console.log(foo); // 输出 {0: 1, 1: 2, length: 2}

3. ECMA规范中的相关说明 #

ES2015（ES6）引入的对象解构Rest模式，在ECMAScript规范中有明确定义：

• 对象Rest元素会创建一个新的普通对象，然后遍历源对象的可枚举自有属性，将那些没有被解构模式中其他属性绑定匹配到的键值对添加到新对象中。
• 数组作为Object的子类，它的索引属性（字符串形式的数字键）和length属性都是可枚举的自有属性，所以会被Rest模式收集到新对象中。

内容的提问来源于stack exchange，提问作者Magnus