JavaScript解构赋值的执行顺序与迭代器协议

一、右侧求值与迭代器的创建时机

当执行类似于 const [a, b] = getSource(); 的语句时，引擎的第一步动作永远是自顶向下、由内而外对赋值号右侧的表达式求值（Right-Hand Side First）。只有在右侧表达式求值完毕并返回实体后，左侧的模式匹配（Pattern Matching）逻辑才会介入。

在数组解构（Array Destructuring Pattern）场景中，规范会立即对右侧计算结果执行内部抽象操作 GetIterator(obj, sync)。该操作通过访问对象的 [Symbol.iterator] 属性获取迭代器工厂函数并执行它。若右侧操作数不是可迭代对象（例如传入普通对象、null 或 undefined），引擎会在此刻直接抛出 TypeError: ... is not iterable，此时左侧任何变量绑定都不会发生，其后续默认值表达式也绝不会被求值。

// 观察右侧求值与迭代器创建的时序示例
function getRHS() {
  console.log("1. 右侧表达式执行: getRHS()");
  return {
    [Symbol.iterator]() {
      console.log("2. 迭代器工厂调用: [Symbol.iterator]()");
      let step = 0;
      return {
        next() {
          console.log("3. next() 驱动提取索引: " + step);
          return step < 2 
            ? { value: ++step, done: false } 
            : { value: undefined, done: true };
        }
      };
    }
  };
}

console.log("开始解构...");
const [x, y] = getRHS();
console.log("解构完成: x = " + x + ", y = " + y);

/* 输出时序：
开始解构...
1. 右侧表达式执行: getRHS()
2. 迭代器工厂调用: [Symbol.iterator]()
3. next() 驱动提取索引: 0
3. next() 驱动提取索引: 1
解构完成: x = 1, y = 2
*/

二、从左到右的单步驱动：next() 调用与惰性默认值

进入解构模式后，左侧的元素绑定严格按照书写顺序从左至右（Left-to-Right）逐项消耗迭代器。数组解构采用的是纯粹的按需拉取（Pull-on-demand）模型：左侧每出现一个目标标识符，解构引擎就向迭代器调用一次 next()。

这种单步驱动模式直接决定了默认值（Default Value）的执行机制：

• 严格的 undefined 判定：ECMAScript 规范明确规定，只有当 iterator.next() 返回的 value === undefined（无论是因为集合已耗尽导致 done: true，还是显式产出了 { value: undefined, done: false }）时，赋给该项的默认值表达式才会被执行。若返回 null、0、false 或 ""，默认值均不会触发。
• 惰性求值（Lazy Evaluation）：默认值表达式不会提前预估。只要当前位置从迭代器拿到了明确非 undefined 的值，默认值表达式中的函数调用、计算或副作用就彻底跳过。
• 暂时性死区（TDZ）与词法环境：左侧各变量的环境绑定也是从左到右依次确立的。位于左侧较早完成绑定的变量，可以直接被后续变量的默认值表达式读取；但如果反过来在前面的默认值中尝试读取位于其后方的变量，将直接触发 ReferenceError: Cannot access '...' before initialization。

let defaultRunCount = 0;
function computeDefault(name) {
  console.log("[副作用触发] 默认值函数执行: " + name);
  defaultRunCount++;
  return 999;
}

// 场景 A: 惰性跳过默认值
const [a = computeDefault("a")] = [42];
console.log("a = " + a + ", 默认值执行次数 = " + defaultRunCount); 
// 输出: a = 42, 默认值执行次数 = 0 （未触发计算）

// 场景 B: 变量间依赖与 TDZ 边界
const [first = 10, second = first * 2] = [5];
console.log("first = " + first + ", second = " + second); 
// 输出: first = 5, second = 10 (second 成功读取了先被初始化的 first)

// 场景 C: 逆向依赖引发 TDZ 错误
// const [x = y, y = 1] = []; 
// 抛出错误 -> Uncaught ReferenceError: Cannot access 'y' before initialization

三、迭代器提前终止与 IteratorClose（资源回收语义）

在实际工程中，开发者经常用数组解构从数据源中截取前几项，例如 const [head] = stream;。此时，数据源中可能还有成百上千个数据项尚未被遍历。在底层，迭代器并没有正常运行到 done: true。

为了杜绝资源泄漏，ECMAScript 迭代器协议设计了 IteratorClose 机制：当解构模式提前结束（左侧声明的所有变量均已匹配完毕，但迭代器游标尚未耗尽），或者在解构赋值求值过程中抛出了异常时，引擎会主动检查当前迭代器是否包含名为 return 的方法。如果存在且为函数，引擎将立即调用 iterator.return()。

// 演示：解构截断自动触发生成器的 finally 资源清理
function* dataSourceGenerator() {
  try {
    console.log("==> 生成器启动，建立资源连接");
    yield "chunk-1";
    yield "chunk-2";
    yield "chunk-3";
  } finally {
    console.log("==> IteratorClose 触发：安全释放底层连接资源");
  }
}

console.log("只解构前两项：");
const [item1, item2] = dataSourceGenerator();
console.log("读取到项: " + item1 + ", " + item2);

/* 输出日志证明清理发生：
只解构前两项：
==> 生成器启动，建立资源连接
==> IteratorClose 触发：安全释放底层连接资源
读取到项: chunk-1, chunk-2
*/

四、剩余元素（Rest Element）与完全消耗

当在数组解构的尾部使用剩余操作符（Rest Element），例如 const [head, ...tail] = iterable; 时，执行逻辑会发生显著变化：

1. 引擎首先像之前一样，为 head 单步调用一次 next()。
2. 一旦解析进入 ...tail，规范将启动内置的消耗循环，连续、无中断地反复调用 iterator.next()，直到接收到 { done: true } 为止。
3. 所有在循环中提取到的 value 会被顺序装入一个全新分配的 Array 实例，并赋值给 tail。

这意味着剩余操作符会强行耗尽迭代器。如果右侧是一个无限序列生成器（如自然数流），普通的 const [a, b] = naturals(); 可以毫秒级瞬间完成且安全触发 return()；但一旦写成 const [a, ...rest] = naturals();，JavaScript 线程将陷入无限循环直至耗尽调用栈或内存崩溃。

五、对照与辨析：对象解构的非迭代机制与计算属性名求值顺序

理解数组解构特性的一个绝佳参照是对象解构（Object Destructuring Pattern）。很多初学者误以为对象解构也是某种形式的迭代，但实际上它们在规范层面是完全分流的两套体系：

1. 底层并不依赖迭代器

对象解构底层调用的是 ToObject(rhs) 以及标准的属性获取内部方法 [[Get]]。对象解构完全不需要对象实现 [Symbol.iterator] 接口。任何可以被包装为对象的类型（除 null 和 undefined 外）均可被对象解构，即使是数字 const { toString } = 123; 也能正常运行。

2. 计算属性名的严格先求值顺序

在对象解构中，如果包含计算属性名（Computed Property Names），例如 const { [key1()]: v1 = def1(), [key2()]: v2 = def2() } = target;，其求值顺序极为严格：

• 按书写顺序首先计算 key1() 表达式并将其转为属性名键值。
• 立刻通过 [[Get]] 读取 target[evaluatedKey1]。
• 若读取结果为 undefined，则执行 def1()。
• 随后才会对下一个计算键 key2() 执行相同的流程。

// 计算属性名与默认值的跨步执行顺序验证
const tracer = [];
function logStep(msg) { tracer.push(msg); return msg; }

const sourceObj = {
  get foo() { logStep("读取属性 foo"); return undefined; },
  get bar() { logStep("读取属性 bar"); return 100; }
};

const {
  [logStep("计算键1")]: val1 = logStep("求默认值1"),
  [logStep("计算键2")]: val2 = logStep("求默认值2")
} = sourceObj;

console.log(tracer);
/* 严格遵循的单步顺序输出：
[
  "计算键1",
  "读取属性 foo",
  "求默认值1",   // foo 值为 undefined，触发默认值
  "计算键2",
  "读取属性 bar",  // bar 值为 100，非 undefined，成功跳过 "求默认值2"
]
*/

六、核心要点总结与开发避坑清单

为了在实际开发中写出无隐式 Bug、高性能的解构代码，建议牢记以下四项规范级铁律：

掌握解构赋值背后的迭代器协议不仅有助于理清日常调试中的执行时序谜团，更是编写高内聚生成器、流式管道（Stream Pipeline）和可复用可迭代组件的坚实基石。