2. 程式人生 > >ES9中的非同步迭代器（Async iterator）和非同步生成器（Async generator）

ES9中的非同步迭代器（Async iterator）和非同步生成器（Async generator）

阿新 • • 發佈：2018-12-12

ES9新增了非同步迭代器（Async iterator），非同步執行語句（for...await...of）和非同步生成器（Async generator），本文帶領大家瞭解這三個新特性，以及如何建立非同步迭代器。

1. 迭代器（Iterator）

如果你還不瞭解ES6的迭代器，也就是iterator，先來看看這一部分。

iterator是一個特殊的物件，它包含一個next方法，next方法返回一個物件，這個物件包含兩個屬性，一個是value，表示成員的值，一個是done，done的值是一個布林型別，表示迭代器是否結束。

iterator.next() // 返回 {value: '', done: false}
 

複製程式碼

迭代器內部會儲存一個指標，指向迭代器的成員位置，每呼叫一次next方法，指標就會移動到下一個成員，直到指標指向迭代器最後一個成員後面的位置，這時，done的值為true，value的值一般為undefined，需要根據iterator的實際實現來決定。

1.1 建立iterator

實現一個函式，用來建立iterator。

幾個關鍵點

  • iterator是一個物件，並且含有一個next方法
  • next方法返回一個物件，包含一個value屬性和done屬性，value表示返回的值，done是一個布林型別，表示迭代器是否結束
  • iterator內部包含一個內部指標，指向迭代器的成員的位置，每呼叫一次next
    方法，指標就會移動到下一個成員，直到指標指向迭代器最後一個成員後面的位置，這時done的值為true
// 可以通過傳入陣列或者物件建立iterator
const createIterator = items => {
    const keys = Object.keys(items)
    const len = keys.length
    let pointer = 0
    return {
        next() {
            const done = pointer >= len
            const value = !done ? items[keys[pointer++]] : undefined
 

            return {
                value,
                done
            }
        }
    }
}
複製程式碼
const iterator1 = createIterator([1, 2, 3])
iterator.next() // { value: 1, done: false }
iterator.next() // { value: 2, done: false }
iterator.next() // { value: 3, done: false }
iterator.next() // { value: undefined, done: true }
複製程式碼
const iterator2 = createIterator({a: 'a', b: 'b', c: 'c'})
iterator.next() // { value: 'a', done: false }
iterator.next() // { value: 'b', done: false }
iterator.next() // { value: 'c', done: false }
iterator.next() // { value: undefined, done: true }
複製程式碼

1.2 iterator和for...of

部署了iterator介面的資料結構，也就是具有Symbol.iterator方法的資料結構，就可以被for...of遍歷。Symbol.iterator方法類似於上面實現的createIterator函式

  • 陣列原生具有iterator介面
const arr = [1, 2, 3]
typeof arr[Symbol.iterator] // 'function'

for (const val of arr) {
    console.log(val)
}
// 1
// 2
// 3
複製程式碼
  • 物件預設沒有iterator介面，但是我們可以自己部署
const obj = {a: 'a', b: 'b', c: 'c'}
typeof obj[Symbol.iterator] // 'undefined'

for (const val of obj) {
    console.log(val)
}
// TypeError: obj is not iterable
複製程式碼

給物件部署iterator介面

const obj = {a: 'a', b: 'b', c: 'c'}
obj[Symbol.iterator] = function() {
    const self = this
    const keys = Object.keys(self)
    const len = keys.length
    let pointer = 0
    return {
        next() {
            const done = pointer >= len
            const value = !done ? self[keys[pointer++]] : undefined
            return {
                value,
                done
            }
        }
    }
}
for (const val of obj) {
    console.log(val)
}
// a
// b
// c
複製程式碼

2. 生成器（Generator）

Generator是一個特殊的函式，函式體內部使用yield表示式，定義不同的內部狀態，當執行Generator函式時，不會直接執行函式體，而是會返回一個遍歷器物件（iterator）。

  • Generator函式內部可以使用yield表示式，定義內部狀態
  • function關鍵字與函式名之間有一個*
function* generator() {
    console.log('start');
    yield 1
    yield 2
    yield 3
    console.log('end')
}
const iterator = generator() // 這時函式體並沒有被執行，而是建立了一個iterator
// 當呼叫iterator的next方法時，函式體開始執行，
iterator.next() // 'start'  {value: 1, done: false}
iterator.next() // {value: 2, done: false}
iterator.next() // {value: 3, done: false}
iterator.next() // 'end'   {value: undefined, done: true}
複製程式碼
  • 每呼叫一次next方法，函式體會從函式頭部或上次停下來的地方開始執行，直到遇到下一個yield表示式或者return語句時停止
  • yield表示式後面的值會作為next方法返回的物件的value屬性值
  • return會作為iterator結束的標記，並且return的值會作為next方法返回的物件的value屬性值

改寫一下上面的例子

function* generator() {
    yield 1
    yield 2
    return 3
}
const iterator = generator()
// 當呼叫iterator的next方法時，函式體開始執行，
iterator.next() // {value: 1, done: false}
iterator.next() // {value: 2, done: false}
iterator.next() // {value: 3, done: true}
複製程式碼

Generator函式生成的iterator可以被for...of遍歷

function* generator() {
    yield 1
    yield 2
    yield 3
}

const iterator = generator()
typeof iterator[Symbol.iterator] // 'function'

for (const val of iterator) {
    console.log(val)
}
// 1
// 2
// 3
複製程式碼

在這裡我們只需要知道Generator函式會生成一個iterator就夠了，但實際上Generator函式遠不止這些，這裡我們不做詳細介紹了，感興趣的同學可以看看阮一峰Generator教程

3. 非同步迭代器（Asynchronous Iterator）

ES9新增了非同步迭代器

非同步迭代器和同步迭代器相同，都是一個函式，並且含有一個next方法，區別在於同步迭代器的next方法返回一個含有value和done屬性的物件，而非同步迭代器的next方法返回一個Promise物件，並且Promise物件的值為含有value和done屬性的物件。

// 這是一個非同步迭代器
asyncIterator.next().then(res => {
    console.log(res.value, res.done)
})
複製程式碼

我們來實現一個建立非同步迭代器的方法

const createAsyncIterator = items => {
    const keys = Object.keys(items)
    const len = keys.length
    let pointer = 0
    return {
        next() {
            const done = pointer >= len
            const value = !done ? items[keys[pointer++]] : undefined
            return Promise.resolve({
                value,
                done
            })
        }
    }
}
複製程式碼

和同步迭代器相同，每呼叫一次next方法，非同步迭代器內部的指標就移動到下一個成員

const aynscIterator = createAsyncIterator([1, 2, 3])
aynscIterator.next().then(({value, done}) => {
    console.log(value, done) // 1 false
})
aynscIterator.next().then(({value, done}) => {
    console.log(value, done) // 2 false
})
aynscIterator.next().then(({value, done}) => {
    console.log(value, done) // 3 false
})
aynscIterator.next().then(({value, done}) => {
    console.log(value, done) // undefined true
})
複製程式碼

3.1 for...await...of

for...of方法能夠遍歷具有Symbol.iterator介面的同步迭代器資料，但是不能遍歷非同步迭代器。 ES9新增的for...await...of可以用來遍歷具有Symbol.asyncIterator方法的資料結構，也就是非同步迭代器，且會等待前一個成員的狀態改變後才會遍歷到下一個成員，相當於async函式內部的await。

定義一個具有Symbol.asyncIterator方法的物件

const asyncItems = {
    a: 1,
    b: 2,
    c: 3,
    [Symbol.asyncIterator]() {
        const items = this
        const keys = Object.keys(items)
        const len = keys.length
        let pointer = 0
        return {
            next() {
                const done = pointer >= len
                const value = !done ? items[keys[pointer++]] : undefined;
                return new Promise((resolve) => {
                    setTimeout(() => {
                        resolve({value, done})
                    }, 1000)
                }) 
            }
        }
    }
}
複製程式碼

使用for...await...of遍歷該物件

// await只能用在async函式中
async function run() {
    for await (const value of asyncItems) {
        console.log(value);
    }
}
run();
// 1s後打印出 1
// 再過1s後打印出 2
// 再過1s後打印出 3
複製程式碼

上面的例子實現了每隔1s打印出物件的屬性值的非同步遍歷器介面，可以看到， 當使用for...await..of，遍歷時，會等待前一個Promise物件的狀態改變後，再遍歷到下一個成員。

3.2 非同步生成器（Async Generator）

我們可以採取一種更方便的方式建立非同步迭代器，就是利用非同步生成器。

非同步生成器和普通的生成器很像，但是其是async函式，內部可以使用await表示式，並且它返回一個具有Symbol.asyncIterator方法的物件。

定義一個非同步生成器

async function* asyncGenerator() {
    yield await Promise.resolve(1);
    yield await Promise.resolve(2);
    yield await Promise.resolve(3);
}
複製程式碼

使用for...await...of遍歷該物件

const asyncIterator = asyncGenerator()
typeof asyncIterator[Symbol.asyncIterator] // 'function'
async function run() {
    for await (const value of asyncIterator) {
        console.log(value);
    }
}
run();
// 1
// 2
// 3
複製程式碼

4. 總結

  • 非同步迭代器與同步迭代器相同的是，非同步迭代器也是一個具有next方法的物件
  • 非同步迭代器物件的next方法返回一個Promise物件，Promise物件的值為一個物件，包含一個value屬性和一個done屬性
  • for...await...of可以遍歷具有Symbol.asyncIterator方法的資料結構，並且會等待上一個成員狀態改變後再繼續執行
  • 非同步生成器（Async Generator）可以用來建立非同步迭代器，它是一個async型別的generator函式，內部可以使用await表示式等待非同步方法的執行完成，並使用for...await...of遍歷

相關推薦

ES9中的非同步迭代器（Async iterator）和非同步生成器（Async generator）

ES9新增了非同步迭代器（Async iterator），非同步執行語句（for...await...of）和非同步生成器（Async generator），本文帶領大家瞭解這三個新特性，以及如何建立非同步迭代器。 1. 迭代器（Iterator） 如果你還不瞭解ES6的迭代器，也就是iterato

【python】迭代器協議iterable iterator

from collections.abc import Iterator class Company(object): def __init__(self, employee_list): self.employee = employe

迭代器設計模式Iterator

背景：如果一個檔案在不斷的增量增加資料，如果需要增量的讀取這個檔案，則可以使用迭代器設計模式對增量的資料進行迭代遍歷。 例如：一篇文件aa.txt aaa aaa aaa aaa 則可以把這片文章分為 片段（檔案，開始，結束），段落（檔案，開始，結束） 檔案的中新增的資料需

迭代器：訪問string物件和vector物件

我們都知道可以用下標運算來訪問string物件和vector物件。而另外還有一種更通用的方法也可以實現這樣的方法。名曰：迭代器（iterator）。 類似於指標，迭代器也提供了對物件的間接訪問。就迭代器而言，其物件是容器中的元素或者string中的字元。使

JAVA設計模式之 迭代器模式【Iterator Pattern】

一、概述     提供一種方法來訪問聚合物件(容器container)，而不用暴露這個物件的內部細節。屬於物件行為型模式。 二、適用場景     1>遍歷訪問聚合物件中的元素，而無須暴露它的內容表示，將聚合物件的訪問和內部資料的儲存分離。使得訪問聚合物件時無須瞭解

JS-Javascript 迭代器設計模式 Iterator pattern

這篇博文簡短的提一下Iterator的設計模式，以及這種設計模式給我們帶來什麼樣的好處。 1.begin 為了體現面向物件的特性（近年來的ES6為這方面做了很大的努力），此篇博文的語言編寫基於typescript，當然也會附上原生js的書寫方式。 1.1迭

Java設計模式--迭代器模式【Iterator Pattern】

          在Java中，因為從JDK 1.2 版本開始增加java.util.Iterator 這個介面，並逐步把Iterator 應用到各個聚集類(Collection)中，我們來看JDK 1.5 的API 幫助檔案，你會看到有一個叫java.util.Iter

<C++學習十三>C++迭代器介紹（未完待續）

摘要: 本篇部落格僅作為筆記，如有侵權，請聯絡，立即刪除（網上找部落格學習，然後手記筆記，因紙質筆記不便儲存，所以儲存到網路筆記） 　　迭代器簡介： 　　（1）迭代器類似於指標型別，它也提供了對物件的間接訪問。 　　（2）指標是C語言中就有的東西，迭代器是C++中才有的，指標用起來靈活高效，迭代器功能更

迭代器與組合模式（轉載）

程式碼實在太多了，偷個懶轉載大佬的 https://www.cnblogs.com/lzhp/p/3427704.html 迭代器模式 提供了一種方法順序訪問一個聚合物件中的各個元素，而又不暴露內部的表示 把在元素之間遍歷的責任交給迭代器，而不是聚合物件 角色

常用軟體設計模式（六）迭代器模式

迭代器模式不常用，很多高階語言都將該模式封裝在語言中了，入C#的 foreach in 但是有必要了解一下 迭代器模式：提供一個方法順序訪問一個聚合物件中各個元素，而又不暴露該物件的內部表示。 優點： 1、它支援以不同的方式遍歷一個聚合物件。     &nb

TypeScript筆記：迭代器和生成器（八）

可迭代性 當一個物件實現了Symbol.iterator屬性時，我們認為它是可迭代的。 一些內建的型別如 Array，Map，Set，String，Int32Array，Uint32Array等都已經實現了各自的Symbol.iterator。 物件上的Symbol.it

python3：迭代物件和迭代器的區別 （翻看原始碼進行解釋）

迭代器和生成器都是很重要的知識，因為在後邊的同步非同步都要用到. python的迭代協議構成了迭代器. 迭代器是訪問集合內元素的一種方式，一般用來遍歷資料. 要記住 迭代器和 下標的訪問方式不一樣，迭代器沒有返回值，它取值的方式就是用next(). 迭代器提供了一種惰性訪

重走Java設計模式——迭代器模式（Iterator Pattern）

迭代器模式 定義 提供一種方法順序訪問一個聚合物件中各個元素, 而又無須暴露該物件的內部表示。 模式結構 1.抽象容器：一般是一個介面，提供一個iterator()方法，例如java中的Collection介面，List介面，Set介面等。 2.具體

python3.5進階（三）-------------實現多工之協程（生成器，迭代器）

1.迭代器：迭代是訪問集合元素的一種方式，迭代器是可以記住遍歷的位置的物件，迭代器物件從集合的第一個元素開始訪問，直到所有訪問結束，迭代器只能前進不能後退。判斷一個數據型別是否可以迭代，看是否能for迴圈。如（字串，列表，元祖...）序列可以迭代，數字不能迭代，或通過isintance([11,12

c++迭代器（iterator）詳解【轉】

（轉自：https://www.cnblogs.com/hdk1993/p/4419779.html） 1. 迭代器(iterator)是一中檢查容器內元素並遍歷元素的資料型別。 (1) 每種容器型別都定義了自己的迭代器型別，如vector: vector<int>::it

生成器（自身就是一個迭代器）

對於python中兩種延遲生成值的結構： 生成器函式 生成器表示式 我相信生成器函式各位都是不陌生的，就是在函式返回值前用yield,但是注意一點，這裡我並沒有說用yield代替return，兩個意義其實是不同的，所以不存在代替的問題，兩者可以共存。 例如：

python初學一（迭代器）

一、迭代器的基本知識：       1、迭代器的建立：               （1）系統函式iter（）           &nb

設計模式是什麼鬼（迭代器）講得形象化，圖形加助理解和記憶

文章出處：https://www.javazhiyin.com/tag/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F 作者：凸凹裡歐         方法迭代：代的更迭，從初代到末代的遍歷，指對某類集合中的每個元素按順序取出

SGISTL原始碼閱讀六 迭代器下（traits程式設計技法）

SGISTL原始碼閱讀六 迭代器下（traits程式設計技法） 前言 上一篇部落格我們瞭解了迭代器的相應型別，簡單的引數推導機制可以實現針對不同的型別進行不同的操作，但是這並不能解決所有的情況。本文章將要介紹_STL原始碼門鑰_——traits程式設計技法。 凡是原生指標，都沒有

SGISTL原始碼閱讀五 迭代器上（迭代器的五種相應型別associated types）

SGISTL原始碼閱讀五 迭代器上（迭代器的五種相應型別associated types） 前言 之前在對STL的簡介中說到過，迭代器的作用是將資料結構（容器）和演算法粘合在一起，我們可以將它理解成smart pointer，它是一種行為類似指標的物件。 什麼是相應型別？ 最