ES6 Iterator筆記（摘抄至阮一峯的ECMAScript 6入門）

ES6 Iterator筆記（摘抄至阮一峯的ECMAScript 6入門）

---

Iterator的遍歷過程

1. 建立一個指針對象，指向當前數據結構的起始位置。也就是說，遍歷器對象本質上，就是一個指針對象。

2. 第一次調用指針對象的next方法，能夠將指針指向數據結構的第一個成員。

3. 第二次調用指針對象的next方法，指針就指向數據結構的第二個成員。

4. 不斷調用指針對象的next方法，直到它指向數據結構的結束位置。

每一次調用next方法，都會返回數據結構的當前成員信息。具體來講，就是返回一個包含value和 done兩個屬性的對象。其中，value屬性是當前成員的值，done屬性是一個布爾值，表示遍歷是否結束。

數據結構的默認Iterator接口

在ES6中，有些數據結構原生具有Iterator接口（好比數組），即不用任何處理，就能夠被for...of循環遍歷，有些就不行（好比對象）。緣由在於，這些數據結構原生部署了Symbol.iterator屬性，另一些數據結構沒有。凡是部署了Symbol.iterator屬性的數據結構，就稱爲部署了遍歷器接口。調用這個接口，就會返回一個遍歷器對象。

Symbol.iterator屬性自己是一個函數，就是當前數據結構默認的遍歷器生成函數。執行這個函數，就會返回一個遍歷器。

一個對象（Object）若是要有可被for...of循環調用的Iterator接口，就必須在Symobol.iterator的屬性上部署遍歷器生成方法（原型鏈上的對象具備該方法也可）。

---

class RangeIterator {
        // 構造方法
        constructor (start, stop) {
            this.value = start
            this.stop = stop
        }
        
        // 返回Symbol對象的iterator屬性，這是一個預約好的、類型爲Symbol的特殊值，因此要放在方括號內。
        [Symbol.iterator] () {
            return this
        }
        
        next () {
            var value = this.value
            if (value < this.stop) {
                this.value++
                return {
                    done: false,
                    value: value
                }
            }
            return {
                done: true,
                value: undefined
            }
        }
    }
    
    function range (start, stop) {
        return new RangeIterator(start, stop)
    }
    
    for (var value of range(0, 3)) {
        console.log(value)
    }

調用Iterator接口的場合

1. 解析賦值

   對數組和Set結構進行解構賦值時，會默認調用Symbol.iterator方法。

2. 擴展運算符

   擴展運算符（...）也會調用默認的iterator接口
   
   只要某個數據結構部署了iterator接口，就能夠對它使用擴展運算符，將其轉爲數組。

3. yield*

   yield*後面跟的是一個可遍歷的結構，它會調用該結構的遍歷器接口。

4. 其餘場合

   因爲數組的遍歷會調用遍歷器接口，因此任何接收數組做爲參數的場合，其實都調用了遍歷器接口。