4. 迭代器与生成器-CSDN博客

本文链接：https://blog.csdn.net/m0_69843492/article/details/140478649

"迭代" 的意思是按照顺序反复多次执行一段程序，通常会有明确的终止条件
ECMAScript6 规范新增了两个高级特性：迭代器和生成器（能够更清晰，高效，方便地实现迭代）

理解迭代

JS 中，计数循环就是一种最简单的迭代

for (let i = 1; i <= 10; ++i) {
    console.log(i)
}

循环是迭代机制的基础（因为它可以指定迭代次数，以及每次迭代要执行什么操作），每次迭代的顺序都是实现定义好的

let collection = ['foo', 'bar', 'baz'];

for (let index = 0; index < collection.length; ++index) {
    console.log(collection[index]);
}

Array.prototype.forEach()

向通用迭代需求迈进了一步，但并不理想

let collection = ['foo', 'bar', 'baz'];

collection.forEach(function (item) {
    console.log(item)
})

解决了单独记录索引和通过数组对象取得值得问题，但没有办法标识迭代何时终止。
因此这个方法只适用于数组，且回调结构

迭代器模式

可迭代对象是一种抽象得说法。
可以把可迭代对象理解成数组或集合这样的集合类型的对象。
它们包含的元素都是有限的，而且都具有无歧义的遍历顺序

// 数组的元素都是有限的
// 递增索引可以按顺序访问每个元素

let arr = [3, 1, 4];

// 集合的元素是有限的
// 可以按插入顺序访问每个元素
let set = new Set().add(3).add(1).add(4)

计数循环和数组都具有可迭代对象的行为

可迭代协议

实现 Iterable 接口（可迭代协议）要求同时具备两种能力：
  - 支持迭代的自我识别能力
  - 创建实现 Iterator 接口的对象的能力

意味着必须暴露一个属性作为“默认迭代器”，而且这个属性必须使用特殊的 Symbol.iterator 作为键
这个默认迭代器属性必须引用一个迭代器工厂函数，调用这个工厂函数必须返回一个新迭代器
 
 很多内置类型都实现了 Iterable 接口：
   - 字符串
   - 数组
   - 映射
   - 集合
   - argument 对象
   - NodeList 等 DOM 集合类型

检查是否存在默认迭代器属性可以暴露这个工厂函数

let num = 1;
let obj = {};
// 这两种类型没有实现迭代器工厂函数
console.log(num[Symbol.iterator])
console.log(obj[Symbol.iterator])

let str = 'abc';
console.log(str[Symbol.iterator]);

let arr = [];
console.log(arr[Symbol.iterator]);

let map = new Map();
console.log(map[Symbol.iterator]);

let set = new Set();
console.log(set[Symbol.iterator])

let els = document.querySelectorAll('div')
consle.log(els[Symbol.iterator])

写代码过程中，不需要显式调用这个工厂函数来生成迭代器
接收可迭代对象的原生语言特性包括：
  - for-of 循环
  - 数组解构
  - 扩展操作符
  - Array.from()
  - 创建集合
  - 创建映射
  - Promise.all() 接收由期约组成的可迭代对象
  - Promise.race() 接收由期约组成的可迭代对象
  - yield*操作符，在生成器中使用

let arr = ['foo', 'bar', 'baz'];


// for-of 循环
for (let el of arr) {
    console.log('for(let el of arr):  ', el)
}
console.log('==============================')


// 数组解构
let [a, b, c] = arr
console.log('let [a, b , c] = arr:  ', a, b, c);
console.log('==============================')


// 扩展操作符
let arr2 = [...arr];
console.log('let arr2 = [...arr]:  ', arr2)
console.log('==============================')


// Array.from()
let arr3 = Array.from(arr);
console.log('let arr3 = Array.from(arr):  ', arr3)
console.log('==============================')


// Set 构造函数
let set = new Set(arr);
console.log('let set = new Set(arr):  ', set)
console.log('==============================')


// map 构造函数
let pairs = arr.map((x, i) => [x, i])
console.log('arr.map((x, i) => [x, i]):  ', pairs)
console.log('==============================')
let map = new Map(pairs);
console.log('let map = new Map(pairs):  ', map)
console.log('==============================')

// 如果对象原型链上的父类实现了 iterable 接口，那这个对象也就实现了这个接口
class FooArray extends Array { }
let fooArr = new FooArray('foo', 'bar', 'baz');

for (let el of fooArr){
    console.log('el:  ', el)
}

迭代器协议

迭代器是一种一次性使用的对象，用于迭代与其关联的可迭代对象
迭代器API使用 next() 方法，都会返回一个 IteratorResult 对象，其中包含的迭代器返回的下一个值。
若不调用 next()，则无法知道迭代器的当前位置

next() 方法返回迭代器对象 IteratorResult 包含两个属性:
  - don：布尔值，标识是否还可以再次调用 next() 取得下一个值（false 表示未耗尽，true 表示已耗尽）
  - value：包含可迭代对象的下一个值

// 可迭代对象
let arr = ['foo', 'bar'];

// 迭代器工厂函数
console.log('arr[Symbol.iterator] 迭代器工厂函数:  ', arr[Symbol.iterator])

// 迭代器
let iter = arr[Symbol.iterator]();
console.log(iter)
console.log('arr[Symbol.iterator]():  ', iter)
console.log('==============================')

// 执行迭代
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())  // 只要迭代器到达 done: true状态，后续调用 next() 就一直返回同样的值了
console.log('==============================')


// 不同迭代器实例相互之间没有联系，只会独立地遍历可迭代对象
let iter2 = arr[Symbol.iterator]()
// 执行迭代
console.log(iter2.next())
console.log(iter2.next())
console.log(iter2.next())  // 只要迭代器到达 done: true状态，后续调用 next() 就一直返回同样的值了
console.log('==============================')

迭代器不与可迭代对象某个时刻的快照绑定，而仅仅是使用游标来记录遍历可迭代对象的历程

如果可迭代对象在迭代期间被修改了，那么迭代器也会反映相应的变化

// 可迭代对象
let arr = ['foo', 'baz'];
// 迭代器
let iter = arr[Symbol.iterator]();
// 在数组中间插入值
arr.splice(1, 0, 'bar')

// 执行迭代
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())  // 只要迭代器到达 done: true状态，后续调用 next() 就一直返回同样的值了
console.log('==============================')

迭代器维护着一个指向可迭代对象的引用，因此迭代器会阻止垃圾回收可迭代对象

显式的迭代器实现与原生的迭代器实现

// 这个累实现了可迭代接口（Iterable）
// 调用默认的迭代器工厂函数会返回
// 一个实现迭代器接口（Iterator）的迭代器对象
class Foo {
    [Symbol.iterator]() {
        return {
            next() {
                return {done: false, value: 'foo'}
            }
        }
    }
}
let foo = new Foo()
// 打印出实现了迭代器接口的对象
console.log(foo[Symbol.iterator]());

自定义迭代器

任何实现 Iterator 接口的对象都可以作为迭代器使用

class Counter {
    // counter 的实例应该迭代 limit 次
    constructor(limit) {
        this.count = 1;
        this.limit = limit;
    }

    // 重写 next 方法
    next() {
        if (this.count <= this.limit) {
            return {done: false, value: this.count++};
        } else {
            return {done: true, value: undefined};
        }

    }

    [Symbol.iterator]() {
        return this;
    }
}

let counter = new Counter(3);

for (let i of counter){
    console.log('第一次 for (let i of counter):  ',i)
}
// 这个类实现了 Iterator 接口，但不理想，这是因为它的每个实例只能被迭代一次
for (let i of counter){
    console.log('第二次 for (let i of counter):  ', i)
}

实现一个迭代器对象能够创建多个迭代器

// 每创建一个迭代器就对应一个新的计数器
// 把计数器变量放到闭包里，通过闭包返回迭代器
class Counter {
    constructor(limit) {
        this.limit = limit;
    }

    [Symbol.iterator]() {
        let count = 1,
            limit = this.limit;
        return {
            next() {
                if (count <= limit) {
                    return {done: false, value: count++};
                } else {
                    return {done: true, value: undefined};
                }
            }
        }
    }
}

let counter = new Counter(3);

for (let i of counter){ console.log('1. for (let i of counter):  ', i)}
console.log('===================================')
for (let i of counter){ console.log('2. for (let i of counter):  ', i)}

每个以这种方式创建的迭代器也实现了 Iterable 接口
Symbol.iterator 属性引用的工厂函数会返回相同的迭代器

let arr = ['foo', 'bar', 'baz'];
let iter1 = arr[Symbol.iterator]()

console.log(iter1[Symbol.iterator]);  // f vlaues() { [native code] }

let iter2 = iter1[Symbol.iterator]();
console.log(iter1 === iter2);  // true

// 因为每个迭代器也实现了 Iterable 接口，所以它们可以用在任何期待可迭代对象的地方
// for-of 循环
let arr = [3, 1, 4];
let iter1 = arr[Symbol.iterator]();

for (let item of arr) { console.log(item) }
console.log('==============================')
for (let item of arr) { console.log(item) }

提前终止迭代器

可选的 return() 方法用于指定在迭代器提前关闭时执行的逻辑
执行迭代的结构在想让迭代器直到它不像遍历到可迭代对象耗尽时，就可以 "关闭" 迭代器。
  - for-of 循环通过 break, continue, return 或 throw 提前退出
  - 解构操作并未消费所有值。

class Counter {
    constructor(limit) {
        this.limit = limit;
    };

    [Symbol.iterator]() {
        let count = 1,
            limit = this.limit;

        return {
            next() {
                if (count <= limit) {
                    return {dont: false, value: count++};
                } else {
                    return {dont: true};
                }
            },
            return() {
                console.log('Exiting early');
                return {done: true};
            }
        }
    }
}

let counter1 = new Counter(5);
for (let i of counter1) {
    if (i > 2) {
        break;
    }
    console.log(i)
}
console.log('====================')



let counter2 = new Counter(5);
try {
    for (let i of counter2) {
        if (i > 2) {
            throw 'err';
        }
        console.log(i)
    }
} catch (e) {
}
console.log('====================')


let counter3 = new Counter(5)
let [a, b] = counter3  // Exiting early
console.log('====================')

如果迭代器没有关闭，，则还可以继续从上次离开的地方继续迭代

let a = [1, 2, 3, 4, 5];
let iter = a[Symbol.iterator]();

for (let i of iter) {
    console.log(i);
    if (i > 2) {
        break;
    }
}
console.log('====================')
for (let i of iter){
    console.log(i)
}

return() 方法是可选的，并非所有迭代器都是可关闭的

// 要知道某个迭代器是否可关闭，可以测试这个迭代器实例的 return 属性是不是函数对象
// 仅仅给一个不可关闭的迭代器增加这个方法并不能让它变成可关闭的
// 因为调用 return() 不会强制迭代器进入关闭状态。（即便如此，return() 方法还是会被调用）
let a = [1, 2, 3, 4, 5];
let iter = a[Symbol.iterator]();

iter.return = function () {
    console.log('Exiting early');
    return {done: true};
};

for (let i of iter) {
    console.log(i)
    if (i > 2) {
        break
    }
}
// 提前退出
for (let i of iter) {
    console.log(i)
}

生成器

函数名称前面加一个星号 “*” 表示它是一个生成器（只要是可以定义函数的地方，就可以定义生成器）

// 生成器函数声明
function* generatorFn() {}

// 生成器函数表达式
let generatorFn = function* (){}

// 作为对象字面量方法的生成器函数
let foo = {
    * generatorFn(){}
}

// 作为类实例方法的生成器函数
class Foo{
    * generatorFn(){}
}

// 作为类静态方法的生成器函数
class Bar {
    static * generator(){}
}

// 箭头函数不能用来定义生成器函数（标识生成器函数的星号不受两侧空格的影响）
function* generatorFnA() {}
function *generatorFnA() {}
function * generatorFna(){}

// 等价的生成器方法
class Foo{
    *generatorFnD(){}
    * generatorFnD(){}
    
}

调用生成器函数会产生一个“生成器对象”

生成器对象一开始处于暂停执行（suspended）的状态
与迭代器相似，生成器对象也实现了 Iteration 接口，因此具有 next() 防范
调用这个方法会让生成器开始或回复执行。

function* generatorFn() {}
const g = generatorFn();
console.log(g);
console.log(g.next)

value 属性时生成器函数的返回值，默认值为 undefined，可以通过生成器函数返回值指定

function * generatorFn(){}

let generatorObject1 = generatorFn();
console.log('generatorFn():  ', generatorObject1);  // Object [Generator] {}
console.log('generatorFn().next():  ', generatorObject1.next());  // { value: undefined, done: true }
console.log('====================')

生成器函数只会在初次调用 next() 方法后开始执行，如何所示：

function* generatorFn(){
    console.log('foobar');
}

// 初次调用生成器函数并不会打印日志
let generatorObject2 = generatorFn();
generatorObject2.next()
console.log('====================')
// 生成器对象实现了 Iterable 接口，它们默认的迭代器时子引用的
function *generatorFn(){}
console.log(generatorFn)
console.log(generatorFn()[Symbol.iterator]);
console.log(generatorFn());
console.log(generatorFn()[Symbol.iterator]())

const g = generatorFn();
console.log(g === g[Symbol.iterator]())

通过 yield 中断执行

yield 关键字可以让生成器停止和开始执行，也是生成器最有用的地方。
生成器函数在遇到 yield 关键字之前会正常执行。
遇到这个关键字后，执行会停止，函数
执行会停止，函数作用域的状态会被保留。
停止执行的生成器函数只能通过在生成器对象上调用 next() 方法来回复执行

function* generatorFn(){
    yield 'foo';
    yield 'bar';
    return 'baz';
}

let generatorObject1 = generatorFn();
let generatorObject2 = generatorFn();

console.log(generatorObject1.next());
console.log(generatorObject2.next());
console.log('===========================')
console.log(generatorObject1.next());
console.log(generatorObject2.next());

yield 关键字只能在生成器函数内部使用，用在其他地方会抛出错误。

类似函数的 return 关键字，yield 关键字必须直接位于生成器函数定义中，出现在嵌套的非生成器函数中会抛出语法错误

// 有效
function* validGeneratorFn() {
    yield;
}


// 无效
function* invalidGeneratorFnA() {
    function a() {
        yield;
    }
}


// 无效
function* invalidGeneratorFnB() {
    const b = () => {
        yield;
    }
}


// 无效
function* invalidGeneratorFnC() {
    (() => {
        yield;
    })();
}

生成器对象作为可迭代对象

在生成器对象上显式调用 next() 方法的用处并不大

如果把生成器对象当成可迭代对象，那么使用起来会更方便

function* generatorFn() {
    yield 1;
    yield 2;
    yield 3;
}

for (const x of generatorFn()) {
    console.log(x)
}

// 在需要自定义迭代对象时，这样使用生成器对象会特别有用
// 例如：我们需要定义一个可迭代对象，这个迭代器会执行指定的次数。
// 使用生成器，可以通过一个简单的循环来实现
function* nTimes(n) {
    while(n--){
        yield;
    }
}

for (let _ of nTimes(3)){
    console.log( nTimes(3))
}
// 传给生成器的函数可以控制迭代循环的次数
// 在 n 为 0 时，while 条件为假，循环退出，生成器函数返回

使用 yield 实现输入和输出

除了可以作为函数中间的返回语句使用
yield 关键字还可以作为函数的中间参数使用。
  - 上一次让生成器函数暂停的 yield 关键字会接收到传给 next() 方法的第一个值
    - 第一次调用 next() 传入的值不会被使用，因为这一次调用时为了开始执行生成器函数

function* generatorFn(initial) {
    console.log(initial)
    console.log(yield)
    console.log(yield )
}

let generatorObject = generatorFn('foo');
generatorObject.next('bar');  // foo
generatorObject.next('baz');  // baz
generatorObject.next('qux');  // qux

yield 关键字可以同时用于输入和输出

function* generatorFn(){
    return yield 'foo';
}

let generatorObject = generatorFn();
console.log(generatorObject.next())
console.log(generatorObject.next('bar'))

yield 关键字并非只能使用一次

function* generatorFn(){
    for (let i = 0;; i++){
        yield i
    }
}

let generatorObject = generatorFn();
console.log(generatorObject.next().value)
console.log(generatorObject.next().value)
console.log(generatorObject.next().value)
console.log(generatorObject.next().value)
console.log(generatorObject.next().value)
console.log(generatorObject.next().value)

产生可迭代对象

可以使用星号增强 yield 的行为，让它能够迭代一个可迭代对象，从而一次产出一个值

// 等价的 generatorFn
// function* generatorFn() {
//     for (const x of [1, 2, 3]) {
//         yield x
//     }
// }

function* generatorFn() {
    yield* [1, 2, 3];
}

let generatorObject = generatorFn();

for (const x of generatorFn()) {
    console.log(x)
}
console.log('====================')


// 与生成器函数的星号类似：yield 星号两侧的空格不影响其行为
function* generatorFn() {
    yield* [1, 2];
    yield* [3, 4];
    yield* [5, 6];
}

for (const x of generatorFn()) {
    console.log(x)
}

yield* 实际上只是将一个可迭代对象序列化为一连串可以单独产出的值，这跟把 yield 放到一个循环里没什么不同

// 这两个生成器函数的行为时等价的
function* generatorFnA() {
    for (const x of [1, 2, 3]) {
        yield x;
    }
}

for (const x of generatorFnA()) {
    console.log(x);
}
console.log('==============================')

function* generatorFnB() {
    yield* [1, 2, 3];
}
for (const x of generatorFnB()){
    console.log(x);
}

yield* 的值是关联迭代器返回的 done: true 时的 value 属性

对于普通迭代器来说，这个值是 undefined

function* generatorFn(){
    console.log('iter value:  ', yield* [1, 2, 3]);
}

for (const x of generatorFn()){
    console.log("value:  ", x)
}

对于生成器函数产生的迭代器来说，这个值是生成器函数返回的值

function* innerGeneratorFn(){
    yield 'foo';
    return 'bar';
}

function *outerGeneratorFn(genObj){
    console.log('iter value: ', yield* innerGeneratorFn())
}

for (const x of outerGeneratorFn()){
    console.log('value: ', x)
}

使用 yield* 实现递归算法

yield 最有用的地方是实现递归操作，此时生成器可以产生自身

function* nTimes(n) {
    if (n > 0) {
        yield* nTimes(n - 1);
        yield n - 1
    }
}

for (const x of nTimes(3)){
    console.log(x)
}

生成器作为默认迭代器

class Foo {
    constructor() {
        this.values = [1, 2, 3];
    }

    * [Symbol.iterator]() {
        yield* this.values
    }
}

const f = new Foo();
for (const x of f){
    console.log(x);
}

提前终止生成器

生成器也支持 ”可关闭“ 的概念

实现 Iterator 接口的对象一定有 next() 方法，还有一个可选的 return() 方法用于提前终止迭代器

生成器对象除了有这两个方法，还有第三个方法: throw()

function* generatorFn(){}

const g = generatorFn();

console.log(g);
console.log(g.next)
console.log(g.return)
console.log(g.throw)

return 和 throw 都可以用于强制生成器进入关闭状态

returun()

return() 方法会强制生成器进入关闭状态。提供给 return() 方法的值，就是终止迭代器对象的值

function *generatorFn(){
    for (const x of [1, 2, 3]){
        yield x;
    }
}

const g = generatorFn();
console.log(g);  // generatorFn {<suspended>}
console.log(g.return(4));  // {value: 4, done: true}
console.log(g);  // generatorFn {<closed>}

所有生成器对象都有 return() 方法，只要通过它进入关闭状态，就无法回复了。

后续调用 next()，done的状态会为 true，而提供的任何返回值都不会被存储或传播

function *generatorFn(){
    for (const x of [1, 2, 3]){
        yield x;
    }
}

const g = generatorFn();
console.log(g.next());
console.log(g.return(4));
console.log(g.next());
console.log(g.next());
console.log(g.next());
console.log(g.next());

for-of 循环等内置语言结构会忽略状态为 done: true 的 IteratorObject 内部返回的值

function* generatorFn() {
    for (const x of [1, 2, 3]) {
        yield x;
    }
}

const g = generatorFn();
for (const x of g) {
    if (x > 1) {
        g.return(4);
    }
    console.log(x);
}

throw()

throw() 方法会在暂停的时候将一个提供的错误注入到生成器对象中

如错误未被处理，生成器就会关闭

function* generatorFn() {
    for (const x of [1, 2, 3]) {
        try{
            yield x;
        } catch(e){}
    }
}
const g = generatorFn();
console.log(g.next());
g.throw('foo');
console.log(g.next());