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

mayaohua 發布于2019-08-20 18:19 / 1160人閱讀

摘要：也就是說，遍歷器對象本質上，就是一個指針對象。執行這個函數，就會返回一個遍歷器。一個對象如果要有可被循環調用的接口，就必須在的屬性上部署遍歷器生成方法原型鏈上的對象具有該方法也可。后面跟的是一個可遍歷的結構，它會調用該結構的遍歷器接口。

Iterator的遍歷過程

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

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

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

不斷調用指針對象的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接口的場合

解析賦值

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

擴展運算符

擴展運算符（...）也會調用默認的iterator接口

只要某個數據結構部署了iterator接口，就可以對它使用擴展運算符，將其轉為數組。

yield*

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

其他場合

由于數組的遍歷會調用遍歷器接口，所以任何接收數組作為參數的場合，其實都調用了遍歷器接口。

GPU云服務器云服務器 ECMAScript 6 ES6入門 es6-系列 java開發入門筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/84345.html

JS學習筆記 - 模塊化

摘要：在開發大型的項目中，可能會使用到管理的模塊化工具。說道，學習過的同學會比較熟悉，是服務器模塊的規范，采用了這個規范。可能是未來模塊化解決方案的首選。本文章記錄本人在學習 JavaScript 中理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復習。在開發大型的web項目中，可能會使用到管理js的模塊化工具。但是在前端輪子漫天飛的時代。那一款js模塊化工具真正適合我...

CntChen 2019-08-22 10:57 評論0 收藏0
（for in）遍歷鍵名和（for of）遍歷鍵值，這種說法嚴謹嗎？

摘要：但也可用于數組遍歷，返回的值是數組的索引，因為，嚴格來說，數組也是一個對象，所對應的屬性是每個值的索引。只遍歷對象自身的和繼承的可枚舉的屬性摘自阮一峰入門對象擴展一章。為新增遍歷方法。 [1] const arr = [7, 8, 9]; const obj = { a: 4, b: 5, c: 6 }； [2] for (let v in arr){ console.l...

Labradors 2019-08-23 12:01 評論0 收藏0
《ECMAScript 6 入門》讀書筆記

摘要：阮一峰老師開源作品。書上的示例代碼可以通過在線網站代碼調試工具調試。阮一峰老師開源作品。書上的示例代碼可以通過在線網站代碼調試工具 JS Bin 調試。作用域作用域鏈每個變量或函數通過執行環境 (execution context) 定義了其有權訪問的其他數據，決定了他們各自的行為；全局執行環境是最頂層的執行環境，根據宿主環境的不同，表示全局執行環境的對象也不同：在瀏覽...

qieangel2013 2019-08-20 15:21 評論0 收藏0
一次掌握 JavaScript ES5 到 ES8 數組內容

摘要：可選到該位置前停止讀取數據，默認等于數組長度。找出第一個符合條件的數組元素，參數是一個回調函數，所有數組元素依次執行該回調函數，直到找出第一個返回值為的元素，然后返回該元素?；卣{函數可以接受三個參數，依次為當前的值當前的位置和原數組。 ECMAScript 5.1 中提供的數組方法 ECMA-262/5.1 規范判斷是否是數組 Array.isArray ( arg ) // fal...

baiy 2019-08-21 17:29 評論0 收藏0
前端資源分享-只為更好前端

摘要：一團隊組織網站說明騰訊團隊騰訊前端團隊，代表作品，致力于前端技術的研究騰訊社交用戶體驗設計，簡稱，騰訊設計團隊網站騰訊用戶研究與體驗設計部百度前端研發部出品淘寶前端團隊用技術為體驗提供無限可能凹凸實驗室京東用戶體驗設計部出品奇舞團奇虎旗下前一、團隊組織網站說明騰訊 AlloyTeam 團隊騰訊Web前端團隊，代表作品WebQQ，致力于前端技術的研究 ISUX 騰...

zxhaaa 2019-08-22 16:11 評論0 收藏0