ES6入门教程——12、ES6 迭代器

一、Iterator迭代过程

• 它是通过一个键为Symbol.iterator 的方法来实现。
• 迭代器是用于遍历数据结构元素的指针（如数据库中的游标）。
• 通过 next 方法进行向下迭代指向下一个位置， next 方法会返回当前位置的对象，对象包含了 value 和 done 两个属性， value 是当前属性的值， done 用于判断是否遍历结束。

const items = ["0", "1", "2"];
const it = items[Symbol.iterator]();
 
it.next();
>{value: "0", done: false}
it.next();
>{value: "1", done: false}
it.next();
>{value: "2", done: false}
it.next();
>{value: undefined, done: true}

二、可迭代的数据结构

• Array
• String
• Map
• Set
• Dom元素

使用 for...of 循环对数据结构进行迭代。

//数组
for (let item of ["1", "2", "3"]) {
  console.log(item);
}

//字符串
for (const c of 'z\uD83D\uDC0A') {
    console.log(c);
}
// 输出:
// z
// \uD83D\uDC0A

//Map
const map = new Map();
map.set(0, "张三");
map.set(1, "李四");
 
for (let item of map) {
  console.log(item);
}
// output:
// [0, "张三"]
// [1, "李四"]


//arguments
//arguments 目前在 ES6 中使用越来越少，但也是可遍历的
function args() {
  for (let item of arguments) {
    console.log(item);
  }
}
args("zero", "one");
// output:
// zero
// one

三、不可迭代的情形

const arrayLink = {length: 2, 0: "zero", 1: "one"}，如果直接迭代，会出错，需要借助Array.from,例：

// 报 TypeError 异常
for (let item of arrayLink) {
  console.log(item);
}
 
// 正常运行
// output:
// zero
// one
for (let item of Array.from(arrayLink)) {
  console.log(item);
}