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

mayaohua 發(fā)布于2019-08-20 18:19 / 1161人閱讀

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

Iterator的遍歷過程

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

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

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

不斷調用指針對象的next方法，直到它指向數(shù)據(jù)結構的結束位置。

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

數(shù)據(jù)結構的默認Iterator接口

在ES6中，有些數(shù)據(jù)結構原生具備Iterator接口（比如數(shù)組），即不用任何處理，就可以被for...of循環(huán)遍歷，有些就不行（比如對象）。原因在于，這些數(shù)據(jù)結構原生部署了Symbol.iterator屬性，另外一些數(shù)據(jù)結構沒有。凡是部署了Symbol.iterator屬性的數(shù)據(jù)結構，就稱為部署了遍歷器接口。調用這個接口，就會返回一個遍歷器對象。

Symbol.iterator屬性本身是一個函數(shù)，就是當前數(shù)據(jù)結構默認的遍歷器生成函數(shù)。執(zhí)行這個函數(shù)，就會返回一個遍歷器。

一個對象（Object）如果要有可被for...of循環(huán)調用的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接口的場合

解析賦值

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

擴展運算符

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

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

yield*

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

其他場合

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

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

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

轉載請注明本文地址：http://systransis.cn/yun/84345.html

JS學習筆記 - 模塊化

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

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

摘要：但也可用于數(shù)組遍歷，返回的值是數(shù)組的索引，因為，嚴格來說，數(shù)組也是一個對象，所對應的屬性是每個值的索引。只遍歷對象自身的和繼承的可枚舉的屬性摘自阮一峰入門對象擴展一章。為新增遍歷方法。 [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 調試。作用域作用域鏈每個變量或函數(shù)通過執(zhí)行環(huán)境 (execution context) 定義了其有權訪問的其他數(shù)據(jù)，決定了他們各自的行為；全局執(zhí)行環(huán)境是最頂層的執(zhí)行環(huán)境，根據(jù)宿主環(huán)境的不同，表示全局執(zhí)行環(huán)境的對象也不同：在瀏覽...

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

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

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

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

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