for...of、forEach与迭代器：JS遍历方式对比

在 JavaScript 中，forEach 是专属于数组及部分内建集合的高阶函数，侧重于不可中断的声明式回调；for...of 是基于 ES6 迭代器协议（Iteration Protocols）的通用语法结构，原生支持 break、continue 以及串行 await 异步等待；而“迭代器（Iterator）”则是驱动 for...of 底层运转的核心契约规范。理解三者的本质差别与底层机制，是规避异步陷阱与编写可控遍历逻辑的关键。

一、核心认知：forEach 的工作机制与固有边界

forEach 是 ECMAScript 5 (ES5) 引入的数组原型方法（Array.prototype.forEach）。它的设计初衷是提供一种函数式、声明式的数组元素遍历手段，避免开发者手动编写索引累加变量 let i = 0。

它的工作方式可以概括为“逐项回调分发”：接收一个回调函数，数组内部循环驱动，针对每个已存在的数组索引，主动调用一次该回调函数，并传入三个参数：当前元素 item、当前索引 index 和被遍历的原数组 array。

// forEach 标准语法示例
const tasks = ['解析配置', '初始化连接', '启动服务'];

tasks.forEach((task, index) => {
  console.log(`步骤 ${index + 1}: ${task}`);
});
// 示例输出:
// 步骤 1: 解析配置
// 步骤 2: 初始化连接
// 步骤 3: 启动服务

尽管 forEach 语法简洁，但在实际工程中，它有三个由于“回调执行模型”所带来的不可逾越的边界：

1. 无法被中途跳出或终止： 在 forEach 的回调函数中使用 break 或 continue 会直接抛出语法错误 SyntaxError: Illegal break statement。如果在回调函数内写 return，它仅仅代表从当前那一次回调函数执行中提前返回，并不会阻断数组继续对下一个元素发起调用。
2. 无法与 async/await 顺序配合： forEach 的底层实现并不关心回调函数是否返回 Promise。如果将回调函数声明为 async，forEach 会连续无等待地触发所有异步任务，导致任务并发执行，且外部代码无法通过 await forEach(...) 获知所有异步操作何时完成。
3. 适用对象局限： forEach 并非语言层面的通用循环语句，而是挂载在 Array.prototype（以及 Map、Set、NodeList 等个别类型）上的实例方法，普通对象或自定义数据结构若未挂载此方法则无法使用。

二、底层支柱：迭代器协议（Iteration Protocols）详解

在深入了解 for...of 之前，必须先理解 ES6 引入的底层通用标准——迭代协议（Iteration Protocols）。JavaScript 的迭代协议并不是一个具体的类或内置对象，而是一组由语言规范约定的接口契约。它包含两个核心部分：可迭代协议（Iterable Protocol）与迭代器协议（Iterator Protocol）。

1. 可迭代协议（Iterable Protocol）

一个对象若希望成为“可迭代对象”（Iterable），它或其原型链上必须定义一个名为 Symbol.iterator 的属性。该属性的值必须是一个无参函数，执行后返回一个符合迭代器协议的对象。

2. 迭代器协议（Iterator Protocol）

迭代器对象必须拥有一个 next() 方法。每次调用 next()，都必须返回一个包含以下两个属性的对象：

• value：当前步骤产出的值。当 done 为 true 时，如果未提供返回值，通常为 undefined。
• done：布尔值。若为 false，表示序列还有后续值；若为 true，表示迭代已耗尽。

此外，迭代器还可以选择性地实现 return() 方法。当消费循环通过 break、return 或抛出异常提前退出时，JavaScript 引擎会自动调用该方法，用于释放外部句柄、关闭文件或重置状态。

// 手动实现一个遵循完整协议的计数器对象
function createRange(start, end) {
  let current = start;
  return {
    // 1. 满足 Iterable 协议
    [Symbol.iterator]() {
      return this;
    },
    // 2. 满足 Iterator 协议
    next() {
      if (current <= end) {
        return { value: current++, done: false };
      }
      return { value: undefined, done: true };
    },
    // 3. 提前终止清理机制
    return() {
      console.log('迭代被提前终止，执行资源释放');
      return { value: undefined, done: true };
    }
  };
}

const range = createRange(1, 5);
for (const num of range) {
  console.log('当前数值:', num);
  if (num === 2) break; // 触发提前跳出
}
// 示例输出:
// 当前数值: 1
// 当前数值: 2
// 迭代被提前终止，执行资源释放

三、语法原生：for...of 的机制特征与应用优势

for...of 是 ES6 与迭代协议同步推出的语言级语法糖。作为语言的核心语法结构，它从根本上摆脱了“函数调用栈”的隔阂，直接在当前执行上下文中运行循环体。

1. 广泛的迭代兼容性

任何实现了 Symbol.iterator 协议的数据结构都可以直接使用 for...of 进行遍历。这不仅包含常规的 Array，还覆盖了：

• 内置集合： Map、Set、WeakMap（不可迭代）、WeakSet（不可迭代）。
• 文本序列： String（原生按照 Unicode 码点遍历，正确处理四字节 Emoji 等辅助平面字符）。
• 类数组对象： 函数内置的 arguments 对象、DOM 操作返回的 NodeList 和 HTMLCollection。
• 生成器对象： Generator 函数执行返回的 Generator 实例。

2. 原生控制流语句的完全支持

因为 for...of 运行在当前的词法作用域内，不是通过回调函数委托执行，因此可以在循环体内部直接书写：

• break：立即终止当前整个循环，跳出到循环外部。
• continue：立即跳过当前轮次的剩余代码，直接触发下一次 next() 调用。
• return：在函数内部的 for...of 中直接 return 会使整个外层函数立即返回。

四、关键转折：异步处理（Async/Await）深度对比

现代前端与 Node.js 开发中，绝大部分循环逻辑涉及异步 I/O，例如批量读取文件、调用第三方 API 接口或向数据库分批插入数据。这是 forEach 与 for...of 发生最剧烈分化、最容易产生隐蔽 Bug 的场景。

1. forEach 的“伪异步等待”陷阱

很多开发者尝试在 forEach 的参数中使用 async 关键字，并期望整个循环按序执行。以下代码直观地展示了这一错误：

// 模拟异步请求任务
const delayTask = (ms, name) => new Promise(resolve => {
  setTimeout(() => {
    console.log(`完成: ${name}`);
    resolve(name);
  }, ms);
});

async function runForEachError() {
  const items = ['任务A (300ms)', '任务B (100ms)', '任务C (200ms)'];
  console.log('--- forEach 启动 ---');

  items.forEach(async (item) => {
    // 尽管此处写了 await，但 forEach 本身不会等待该 Promise 决议
    if (item.includes('B')) await delayTask(100, item);
    else if (item.includes('C')) await delayTask(200, item);
    else await delayTask(300, item);
  });

  console.log('--- forEach 遍历结束 ---');
}

runForEachError();
// 实际执行输出顺序:
// --- forEach 启动 ---
// --- forEach 遍历结束 ---   <= 此时所有异步操作实际上完全没有完成！
// 完成: 任务B (100ms)
// 完成: 任务C (200ms)
// 完成: 任务A (300ms)

原因剖析： Array.prototype.forEach 内部是一个同步的 while 循环。当向其传入 async 函数时，每次回调调用返回的都是一个 Promise 对象，但 forEach 源码中根本没有 await 或处理返回值的逻辑，它会立即进入下一轮循环。其结果是：所有异步任务瞬间并发触发，外部代码无法掌握完成时机，且循环体内部如果抛出未捕获异常，外层的 try...catch 将完全失效。

2. for...of 的精准顺序等待

与此相反，for...of 是标准的语句结构，当在 async 函数中使用时，每一次循环体内遇到 await，整个函数上下文都会暂停，直到当前的 Promise 状态变为 Resolved 或 Rejected，才会继续执行下一轮迭代。

async function runForOfSequential() {
  const items = ['任务A (300ms)', '任务B (100ms)', '任务C (200ms)'];
  console.log('--- for...of 启动 ---');

  for (const item of items) {
    if (item.includes('B')) await delayTask(100, item);
    else if (item.includes('C')) await delayTask(200, item);
    else await delayTask(300, item);
    console.log(`单步执行完毕: ${item}`);
  }

  console.log('--- for...of 遍历全部完成 ---');
}

runForOfSequential();
// 实际执行输出顺序:
// --- for...of 启动 ---
// 完成: 任务A (300ms)
// 单步执行完毕: 任务A (300ms)
// 完成: 任务B (100ms)
// 单步执行完毕: 任务B (100ms)
// 完成: 任务C (200ms)
// 单步执行完毕: 任务C (200ms)
// --- for...of 遍历全部完成 ---

五、多维对比与工程细节差异

为了让读者在面对实际业务时能迅速做出合理选择，我们需要在稀疏数组处理、索引访问方式以及底层执行开销三个方面进一步拆解。

1. 稀疏数组（Sparse Arrays）处理差异

稀疏数组是指内部存在空槽位（empty slot / hole）的数组。两种方式在处理空槽位时逻辑完全不同：

• forEach 会自动跳过未分配内存的空槽，不触发回调函数。
• for...of 会将每个空槽正常消费，并产出其对应的值 undefined。

// 稀疏数组处理对比示例
const sparseList = [1, , 3]; // 索引 1 为空槽 (empty)

console.log('--- forEach 输出 ---');
sparseList.forEach((val, idx) => {
  console.log(`索引 ${idx}:`, val);
});
// 输出:
// 索引 0: 1
// 索引 2: 3 （跳过了索引 1）

console.log('--- for...of 输出 ---');
for (const val of sparseList) {
  console.log('值:', val);
}
// 输出:
// 值: 1
// 值: undefined （未跳过空槽，规范化返回 undefined）
// 值: 3

2. 索引与键值对的获取便利性

在需要获取数组索引的场景下，forEach 的参数签名 (item, index) 非常直接，不需要任何辅助工具。而在 for...of 中直接遍历数组只能拿到元素值。

如果使用 for...of 同时需要元素与索引，推荐结合数组的 entries() 方法进行解构赋值：

const colors = ['红', '绿', '蓝'];

// 使用 entries() 同时解构出索引与元素
for (const [index, color] of colors.entries()) {
  console.log(`位置 ${index} 对应的颜色是: ${color}`);
}

3. 遍历过程修改原数组的边界行为

若在遍历过程中向原数组添加元素（push）：

• forEach 在启动时会锁定数组的初始长度范围，后续新追加的元素不会被当前轮次的 forEach 遍历到。
• for...of 内部迭代器在每次调用 next() 时动态读取当前数组长度，因此若在循环体中不断 push 元素，会导致无限死循环。

六、选型指南与决策模型

基于上述分析，下表系统汇总了 for...of、forEach 与传统 for 循环在核心维度上的特性差异：

七、总结与最佳实践

JavaScript 的遍历工具演进展现了语言设计从“单纯的数组索引操作”到“面向通用数据抽象的协议化驱动”的升级：

• 使用 forEach 的时机： 当需要对一个已知数组的每一项执行轻量的副作用操作（例如打点上报、记录日志、DOM 绑定），且绝对不需要提前跳出、不涉及异步等待时，forEach 的声明式风格能够带来极高的一致性与可读性。
• 使用 for...of 的时机： 凡是涉及条件判断跳出（break）、跳过步进（continue）、按顺序执行的异步请求（await），或者是处理 Map、Set、生成器、字符串等非纯数组可迭代对象时，for...of 都是现代 JavaScript 的绝对首选。
• 理解迭代器协议的价值： 当需要构建流式数据源、分页加载序列、大型数据集合的惰性求值逻辑时，实现自定义的 [Symbol.iterator] 协议能够让你的数据结构与展开运算符（...）、解构赋值及 for...of 无缝融合，编写出极其优雅的高内聚代码。