【ES6入門13】：Iterator

chnmagnus 發布于2019-08-23 12:34 / 3189人閱讀

摘要：中，操作某些數據結構時，怎么用一個統一的方法操作，接口實現了這樣的功能在數組中的應用數組內部實現了接口，所以直接調用表示數組元素，表示循環是否有下一步狀態，沒有下一步了，循環沒有結束自定義接口沒有內置接口，自定義接口，讓也可以使用聲明接口方

es6中，操作某些數據結構（array object map set）時，怎么用一個統一的方法操作，Iterator接口實現了這樣的功能

1.Iterator在數組中的應用

{
    let arr = ["hello", "world"];
    // 數組內部實現了iterator接口，所以直接調用[Symbol.iterator]()
    let map = arr[Symbol.iterator]();
    console.log(map.next()); // {value: "hello", done: false}
    console.log(map.next()); // {value: "world", done: false}
    console.log(map.next()); // {value: undefined, done: true}
    // value 表示數組元素，done表示循環是否有下一步狀態，true:沒有下一步了，false:循環沒有結束
}

2.自定義Iterator接口

{
    // object沒有內置iterator接口，自定義iterator接口，讓obj也可以使用for...of
    let obj = {
        start: [1,2,3],
        end: [4,5,6],
        // 聲明iterator接口方法
        [Symbol.iterator]() {
            // 先遍歷start，再遍歷end
            let arr = this.start.concat(this.end);
            let index = 0;
            // 返回next()
            return {
                next() {
                    if (index < arr.length) {
                        return {
                            value: arr[index++],
                            done: false
                        }
                    } else {
                        return {
                            value: arr[index++],
                            done: true
                        }
                    }
                }
            }
        }
    };
    // for...of 實現的原理就是不斷調用Iterator接口
    // 通過 for...of 驗證接口是否配置成功，如果沒有配置成功，object就無法使用 for...of循環
    for (let key of obj) {
        console.log(key); // 1 2 3 4 5 6
    }
}

3.for...of循環

{
    // 數組內部實現了iterator接口，所以可以直接使用for...of循環
    let arr = ["hello", "world"];
    for (let value of arr) {
        console.log(value); // hello world
    }
}

GPU云服務器云服務器 ES6入門 Iterator Iterator模式 ES6

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

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

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

摘要：也就是說，遍歷器對象本質上，就是一個指針對象。執行這個函數，就會返回一個遍歷器。一個對象如果要有可被循環調用的接口，就必須在的屬性上部署遍歷器生成方法原型鏈上的對象具有該方法也可。后面跟的是一個可遍歷的結構，它會調用該結構的遍歷器接口。 ES6 Iterator筆記（摘抄至阮一峰的ECMAScript 6入門） Iterator的遍歷過程創建一個指針對象，指向當前數據結構的起始位...

mayaohua 2019-08-20 18:19 評論0 收藏0
【重溫基礎】13.迭代器和生成器

摘要：迭代器和生成器將迭代的概念直接帶入核心語言，并提供一種機制來自定義循環的行為。本文主要會介紹中新增的迭代器和生成器。屬性本身是函數，是當前數據結構默認的迭代器生成函數。本文是重溫基礎系列文章的第十三篇。今日感受：每次自我年終總結，都會有各種情緒和收獲。系列目錄：【復習資料】ES6/ES7/ES8/ES9資料整理(個人整理) 【重溫基礎】1.語法和數據類型【重溫基礎】2.流...

ymyang 2019-08-23 14:32 評論0 收藏0
2017-08-13 前端日報

摘要：前端日報精選從源碼看數組排序的詭異問題顯示網格和隱式網格的區別打包工具完全入門指南使用之前要在里學的件事工作機制第部分中文深入理解中的代碼片段，你能猜對幾個掘金深入理解筆記中的類深入理解筆記迭代器和生成器最新版構建分享小王子 2017-08-13 前端日報精選從 V8 源碼看 JS 數組排序的詭異問題顯示網格和隱式網格的區別JS打包工具rollup——完全入門指南使用 Redux ...

Eastboat 2019-08-21 11:54 評論0 收藏0
ES6簡單總結（搭配簡單的講解和小案例）

摘要：方法返回一個布爾值，表示某個數組是否包含給定的值，與字符串的方法類似。不可以當作構造函數，也就是說，不可以使用命令，否則會拋出一個錯誤。本身是一個構造函數，用來生成數據結構。返回一個布爾值，表示該值是否為的成員。清除所有成員，沒有返回值。在學習es6的過程中，為了方便自己復習，以及查看，對api做了一個極簡用例介紹。如有錯誤多多指正。一 let和const 1.let (1)一個大...

joyqi 2019-08-26 11:31 評論0 收藏0