ES6 迭代

数组、字符串、Set、Map 这些数据，”按顺序一个个读出来”叫迭代（iteration）。ES6 给出了统一的遍历方式 for...of，一篇搞定怎么用、什么时候用。

for...of：直接拿元素值

for...of 专门用来遍历可迭代对象——数组、字符串、Set、Map 都属于这一类：

// 示例：遍历数组
for (const item of [10, 20, 30]) {
  console.log(item); // 10 20 30
}

// 示例：遍历字符串，逐字符读取
for (const ch of 'abc') {
  console.log(ch); // a b c
}

写法上和 for...in 很像（都是 of/in），但含义完全不同，见下表。

遍历方式怎么选

for...of vs for...in

两者只差一个单词，灵魂完全不同：

// 示例：遍历数组
const arr = [10, 20];
for (const v of arr) { console.log(v); } // 10 20     —— 元素值
for (const k in arr) { console.log(k); } // "0" "1"   —— 下标（字符串）

• for...of：拿到值，遍历可迭代对象。
• for...in：拿到键/下标（字符串），遍历对象属性名。

for...in 会把原型链上的属性也带出来，行为不够直观，日常请用 for...of 或 forEach。

普通对象能不能用 for...of？

不能。普通对象默认不可迭代，直接用会报错：

// 示例：报错，obj is not iterable
const obj = { a: 1, b: 2 };
for (const v of obj) {
  console.log(v);
}

想遍历对象时，用 Object.keys / Object.entries（对象扩展篇讲过）转换成数组再迭代：

// 示例：遍历对象，先转成数组
const obj = { a: 1, b: 2 };
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value); // a 1，b 2
}

一句话总结

• for...of 拿值，能遍历数组、字符串、Set、Map——日常最常用。
• for...in 拿键，遍历对象属性，少用。
• 普通对象要迭代，先 Object.entries() 转成数组。
• 展开运算符 ... 能展开数组、字符串、Set/Map，正因为它们可迭代（对象展开走的是另一套”属性拷贝”规则，运算符扩展篇讲过）。