侧边栏壁纸
博主头像
lac博主等级

行动起来,活在当下

  • 累计撰写 66 篇文章
  • 累计创建 12 个标签
  • 累计收到 1 条评论

目 录CONTENT

文章目录

js红书读书笔记——第七章 迭代器与生成器

Hude
2024-03-12 / 0 评论 / 0 点赞 / 26 阅读 / 33079 字

第七章 迭代器与生成器

迭代器的英文iteration来自拉丁文itero,意思是"重复"或者"再来"

在软件开发领域,“迭代”的意思是按照顺序反复多次执行一段程序,通常会有明确的终止条件

ECMAScript 6 规范新增了两个高级特性:迭代器生成器

理解迭代

在JavaScript中,计数循环就是一种最简单的迭代

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

循环是迭代机制的基础:

  • 它可以指定迭代的次数

  • 每次迭代要执行什么操作

  • 每次循环都会在下一次迭代开始之前完成

  • 每次迭代的顺序都是事先定义好的

迭代会在一个有序集合上进行。(“有序”可以理解为集合中所有项都可以按照既定的顺序被遍历到,特别是开始和结束项有明确的定义。)数组是 JavaScript 中有序集合的最典型例子

let collection = ['foo', 'bar', 'baz']; 
for (let index = 0; index < collection.length; ++index) { 
 console.log(collection[index]); 
}

因为数组有已知的长度,且数组每一项都可以通过索引获取,所以整个数组可以通过递增索引来遍历。由于如下原因,通过这种循环来执行例程并不理想

  • 迭代之前需要事先知道如何使用数据结构。数组中的每一项都只能先通过引用取得数组对象,然后再通过[]操作符取得特定索引位置上的项。这种情况并不适用于所有数据结构。获取数组特定索引位置上的项具有局限性

  • 遍历顺序并不是数据结构固有的。通过递增索引来访问数据是特定于数组类型的方式,并不适用于其他具有隐式顺序的数据结构。

ES5 新增了 Array.prototype.forEach()方法,向通用迭代需求迈进了一步(但仍然不够理想):

let collection = ['foo', 'bar', 'baz']; 
collection.forEach((item) => console.log(item));
// foo 
// bar 
// baz

这个方法解决了单独记录索引通过数组对象取得值的问题

不过,没有办法标识迭代何时终止。因此这个方法只适用于数组,而且回调结构也比较笨拙

迭代器模式

迭代器模式:(特别是在 ECMAScript 这个语境下)描述了一个方案,即可以把有些结构称为“可迭代对象”(iterable),因为它们实现了正式的 Iterable 接口,而且可以通过迭代器 Iterator 消费

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

// 数组的元素是有限的
// 递增索引可以按序访问每个元素
let arr = [3, 1, 4]; 
// 集合的元素是有限的
// 可以按插入顺序访问每个元素
let set = new Set().add(3).add(1).add(4);

不过,可迭代对象不一定是集合对象,也可以是具有类似数组行为的其他数据结构,比如计数循环

任何实现Iterable接口的数据结构都可以被实现Iterator接口的结构"消费"。

每个迭代器都会关联一个可迭代对象,而迭代器会暴露迭代其关联可迭代对象的API。迭代器无需了解与其关联的可迭代对象的结构,只需要知道如何取得连续的值。这种概念上的分离是Iterable和Iterator的强大之处

可迭代协议

实现Iterable接口(可迭代协议)要求同时具备两种能力:

  • 支持迭代的自我识别能力

  • 创建实现Iterator接口的对象的能力

在JavaScript中,这意味着必须暴露一个属性作为"默认迭代器",而且这个属性必须使用特殊的Symbol.iterator作为键。这个默认迭代器属性必须引用一个迭代器工厂函数,调用这个工厂函数必须返回一个新迭代器

很多内置类型都实现了Iterable接口:

  • 字符串

  • 数组

  • 映射(Map、WeakMap)

  • 集(Set、WeakSet)

  • arguments对象

  • NodeList等DOM集合类型

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

let num = 1; 
let obj = {}; 
// 这两种类型没有实现迭代器工厂函数
console.log(num[Symbol.iterator]); // undefined 
console.log(obj[Symbol.iterator]); // undefined 
let str = 'abc'; 
let arr = ['a', 'b', 'c']; 
let map = new Map().set('a', 1).set('b', 2).set('c', 3); 
let set = new Set().add('a').add('b').add('c'); 
let els = document.querySelectorAll('div'); 
// 这些类型都实现了迭代器工厂函数
console.log(str[Symbol.iterator]); // f values() { [native code] } 
console.log(arr[Symbol.iterator]); // f values() { [native code] } 
console.log(map[Symbol.iterator]); // f values() { [native code] } 
console.log(set[Symbol.iterator]); // f values() { [native code] } 
console.log(els[Symbol.iterator]); // f values() { [native code] } 
// 调用这个工厂函数会生成一个迭代器
console.log(str[Symbol.iterator]()); // StringIterator {} 
console.log(arr[Symbol.iterator]()); // ArrayIterator {} 
console.log(map[Symbol.iterator]()); // MapIterator {} 
console.log(set[Symbol.iterator]()); // SetIterator {} 
console.log(els[Symbol.iterator]()); // ArrayIterator {}

实际写代码过程中,不需要显式调用这个工厂函数来生成迭代器。实现可迭代协议的所有类型都会自动兼容接收可迭代对象的任何语言特性。接收可迭代对象的原生语言特性包括:

  • for-of循环

  • 数组结构

  • 扩展操作符

  • Array.from()

  • 创建集合

  • 创建映射

  • Promise.all()接收由期约组成的可迭代对象

  • Promise.race()接收由期约组成的可迭代对象

  • yield*操作符 ,在生成器中使用

这些原生语言结构会在后台调用提供的可迭代对象的这个工厂函数,从而创建一个迭代器:

let arr = ['foo', 'bar', 'baz']; 
// for-of 循环
for (let el of arr) { 
 console.log(el); 
}
// foo 
// bar 
// baz 
// 数组解构
let [a, b, c] = arr; 
console.log(a, b, c); // foo, bar, baz 
// 扩展操作符
let arr2 = [...arr]; 
console.log(arr2); // ['foo', 'bar', 'baz'] 
// Array.from() 
let arr3 = Array.from(arr); 
console.log(arr3); // ['foo', 'bar', 'baz'] 
// Set 构造函数
let set = new Set(arr); 
console.log(set); // Set(3) {'foo', 'bar', 'baz'} 
// Map 构造函数
let pairs = arr.map((x, i) => [x, i]); 
console.log(pairs); // [['foo', 0], ['bar', 1], ['baz', 2]] 
let map = new Map(pairs); 
console.log(map); // Map(3) { 'foo'=>0, 'bar'=>1, 'baz'=>2 } 
// 如果对象原型链上的父类实现了 Iterable 接口,那这个对象也就实现了这个接口:
class FooArray extends Array {} 
let fooArr = new FooArray('foo', 'bar', 'baz'); 
for (let el of fooArr) { 
 console.log(el); 
} 
// foo 
// bar 
// baz

迭代器协议

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

IteratorResult对象包含两个属性:

  • done:布尔值,表示是否还可以再次调用next()取得下一个值;

  • value:包含可迭代对象的下一个值(done为false),或者undefined(done为true)。

当done为true时,这种状态被称为"耗尽"。

// 可迭代对象
let arr = ['foo', 'bar']; 
// 迭代器工厂函数
console.log(arr[Symbol.iterator]); // f values() { [native code] } 
// 迭代器
let iter = arr[Symbol.iterator](); 
console.log(iter); // ArrayIterator {} 
// 执行迭代
console.log(iter.next()); // { done: false, value: 'foo' } 
console.log(iter.next()); // { done: false, value: 'bar' } 
console.log(iter.next()); // { done: true, value: undefined }

迭代器并不知道怎么从可迭代对象中取得下一个值,也不知道可迭代对象有多大。只要迭代器到达 done: true 状态,后续调用 next()就一直返回同样的值了

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

迭代器的运行不受可迭代对象动态变化的影响,原文描述它不是与可迭代对象的某个快照绑定,而是使用了游标来记录遍历可迭代对象的历程

let arr = ['foo', 'baz']; 
let iter = arr[Symbol.iterator](); 
console.log(iter.next()); // { done: false, value: 'foo' } 
// 在数组中间插入值
arr.splice(1, 0, 'bar'); 
console.log(iter.next()); // { done: false, value: 'bar' } 
console.log(iter.next()); // { done: false, value: 'baz' } 
console.log(iter.next()); // { done: true, value: undefined }

注意:迭代器维护着一个可迭代对象的引用,因此迭代器回阻止垃圾回收程序回收可迭代对象

自定义迭代器

要实现一个自定义迭代器,根据迭代器协议,要实现一个带有next()方法的对象,并且next()方法调用后应该返回一个带有value和done属性的对象。

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

class Counter { 
 // Counter 的实例应该迭代 limit 次
 constructor(limit) { 
 this.count = 1; 
 this.limit = limit; 
 } 
 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(i); 
} 
// 1 
// 2 
// 3
for (let i of counter) { 
 console.log(i); 
} // undefined
// 上面的例子每个对象的实例只能实现一次遍历
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(i); } 
// 1 
// 2 
// 3 
for (let i of counter) { console.log(i); } 
// 1 
// 2 
// 3

每个以这种方式创建的迭代器也实现了 Iterable 接口,所以它同时也能被for结构迭代,这个迭代器内部的count才是可迭代对象

Symbol.iterator 属性引用的工厂函数会返回相同的迭代器

let arr = ['foo', 'bar', 'baz']; 
let iter1 = arr[Symbol.iterator](); 
console.log(iter1[Symbol.iterator]); // f values() { [native code] } 
let iter2 = iter1[Symbol.iterator](); 
console.log(iter1 === iter2); // true

因为每个迭代器也实现了 Iterable 接口,所以它们可以用在任何期待可迭代对象的地方,比如for-of 循环

let arr = [3, 1, 4]; 
let iter = arr[Symbol.iterator]();
for (let item of arr ) { console.log(item); } 
// 3 
// 1 
// 4 
for (let item of iter ) { console.log(item); } 
// 3 
// 1 
// 4

提前终止迭代器

在原生语言结构中,比如for...of结构,可以通过break、continue、return等语句终止迭代器。

  • for-of 循环通过 break、continue、return 或 throw 提前退出;

  • 解构操作并未消费所有值。

对于迭代器协议,可以通过实现return()方法来实现终止迭代器的功能,这个方法是可选的

return()方法必须返回一个有效的 IteratorResult 对象。简单情况下,可以只返回{ done: true}

内置语言结构在发现还有更多值可以迭代,但不会消费这些值时,会自动调用return()方法。

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 }; 
 } 
 }, 
 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); 
}
// 1 
// 2 
// Exiting early 
let counter2 = new Counter(5); 
try { 
 for (let i of counter2) { 
 if (i > 2) { 
 throw 'err'; 
 } 
 console.log(i); 
 } 
} catch(e) {} 
// 1 
// 2 
// Exiting early 
let counter3 = new Counter(5); 
let [a, b] = counter3; 
// Exiting early

注意,并非所有的迭代器都是可以关闭的,比如数组的迭代器就不能关闭,通过break跳出后,再次调用迭代器实例,会从上次关闭的地方继续迭代

let a = [1, 2, 3, 4, 5]; 
let iter = a[Symbol.iterator](); 
for (let i of iter) { 
 console.log(i); 
 if (i > 2) { 
 break 
 } 
} 
// 1 
// 2 
// 3 
for (let i of iter) { 
 console.log(i); 
} 
// 4 
// 5

要知道某个迭代器是否可关闭,可以测试这个迭代器实例的 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 
 } 
} 
// 1 
// 2 
// 3 
// 提前退出
for (let i of iter) { 
 console.log(i); 
} 
// 4 
// 5

生成器

生成器是 ECMAScript 6 新增的一个极为灵活的结构,拥有在一个函数块内暂停恢复代码执行的能力。这种新能力具有深远的影响,比如,使用生成器可以自定义迭代器实现协程

生成器基础

生成器的形式是一个函数,在函数名称前面加一个(*)表示它是一个生成器。只要可以定义函数的地方就能定义生成器

// 生成器函数声明
function* generatorFn() {} 
// 生成器函数表达式
let generatorFn = function* () {} 
// 作为对象字面量方法的生成器函数
let foo = { 
 * generatorFn() {} 
} 
// 作为类实例方法的生成器函数
class Foo { 
 * generatorFn() {} 
} 
// 作为类静态方法的生成器函数
class Bar { 
 static * generatorFn() {} 
}

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

标识生成器函数的星号不受两侧空格的影响

调用生成器函数会返回一个生成器对象,生成器一开始是处于暂停状态的,由于生成器也实现了迭代器,因此也具有next()方法,next方法是用来让生成器开始或恢复执行的

function* generatorFn() {} 
const g = generatorFn(); 
console.log(g); // generatorFn {<suspended>} 
console.log(g.next); // f next() { [native code] }

next()方法返回的对象类似于迭代器:

  • done:布尔值,表示是否可以再次调用next()取得值

  • value:生成器函数的返回值,默认值为 undefined,可以通过生成器函数的返回值指定

function* generatorFn() {} 
let generatorObject = generatorFn(); 
console.log(generatorObject); // generatorFn {<suspended>} 
console.log(generatorObject.next()); // { done: true, value: undefined }
 return 'foo'; 
} 
let generatorObject = generatorFn(); 
console.log(generatorObject); // generatorFn {<suspended>} 
console.log(generatorObject.next()); // { done: true, value: 'foo' }

生成器函数只会在初次调用 next()方法后开始执行:

function* generatorFn() { 
 console.log('foobar'); 
} 
// 初次调用生成器函数并不会打印日志
let generatorObject = generatorFn(); 
generatorObject.next(); // foobar

生成器对象实现了Iterable接口,它们默认是自引用的

function* generatorFn() {} 
console.log(generatorFn); 
// f* generatorFn() {} 
console.log(generatorFn()[Symbol.iterator]);
// f [Symbol.iterator]() {native code} 
console.log(generatorFn()); 
// generatorFn {<suspended>} 
console.log(generatorFn()[Symbol.iterator]()); 
// generatorFn {<suspended>} 
const g = generatorFn(); 
console.log(g === g[Symbol.iterator]()); 
// true

通过yield中断执行

yield关键字可以暂停/恢复生成器函数,生成器函数在遇到这个关键字之前,会正常执行,如果遇到该关键字,则会停止程序。停止执行的生成器函数只能通过生成器对象上的next()方法来恢复执行

function* generatorFn() { 
 yield; 
} 
let generatorObject = generatorFn(); 
console.log(generatorObject.next()); // { done: false, value: undefined } 
console.log(generatorObject.next()); // { done: true, value: undefined }

此时的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' }

生成器函数内部的执行流程会根据每个生成器对象区分作用域,因此不同生成器对象相互不影响

function* generatorFn() { 
 yield 'foo'; 
 yield 'bar'; 
 return 'baz'; 
} 
let generatorObject1 = generatorFn(); 
let generatorObject2 = generatorFn(); 
console.log(generatorObject1.next()); // { done: false, value: 'foo' } 
console.log(generatorObject2.next()); // { done: false, value: 'foo' }
console.log(generatorObject2.next()); // { done: false, value: 'bar' } 
console.log(generatorObject1.next()); // { done: false, value: 'bar' }

1.生成器对象做可迭代对象

在生成器对象上调用next()方法的用处并不大,但如果把生成器对象当作可迭代对象使用,可能会更方便

function* generatorFn() { 
 yield 1; 
 yield 2; 
 yield 3; 
} 
for (const x of generatorFn()) { 
 console.log(x); 
} 
// 1 
// 2 
// 3

在实现自定义迭代对象时,这样使用生成器对象就会特别有用

function* nTimes(n) { 
 while(n--) { 
 yield; 
 } 
}
for (let _ of nTimes(3)) { 
 console.log('foo'); 
} 
// foo 
// foo 
// foo

2.使用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()); // { done: false, value: 'foo' } 
console.log(generatorObject.next('bar')); // { done: true, value: 'bar' }

在函数执行过程中,yield关键字可以暂停执行并且计算出要产生的值。下一次调用 next()传入了"bar",作为交给同一个 yield 的值。然后这个值被确定为本次生成器函数要返回的值

yield关键字可以使用多次

function* generatorFn() { 
 for (let i = 0;;++i) { 
 yield i; 
 } 
} 
let generatorObject = generatorFn(); 
console.log(generatorObject.next().value); // 0 
console.log(generatorObject.next().value); // 1 
console.log(generatorObject.next().value); // 2 
console.log(generatorObject.next().value); // 3 
console.log(generatorObject.next().value); // 4 
console.log(generatorObject.next().value); // 5

假设我们想定义一个生成器函数,它会根据配置的值迭代相应次数并产生迭代的索引。初始化一个新数组可以实现这个需求,但不用数组也可以实现同样的行为

function* nTimes(n) { 
 for (let i = 0; i < n; ++i) { 
 yield i; 
 } 
} 
for (let x of nTimes(3)) { 
 console.log(x); 
} 
// 0 
// 1 
// 2
// 使用while
function* nTimes(n) { 
 let i = 0; 
 while(n--) { 
 yield i++; 
 } 
} 
for (let x of nTimes(3)) { 
 console.log(x); 
} 
// 0 
// 1 
// 2

使用生成器也可以实现范围和填充数组

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]

3.产生可迭代的对象

可以使用星号增强 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); 
} 
// 1 
// 2 
// 3

和生成器函数的星号一致,yield关键字的星号不受位置的影响

yiled*实际上是把一个可迭代对象序列化为一串可单独产出的值,所以这和把yiled丢倒一个循环里没有什么不同。以下两个生成器是一致的:

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

yield*的值是关联迭代器返回 done: true 时的 value 属性。对于普通迭代器来说,这个值是undefined:

function* generatorFn() { 
 console.log('iter value:', yield* [1, 2, 3]); 
} 
for (const x of generatorFn()) { 
 console.log('value:', x); 
} 
// value: 1 
// value: 2 
// value: 3 
// iter value: undefined

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

function* innerGeneratorFn() { 
 yield 'foo'; 
 return 'bar'; 
} 
function* outerGeneratorFn(genObj) { 
 console.log('iter value:', yield* innerGeneratorFn()); 
} 
for (const x of outerGeneratorFn()) { 
 console.log('value:', x); 
} 
// value: foo 
// iter value: bar

4.使用yiled*实现递归算法

yiled最有用的操作就是实现递归操作

function* nTimes(n) { 
 if (n > 0) { 
 yield* nTimes(n - 1); 
 yield n - 1; 
 } 
} 
for (const x of nTimes(3)) { 
 console.log(x); 
} 
// 0 
// 1 
// 2

使用递归生成器结构和 yield*可以优雅地表达递归算法。下面是一个图的实现,用于生成一个随机的双向图:

class Node {
  constructor(id) {
    this.id = id;
    this.neighbors = new Set();
  }
  connect(node) {
    if (node !== this) {
      this.neighbors.add(node);
      this.neighbors.add(this);
    }
  }
}

class RandomGraph {
  constructor(size) {
    this.nodes = new Set();

    for (let i = 0; i < size; ++i) {
      this.nodes.add(new Node(i));
    }

    const threshold = 1 / size;
    for (const x of this.nodes) {
      for (const y of this.nodes) {
        if (Math.random() < threshold) {
          x.connect(y);
        }
      }
    }
  }
  print() {
    for (const node of this.nodes) {
      const ids = [...node.neighbors].map((n) => n.id).join(",");
      console.log(`${node.id}: ${ids}`);
    }
  }
}

const g = new RandomGraph(6); 
g.print(); 
// 示例输出:
// 0: 2,3,5 
// 1: 2,3,4,5 
// 2: 1,3 
// 3: 0,1,2,4 
// 4: 2,3 
// 5: 0,4

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

class Node {
 // ...
}

class RandomGraph {
  // ...

  isConnected() {
    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 s of traverse([firstNode])) {
      visitedNodes.add(s);
    }
    return visitedNodes.size === this.nodes.size;
  }
}

生成器做默认迭代器

因为生成器函数实现了Iterable接口,而且生成器函数和默认迭代器被调用后都产生迭代器,所以生成器格外合适作为默认迭代器

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); 
} 
// 1 
// 2 
// 3

这里,for-of 循环调用了默认迭代器(它恰好又是一个生成器函数)并产生了一个生成器对象。这个生成器对象是可迭代的,所以完全可以在迭代中使用。

提前终止生成器

一个实现迭代器(Iterator)接口的对象一定实现了以下两个方法:

1.next():用于执行下一项的方法

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

与迭代器不同,所有生成器对象都有 return()方法,只要通过它进入关闭状态,就无法恢复了。后续调用 next()会显示 done: true 状态,而提供的任何返回值都不会被存储或传播

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

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); 
} 
// 1 
// 2

生成器除了实现了这两个方法,还有第三个方法:

3.throw():这个方法会在暂停的时候将一个错误注入到生成器中去,生成器就会关闭,但是如果生成器内部处理了这个错误,就不会关闭生成器,而是当作next来继续执行

function* generatorFn() { 
 for (const x of [1, 2, 3]) { 
 yield x; 
 } 
} 
const g = generatorFn(); 
console.log(g); // generatorFn {<suspended>} 
try { 
 g.throw('foo'); 
} catch (e) { 
 console.log(e); // foo 
} 
console.log(g); // generatorFn {<closed>}
// 处理传入的错误
function* generatorFn() { 
 for (const x of [1, 2, 3]) { 
 try { 
 yield x; 
 } catch(e) {} 
 } 
}

const g = generatorFn(); 
console.log(g.next()); // { done: false, value: 1} 
g.throw('foo'); 
console.log(g.next()); // { done: false, value: 3}

在这个例子中,生成器在 try/catch 块中的 yield 关键字处暂停执行。在暂停期间,throw()方法向生成器对象内部注入了一个错误:字符串"foo"。这个错误会被 yield 关键字抛出。因为错误是在生成器的 try/catch 块中抛出的,所以仍然在生成器内部被捕获。可是,由于 yield 抛出了那个错误,生成器就不会再产出值 2。此时,生成器函数继续执行,在下一次迭代再次遇到 yield 关键字时产出了值 3

注意:如果生成器对象还没有开始执行,那么调用 throw()抛出的错误不会在函数内部被捕获,因为这相当于在函数块外部抛出了错误

第七章总结

迭代是一种所有编程语言都可以看到的模式,ES6正式支持迭代模式,并引入两个语言特性:

  • 迭代器:迭代器是一个可以由任意对象实现的接口,支持连续获取对象产出的每一个值。任何实现 Iterable接口的对象都有一个 Symbol.iterator 属性,这个属性引用默认迭代器。默认迭代器就像一个迭代器工厂,也就是一个函数,调用之后会产生一个实现 Iterator 接口的对象

    迭代器必须通过连续调用 next()方法才能连续取得值,这个方法返回一个 IteratorObject。这个对象包含一个 done 属性和一个 value 属性。前者是一个布尔值,表示是否还有更多值可以访问;后者包含迭代器返回的当前值。这个接口可以通过手动反复调用 next()方法来消费,也可以通过原生消费者,比如 for-of 循环来自动消费。

  • 生成器:生成器是一种特殊的函数,调用之后会返回一个生成器对象生成器对象实现了 Iterable 接口,因此可用在任何消费可迭代对象的地方。生成器的独特之处在于支持 yield 关键字,这个关键字能够暂停执行生成器函数。使用 yield 关键字还可以通过 next()方法接收输入和产生输出。在加上星号之后,yield 关键字可以将跟在它后面的可迭代对象序列化为一连串值。

0

评论区