ES6 迭代協議

sunny5541 發布于2019-08-26 11:35 / 1222人閱讀

摘要：迭代協議可迭代協議和迭代器協議是對的補充，不是新的內置或語法，僅僅是協議。迭代器協議例子簡單迭代器生成器再談生成器從上面的示例可以看出，是比較特殊的，既是一個生成器對象，又是一個可迭代對象文章若有紕漏，歡迎大家提問交流參考

迭代協議

可迭代協議（The iterable protocol）和迭代器協議（The iterator protocol）是對 ECMAScript 2015 的補充，不是新的內置或語法，僅僅是協議?？梢员蝗魏巫裱承┘s定的對象來實現。

可迭代協議

可迭代協議允許 JavaScript 對象去定義或者定制它們的迭代行為。

一些內置類型是可迭代，例如 Array，TypeArray，Map，Set，String,在 for...of 結構中可以循環遍歷值，而 Object 就不是。

為了變成可迭代對象，一個對象必須實現 @@iterator 方法, 意思是這個對象（或者它原型鏈 prototype chain 上的某個對象）必須有一個名字是 Symbol.iterator 的屬性:

Property	Value
[Symbol.iterator]	無參函數，該函數返回一個對象，該對象符合迭代器協議

迭代器協議

迭代器協議定義了一種標準的方式來產生有限或無限序列的值

當一個對象實現了 next() 方法，并且符合如下定義，則該對象就是一個迭代器對象。

屬性	值
next	一個無參函數，返回一個對象，該對象擁有兩個屬性 done 和 value

done(boolean)

如果迭代器已經到了迭代序列的末尾，done 為 false

如果迭代器還可以產生序列下一個值，done 為 true

value

迭代器返回的任何 JavaScript 值，當 done 為 true，可忽略。

next 方法必須是返回包含 done 和 value 屬性的對象，如果非對象（類如 false, undefined）返回，將會拋出 TypeError

例子 可迭代協議例子

自定義一個可迭代對象

const iterableObj = {}
iterableObj[Symbol.iterator] = function* () {
    yield 1
    yield 2
    yield 3
}
console.log([...iterableObj])

接受可迭代對象的內置 APIs

許多 APIs 接受可迭代對象作為參數，例如 Map([iterable])，WeakMap([iterable])，Set([iterable])，WeakSet([iterable])

const myObj = {}
new Map([[1, "a"], [2, "b"], [3, "c"]]).get(2)               // "b"
new WeakMap([[{}, "a"], [myObj, "b"], [{}, "c"]]).get(myObj) // "b"
new Set([1, 2, 3]).has(3)                                    // true
new Set("123").has("2")                                      // true
new WeakSet(function* () {
    yield {}
    yield myObj
    yield {}
}()).has(myObj)                                              // true

用于可迭代對象的語法

一些語句或者表達式可用于可迭代對象，例如 for...of 循環，spread operator，yield*，destructuring assignment。

// for...of
for (let i of [1, 2, 4]) {
    console.log(i)
    // 1
    // 2
    // 4
}

// spread operator
console.log([..."abc"]) // ["a", "b", "c"]

// yield*
function* gen() {
    yield* ["a", "b", "c"]
}
console.log(gen().next()) // {value: "a", done: false}

// destructuring assignment
[a, b] = new Set(["a", "b"])
console.log(a) // a

迭代器協議例子

簡單迭代器

function makeIterator(array) {
    let nextIndex = 0
    return {
        next() {
            return nextIndex < array.length ? { value: array[nextIndex++], done: false } : { done: true }
        }
    }
}

const it = makeIterator(["a", "b"])

console.log(it.next()) // {value: "a", done: false}
console.log(it.next()) // {value: "a", done: false}
console.log(it.next()) // {done: true}

生成器

function* makeSimpleGenerator(arr) {
    let nextIndex = 0
    while (nextIndex < array.length) {
        yield array[nextIndex++]
    }
}

const it = makeSimpleGenerator(["a", "b"])

console.log(it.next()) // {value: "a", done: false}
console.log(it.next()) // {value: "a", done: false}
console.log(it.next()) // {value: undefined, done: true}

ES6 class

class SimpleIterator {
    constructor(data) {
        this.data = data
        this.index = 0
    }

    [Symbol.iterator]() {
        return {
            next: () => {
                return this.index < this.data.length ? { value: this.data[this.index++], done: false } : { done: true }
            }
        }
    }
}

const simple = new SimpleIterator([1, 3, 9])

for (let i of simple){
    console.log(i) // 1 3 9
}

再談生成器 generator

從上面的示例可以看出，generator 是比較特殊的，generator 既是一個生成器對象，又是一個可迭代對象！

const generatorObj = function* () {
    yield 1
    yield 2
    yield 3
}()

console.log(typeof generatorObj.next) // function

console.log(typeof generatorObj[Symbol.iterator]) // function

console.log(generatorObj[Symbol.iterator]() === generatorObj) // true

文章若有紕漏，歡迎大家提問交流！

參考

MDN: Iteration protocols

GPU云服務器云服務器 ES6 es6-系列 ES6入門 es6 js

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

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

ES6語法之可迭代協議和迭代器協議

摘要：有兩個協議可迭代協議和迭代器協議。為了變成可迭代對象，一個對象必須實現或者它原型鏈的某個對象必須有一個名字是的屬性迭代器協議該迭代器協議定義了一種標準的方式來產生一個有限或無限序列的值。 ECMAScript 2015的幾個補充，并不是新的內置或語法，而是協議。這些協議可以被任何遵循某些約定的對象來實現。有兩個協議：可迭代協議和迭代器協議。可迭代協議可迭代協議允許 JavaScri...

sarva 2019-08-22 11:23 評論0 收藏0
ES6學習（二）之解構賦值及其原理

摘要：基本原理解構是提供的語法糖，其實內在是針對可迭代對象的接口，通過遍歷器按順序獲取對應的值進行賦值。屬性值返回一個對象的無參函數，被返回對象符合迭代器協議。迭代器協議定義了標準的方式來產生一個有限或無限序列值。更多系列文章請看 1、基本語法 1.1、數組 // 基礎類型解構 let [a, b, c] = [1, 2, 3] console.log(a, b, c) // 1, 2, ...

chunquedong 2019-08-23 16:19 評論0 收藏0
從forEach到迭代器

摘要：本文從使用對數組進行遍歷開始說起，粗略對比使用進行遍歷的差異，并由此引入中可迭代對象迭代器的概念，并對其進行粗略介紹。說到這里，就繼續說一下迭代器關閉的情況了。確實，符合可迭代協議和迭代器協議的。本文從使用 forEach 對數組進行遍歷開始說起，粗略對比使用 forEach , for...in , for...of 進行遍歷的差異，并由此引入 ES6 中可迭代對象/迭代器的概...

rockswang 2019-08-23 12:36 評論0 收藏0
從迭代器模式到迭代協議

摘要：迭代器模式迭代器模式是指提供一種方法順序訪問一個聚合對象中的各個元素，而不需要暴露該對象的內部表示?？傻鷧f議和迭代器協議。生成器函數是可以作為迭代器工廠的函數，當它被執行時會返回一個新的對象，該對象符合可迭代協議和迭代器協議。迭代器模式迭代器模式是指提供一種方法順序訪問一個聚合對象中的各個元素，而不需要暴露該對象的內部表示。迭代器分為內部迭代器和外部迭代器。內部迭代器只需一次初...

doodlewind 2019-08-23 16:10 評論0 收藏0
ES6的Iterator對象詳解

摘要：實現原理創建一個指針對象，指向當前數據結構的起始位置。也就是說，遍歷器對象本質上，就是一個指針對象。具體來說，就是返回一個包含和兩個屬性的對象。接口部署在對象的屬性上可以調用這個屬性，就得到遍歷器對象。 Iterator實現原理創建一個指針對象，指向當前數據結構的起始位置。也就是說，遍歷器對象本質上，就是一個指針對象。第一次調用指針對象的next方法，可以將指針指向數據結構的第一...

KoreyLee 2019-08-19 18:34 評論0 收藏0

發表評論

登陸后可評論

0條評論

sunny5541

男|高級講師

我要關注我要私信

TA的文章

阿里程序員：螺絲釘的工作，撕逼的氛圍，末位淘汰的壓力

閱讀 3464·2021-11-18 10:02
CloudServer：$4/月KVM-2GB/50GB/5TB/三個數據中心

閱讀 3707·2021-09-13 10:25
騰訊云秒殺最好的機器整理,云服務器低至299元/3年,2核4G/4核8G僅948元/3年起

閱讀 1920·2021-07-26 23:38
react開發vscode插件推薦

閱讀 2568·2019-08-30 15:44
【響應式布局】理解設備像素、設備獨立像素和css像素

閱讀 2267·2019-08-30 13:51
ES6 迭代協議

閱讀 1223·2019-08-26 11:35
徹底理清前端單頁面應用（SPA）的實現原理【精讀源碼】

閱讀 2273·2019-08-26 10:29
讓前端面試不在難（常見算法一）

閱讀 3444·2019-08-23 14:56

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

ES6 迭代協議

自定義一個可迭代對象

接受可迭代對象的內置 APIs

用于可迭代對象的語法

簡單迭代器

生成器

ES6 class

相關文章

ES6語法之可迭代協議和迭代器協議

ES6學習（二）之解構賦值及其原理

從forEach到迭代器

從迭代器模式到迭代協議

ES6的Iterator對象詳解

發表評論

0條評論

sunny5541

男|高級講師

TA的文章

阿里程序員：螺絲釘的工作，撕逼的氛圍，末位淘汰的壓力

CloudServer：$4/月KVM-2GB/50GB/5TB/三個數據中心

騰訊云秒殺最好的機器整理,云服務器低至299元/3年,2核4G/4核8G僅948元/3年起

react開發vscode插件推薦

【響應式布局】理解設備像素、設備獨立像素和css像素