JS学习笔记（六）迭代器与生成器

JS学习笔记（六）迭代器与生成器

一、迭代器模式

       迭代器模式描述了一个方案：可以把有些结构成为“可迭代对象”，因为他们实现了真是的Iterable接口，且可以通过迭代器Iterator消费。

       迭代器是按需创建的一次性对象。每个迭代器都会关联一个可迭代对象，而迭代器会暴露迭代其关联可迭代对象的API
 

1.1 可迭代协议

1.1.1 实现Iterable接口需要的能力

• 支持迭代的自我识别能力
• 创建实现Iterator接口的对象的能力

必须暴露一个属性作为“默认迭代器”，该属性必须使用特殊的Symbol.iterator作为键

 

1.1.2 实现Iterator接口的内置类型

• 字符串
• 数组
• 映射
• 集合
• arguments 对象
• NodeList 等DOM集合类型

 

1.1.3 接收可迭代对象的原生语言特性

• for-of循环
• 数组解构
• 扩展操作符（…）
• Array.from()
• 创建集合
• 创建映射
• Promise.all()接收由期约组成的可迭代对象
• Promise.race()接收由期约组成的可迭代对象
• yield*操作符，在生成器中使用

若对象原型链上的父类实现了Iterator接口，那该对象也实现了该接口。

 

1.2 迭代器协议

       迭代器是一种一次性使用的对象，用于迭代与其关联的可迭代对象。迭代器API使用next（）方法在可迭代对象中遍历数据。每次调用成功都会返回一个IteratorResult对象，其中包含迭代器返回的下一个值。若不调用next（），则无法知道迭代器的当前位置。

IteratorResult对象包含两个属性：done 和 value

• **done：**布尔值，表示是否还可以再次调用next（）取得下一个值
• **value：**包含可迭代对象的下一个值（done为false）或者undefined（done为true）

let arr = ['foo','bar'];
let iter = arr[Symbol.iterator]();
console.log(iter.next()); //{ done:false,value:'foo'}
console.log(iter.next()); //{ done:false,value:'bar'}
console.log(iter.next()); //{ done:true,value:undefined}

       迭代器并不与可迭代对象某个时刻的快照绑定，而仅仅是使用游标记录遍历可迭代对象的历程。若可迭代对象在迭代器将被修改，那迭代器也会反映相应变化

let arr = ['foo','bar'];
let iter = arr[Symbol.iterator]();
console.log(iter.next()); //{ done:false,value:'foo'}

arr.splice(1,0,'baz')
console.log(iter.next()); //{ done:false,value:'baz'}
console.log(iter.next()); //{ done:false,value:'bar'}
console.log(iter.next()); //{ done:true,value:undefined}

 

二、生成器

2.1 生成器基础

生成器的形式是一个函数，函数名称前面加一个星号（*）。能定义函数的地方都能定义生成器。

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

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

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

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

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

       调用生成器函数会生成一个生成器对象。生成器对象一开始就处于暂停执行的状态。生成器对象也实现了Iterator接口，也具有next（）。调用next（）会让生成器开始或恢复执行。

生成器函数只有在初次调用next（）方法后开始执行。

注意：不能用箭头函数定义生成器函数

 

2.2 通过yield中断执行

yield关键字可以让生成器停止和开始执行。只能通过next（）恢复执行。

通过yield退出的生成器会处在done：false状态。通过return退出的生成器函数处于done：true状态

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

let generatorObject = generatorFn();

console.log(generatorObject.next());//{ done:false,value:'foo'}
console.log(generatorObject.next());//{ done:false,value:'bar'}
console.log(generatorObject.next());//{ done:true,value:'baz'}

       yield关键字只能在生成器函数内部使用，用在其他地方会抛出错误。yield关键字必须直接位于生成器函数定义中，出现嵌套的非生成器函数中会报错：

//无效
function invalidGenerator () {
    function a() {
        yield;
    }
}

 

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

       在需要自定义迭代对象是，使用生成器对象会非常有用。如：我们需要定义一个可迭代对象，而它会产生一个迭代器，该迭代器会执行指定的次数

function* nTimes(n) {
    while(n--) {
        yield;
    }
}

for (let _ of nTimes(3)) {
    console.log('foo');
}
// 'foo'
// 'foo'
// 'foo'

 

2.3.2 yield实现输入输出

yield的作用：

• 作为函数的中间返回语句
• 作为函数的中间参数

       生成器函数暂停的yield会接收传给next（）的第一个值，当第一次调用next（）传入的值不会被使用，因为这次调用是为了开始执行生成器函数

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

let generatorObject =generatorFn();
console.log(generatorObject.next()); // {done:false,value:'foo'}
console.log(generatorObject.next('bar'));// {done:true,value:'bar'}

       函数必须对整个表达式求值才能确定返回的值，所以在遇到yield时暂停执行时计算出要产生的值：‘foo’。下一次调用next（）传入“bar”，作为交给yield的值。然后该值又被确认为本次生成器要返回的值

​ 生成器还可以实现范围和填充数组

function* range(start,end) {
    while(end>start){
        yield start++;
    }
}

for (const x of range(4,7)) {
    console.log(x);
}
// 4
// 5
// 6

function* zeroes(n) {
    while(n--) {
        yield 0;
    }
}

console.log(Array.from(zeroes(8)));
// [0,0,0,0,0,0,0,0,0]

 

2.3.3 产生可迭代对象

可以使用星号（*）加强yield的行为，让他能够产生一个迭代对象，从而一次产出一个值

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

// 等价的
function* geneatorFn() {
    yield* [1,2,3];
}

• yield*实际上只是将一个可迭代对象序列化为一连串可以单独产出的值，所以这跟把yield放到一个循环里没啥不同。
• yield*的值是关联迭代器返回done：true时的value属性。对普通迭代器来说，这个值是undefined。

 

2.3.4 使用yield* 实现递归算法

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

       图数据结构非常适合递归遍历，而递归生成器恰好非常合用。为此，生成器函数必须接收一个可迭代对象，产出该对象中每一个值，并对每个值进行递归。这个实现可以用来测试某个图是否连通，即是否没有不可到达的节点。从一个结点开始，尽力访问每个节点，得到深度优先遍历。

class Node {
    constructor(id) {
		...
    }

    connect(node) {
		...
    }
}

class RandomGraph {
    constructor(size) {
		...
    }

    print() {
		...
    }

    isConnect() {
        const visitedNodes = new Set();

        function* traverse(nodes) {
            for(const node of nodes) {
                if (!visitedNodes.has(node)) {
                    yield node;
                    yield* traverse(node.neighbors);
                }
            }
        }

        // 取得集合中第一个节点
        const firstNode = this.nodes[Symbol.iterator]().next().value;

        // 使用递归生成器迭代每一个节点
        for (const node of traverse([firstNode])) {
            visitedNodes.add(node);
        }

        return visitedNodes.size === this.nodes.size;
    }
}