聊一下JavaScript ES6的Iterator

這篇文章只是聊一下iterator的基礎知識, 若是想全面瞭解iterator是什麼東西, 能夠點這

阮一峯老師的ES6入門

一 . Iterator是什麼?

Iterator是一個提供給各類數據結構訪問的統一接口, 簡單來講, iterator就是一個接口

二 . Iterator有什麼用?

使用iterator主要有三個做用

• 爲一些數據結構 Map,Set,Array,String... 提供一個統一的簡便的訪問接口
• 使數據結構的成員按順序排序,能夠經過 next 關鍵字按順序訪問數據結構的數據
• 供 for...of 遍歷消費 (主要)

三 . Iterator怎麼用? (重點來了)

重點在這 : 全部的遍歷器 iterator 都是從名爲 [Symbol.iterator] 的接口(方法)開始出發的, 而後調用 next 方法按順序輸出數據

---

上面說到了 [Symbol.iterator] next , 那什麼是 [Symbol.iterator]? 什麼是 next?

1. 什麼是 [Symbol.iterator]

• [Symbol.iterator]是啓動遍歷器的開關, 若是沒有這個開關, 就不存在遍歷器
• [Symbol.iterator]分爲先天的和後天的

首先, 先天的[Symbol.iterator]存在在一些特殊的數據結構中, 包括 Array String Map Set TypedArray arguments NodeList(dom) GeneratorObject等等, 以下圖所示

看到沒, 就是這個東西, 在我說的那幾個數據結構中都有, 不信的能夠本身一個一個去試試

可是, 不知道有沒有發現, 咱們最經常使用的 Object 是沒有 [Symbol.iterator]接口的

因此 Object 是不能使用 for...of 進行遍歷的

雖然 Object 有不少方法能夠遍歷, 可是產品經理就要你用 for ... of 遍歷 Object , 怎麼辦, 這就要說到後天的 [Symbol.iterator]

var obj = {
    [Symbol.iterator] : () => {
        return {}
    }
}
for (const val of obj) {
    console.log(val)
}
複製代碼

Object 不是沒有 [Symbol.iterator] 方法嗎, 咱們本身加一個不就好了

看 ! 如今 obj 是可遍歷的了 ( 這裏的錯誤先無論, 後面會說到 )

---

2. 什麼是 next

上面說過 iterator 從 [Symbol.iterator] 開始, 經過 next 按順序輸出數據, 因此, 咱們來看一下從 [Symbol.iterator] 出發後的是什麼東西

能夠很清楚的看到, [Symbol.iterator] 執行後會返回一個包含 next 方法的對象

因此 , next 就是由 [Symbol.iterator] 執行後返回的一個方法, 下面咱們來執行一下next

每次執行 next 都會返回一個對象 {value: xxx, done: xxx}

value爲遍歷的數據結構的每一位, done 表示是否完成遍歷

如今咱們能夠完善一下上面的錯誤了

var obj = {
    [Symbol.iterator] : () => {
        return {
            next : () => {
                const isContinue = (Math.random() > 0.75)
                if (isContinue) 
                    return { 
                        value : `數字 ${Math.floor(Math.random() * 10)}`, 
                        done : false 
                    }
                return { value : undefined, done : true}
            }
        }
    }
}
for (const val of obj) {
    console.log(val)
}
複製代碼

ber ~ 這樣對象就算沒有 [Symbol.iterator] 接口也可使用 for ... of 去遍歷了

---

3. 什麼是 for ... of

一直在用 for ... of, 順帶提一嘴, for ... of是什麼玩意

for ... of是ES6的一個新遍歷的方法, 且只能遍歷具備 iterator 接口的數據結構, 也就是要有 [Symbol.iterator], 至於這個遍歷有什麼好處, 你們可自行百度一下

四 . 總結

全部的遍歷器 iterator 都是從名爲 [Symbol.iterator] 的接口(方法)開始出發的, 而後調用 next 方法按順序輸出數據

ber~