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);
}