关于for...of循环运行逻辑的技术问询

核心疑问解答 #

你之前习惯用for (let i = 0; i < arr.length; i++)这类传统for循环，对for...of的底层逻辑有两个核心疑问：

• for...of不是基于类函数机制实现的，它是ES6引入的原生遍历语法，依赖JS的可迭代协议工作，和传统for循环是完全不同的遍历逻辑。
• 它的运行依赖for、of关键字，以及变量声明（const/let），JS引擎会直接处理可迭代对象的遍历流程，不需要包装成函数调用。

示例代码的逐行运行流程 #

先看你的示例代码：

const clay = [ "Clay", "Clay", "Clay", "Clay" ]
const toFireInKiln = []

for (const i of clay) {
   const mug = `${i} coffee mug`
   toFireInKiln.push(mug)
}

console.log(toFireInKiln)

运行步骤拆解：

1. 初始化阶段：创建clay数组（包含4个"Clay"字符串），同时创建空数组toFireInKiln用于存储结果。
2. 循环启动：JS引擎检测到clay是数组（默认符合可迭代协议），自动生成该数组的迭代器对象。
3. 循环迭代过程：
   • 第一次循环：调用迭代器的next()方法，返回{ value: "Clay", done: false }，把value赋值给const i；然后生成字符串"Clay coffee mug"，push到toFireInKiln，此时数组变为["Clay coffee mug"]。
   • 重复上述步骤，直到第四次循环：迭代器返回的value还是"Clay"，push后toFireInKiln有4个元素。
4. 循环结束：当迭代器的next()方法返回{ value: undefined, done: true }时，JS引擎终止循环。
5. 输出结果：console.log打印toFireInKiln，最终结果是["Clay coffee mug", "Clay coffee mug", "Clay coffee mug", "Clay coffee mug"]。

关键区别提示 #

和你熟悉的传统for循环对比：

• 传统for循环是基于索引遍历，需要手动控制索引变量、终止条件、步长；
• for...of是基于元素遍历，直接拿到数组的每一个元素值，不需要关心索引，更适合只需要操作元素的场景。

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