JavaScript中for...of循环的of运算符工作原理是什么

你代码里的of是ES6新增for...of遍历语法的核心组成部分，用来遍历所有实现了可迭代接口的对象，不需要手动维护遍历索引、判断循环终止条件。 #

核心执行流程 #

for...of的运行逻辑完全基于迭代器协议，步骤非常固定：

• 先对of右侧的表达式求值，拿到最终的遍历目标。在你的代码里，遍历目标就是Object.entries(object1)的返回值：一个成员为[键, 值]格式的二维数组，结构类似[['a', 'somestring'], ['b', 42]]，数组本身是JS内置的可迭代对象。
• 调用遍历目标的[Symbol.iterator]()方法，拿到它的迭代器实例——所有能被for...of遍历的对象，都必须实现这个方法返回迭代器。
• 进入循环，重复执行迭代器的next()方法：
  • 每次next()会返回{ value: 遍历当前项, done: 布尔值 }格式的结果，把value赋值给of左侧声明的变量。你写的const [key, value]是数组解构语法，直接把当前拿到的键值对数组的两个元素，分别绑定到key和value两个变量上。
  • 执行循环体内的代码，也就是你写的console.log打印逻辑。
  • 检查返回结果里的done字段，如果为true就直接终止循环，否则继续下一轮迭代。

等价代码参考 #

你写的这段for...of逻辑，和下面手动调用迭代器的代码运行效果完全一致，可以对照理解：

const object1 = {
  a: 'somestring',
  b: 42
};

// 拿到可迭代的键值对数组
const entryList = Object.entries(object1);
// 拿到迭代器实例
const iterator = entryList[Symbol.iterator]();
let iterationResult;

// 手动迭代直到done为true
while (!(iterationResult = iterator.next()).done) {
  // 解构当前项拿键和值
  const [key, value] = iterationResult.value;
  console.log(`${key}: ${value}`);
}

常见注意点 #

• 不要和for...in语法混淆：for...in遍历的是对象自身+原型链上所有可枚举属性的键名，遍历数组时会把自定义挂载的非索引属性也遍历出来；for...of只遍历迭代器定义返回的内容，遍历数组时只会按顺序返回下标对应的元素值，不会受原型属性、自定义额外属性影响。
• JS内置支持for...of遍历的对象包括：数组、字符串、Map、Set、函数的arguments对象、NodeList这类DOM集合、Generator生成器对象。普通对象默认没有实现可迭代接口，不能直接用for...of遍历，这也是你代码里要先调用Object.entries把对象转成键值对数组的原因。

内容的提问来源于stack exchange，提问作者Siddhesh B. Kukade