【ES6】迭代器與可迭代物件
ES6 新的陣列方法、集合、for-of 迴圈、展開運算子（...）甚至非同步程式設計都依賴於迭代器（Iterator ）實現。本文會詳解 ES6 的迭代器與生成器，並進一步挖掘可迭代物件的內部原理與使用方法
一、迭代器的原理
在程式語言中處理陣列或集合時，使用迴圈語句必須要初始化一個變數記錄迭代位置，而程式化地使用迭代器可以簡化這種資料操作
如何設計一個迭代器呢？
迭代器的本身是一個物件，這個物件有 next( ) 方法返回結果物件，這個結果物件有下一個返回值 value、迭代完成布林值 done，模擬建立一個簡單迭代器如下：
function createIterator(iterms) { let i = 0 return { next() { let done = (i >= iterms.length) let value = !done ? iterms[i++] : undefined return { done, value } } } } let arrayIterator = createIterator([1, 2, 3]) console.log(arrayIterator.next()) // { done: false, value: 1 } console.log(arrayIterator.next()) // { done: false, value: 2 } console.log(arrayIterator.next()) // { done: false, value: 3 } console.log(arrayIterator.next()) // { done: true, value: undefined }
對以上語法感到困惑的，可參考： 【ES6】物件的新功能與解構賦值
每次呼叫迭代器的 next( ) 都會返回下一個物件，直到資料集被用盡。
ES6 中迭代器的編寫規則類似，但引入了生成器物件，更簡單的建立迭代器物件
二、建立迭代器
ES6 封裝了一個生成器用來建立迭代器。顯然生成器是返回迭代器的函式，這個函式通過 function 後的星號（*）表示，並使用新的內部專用關鍵字yield指定迭代器 next( ) 方法的返回值。
如何使用 ES6 生成器建立一個迭代器呢？一個簡單的例子如下：
function *createIterator() { yield 123; yield 'someValue' } let someIterator = createIterator() console.log(someIterator.next()) // { value: 123, done: false } console.log(someIterator.next()) // { value: 'someValue', done: false } console.log(someIterator.next()) // { value: undefined, done: true }
使用yield關鍵字可以返回任意值或表示式，可以給迭代器批量新增元素：
// let createIterator = function *(items) { // 生成器函式表示式 function *createIterator(items) { for (let i = 0; i < items.length; i++) { yield items[i] } } let someIterator = createIterator([123, 'someValue']) console.log(someIterator.next()) // { value: 123, done: false } console.log(someIterator.next()) // { value: 'someValue', done: false } console.log(someIterator.next()) // { value: undefined, done: true }
由於生成器本身是函式，所以可新增到物件中，使用方式如下：
let obj = {
// createIterator: function *(items) { // ES5
*createIterator(items) { // ES6
for (let i = 0; i < items.length; i++) {
yield items[i]
}
}
}
let someIterator = obj.createIterator([123, 'someValue'])生成器函式的一個特點是， 當執行完一句 yield 語句後函式會自動停止執行，再次呼叫迭代器的 next( ) 方法才會繼續執行下一個 yield 語句。
這種 自動中止函式執行的能力衍生出很多高階用法。
三、可迭代物件
在 ES6 中常用的集合物件（陣列、Set/Map集合）和字串都是可迭代物件，這些物件都有預設的迭代器和Symbol.iterator屬性。
通過生成器建立的迭代器也是可迭代物件，因為生成器預設會為Symbol.iterator屬性賦值。
3.1 Symbol.iterator
可迭代物件具有Symbol.iterator屬性，即具有Symbol.iterator屬性的物件都有預設迭代器。
我們可以用Symbol.iterator來訪問物件的預設迭代器，例如對於一個數組：
let list = [11, 22, 33]
let iterator = list[Symbol.iterator]()
console.log(iterator.next()) // { value: 11, done: false }Symbol.iterator獲得了陣列這個可迭代物件的預設迭代器，並操作它遍歷了陣列中的元素。
反之，我們可以用Symbol.iterator來檢測物件是否為可迭代物件：
function isIterator(obj) {
return typeof obj[Symbol.iterator] === 'function'
}
console.log(isIterator([11, 22, 33])) // true
console.log(isIterator('sometring')) // true
console.log(isIterator(new Map())) // true
console.log(isIterator(new Set())) // true
console.log(isIterator(new WeakMap())) // false
console.log(isIterator(new WeakSet())) // false顯然陣列、Set/Map 集合、字串都是可迭代物件，而 WeakSet/WeakMap 集合（弱引用集合）是不可迭代的。
3.2 建立可迭代物件
預設情況下，自定義的物件都是不可迭代的。
剛才講過，通過生成器建立的迭代器也是一種可迭代物件，生成器預設會為Symbol.iterator屬性賦值。
那如何將自定義物件變為可迭代物件呢？通過給Symbol.iterator屬性新增一個生成器：
let collection = {
items: [11,22,33],
*[Symbol.iterator]() {
for (let item of this.items){
yield item
}
}
}
console.log(isIterator(collection)) // true
for (let item of collection){
console.log(item) // 11 22 33
}陣列 items 是可迭代物件，collection 物件通過給Symbol.iterator屬性賦值也成為可迭代物件。
3.3 for-of
注意到上個栗子使用了for-of代替索引迴圈，for-of是 ES6 為可迭代物件新加入的特性。
思考一下for-of迴圈的實現原理。
對於使用for-of的可迭代物件，for-of每執行一次就會呼叫這個可迭代物件的 next( )，並將返回結果儲存在一個變數中，持續執行直到可迭代物件 done 屬性值為 false。
// 迭代一個字串
let str = 'somestring'
for (let item of str){
console.log(item) // s o m e s t r i n g
}本質上來說，for-of呼叫 str 字串的Symbol.iterator屬性方法獲取迭代器（這個過程由 JS 引擎完成），然後多次呼叫 next( ) 方法將物件 value 值儲存在 item 變數。
將
for-of用於不可迭代物件、null 或 undefined 會報錯！
3.4 展開運算子（...）
ES6 語法糖展開運算子（...）也是服務於可迭代物件，即只可以“展開”陣列、集合、字串、自定義可迭代物件。
以下栗子輸出不同可迭代物件展開運算子計算的結果：
let str = 'somestring'
console.log(...str) // s o m e s t r i n g
let set = new Set([1, 2, 2, 5, 8, 8, 8, 9])
console.log(set) // Set { 1, 2, 5, 8, 9 }
console.log(...set) // 1 2 5 8 9
let map = new Map([['name', 'jenny'], ['id', 123]])
console.log(map) // Map { 'name' => 'jenny', 'id' => 123 }
console.log(...map) // [ 'name', 'jenny' ] [ 'id', 123 ]
let num1 = [1, 2, 3], num2 = [7, 8, 9]
console.log([...num1, ...num2]) // [ 1, 2, 3, 7, 8, 9 ]
let udf
console.log(...udf) // TypeError: undefined is not iterable由以上程式碼可以看出，展開運算子（...）可以便捷地將可迭代物件轉換為陣列。同for-of一樣，展開運算子（...）用於不可迭代物件、null 或 undefined 會報錯！
四. 預設迭代器
ES6 為很多內建物件提供了預設的迭代器，只有當內建的迭代器不能滿足需求時才自己建立迭代器。
ES6 的 三個集合物件：Set、Map、Array 都有預設的迭代器，常用的如values()方法、entries()方法都返回一個迭代器，其值區別如下：
-
entries()：多個鍵值對 -
values()：集合的值 -
keys()：集合的鍵
呼叫以上方法都可以得到集合的迭代器，並使用for-of迴圈，示例如下：
/******** Map ***********/
let map = new Map([['name', 'jenny'], ['id', 123]])
for(let item of map.entries()){
console.log(item) // [ 'name', 'jenny' ] [ 'id', 123 ]
}
for(let item of map.keys()){
console.log(item) // name id
}
for (let item of map.values()) {
console.log(item) // jenny 123
}
/******** Set ***********/
let set = new Set([1, 4, 4, 5, 5, 5, 6, 6,])
for(let item of set.entries()){
console.log(item) // [ 1, 1 ] [ 4, 4 ] [ 5, 5 ] [ 6, 6 ]
}
/********* Array **********/
let array = [11, 22, 33]
for(let item of array.entries()){
console.log(item) // [ 0, 11 ] [ 1, 22 ] [ 2, 33 ]
}此外 String 和 NodeList 型別都有預設的迭代器，雖然沒有提供其它的方法，但可以用for-of迴圈
推薦閱讀《深入理解ES6》