JavaScript高级程序设计第四版学习--第七章_javascript程序设计第7章本章自测

---

title: JavaScript高级程序设计第四版学习–第七章
date: 2021-5-18 20:52:55
author: Xilong88
tags: JavaScript

本章内容
理解迭代
迭代器模式
生成器
可能出现的面试题：
1.迭代器和生成器的程序题
2.做题过程中，看是否使用了迭代器生成器，可以看出这个面试者的一些水平吧
3.可迭代协议和迭代器协议的概念

总结：
本章的重点就是迭代器和生成器，主要是理解两个东西的本质，然后就是掌握其使用的基本方法。
关于生成器有很多很高级的运用手法，可以帮助简化代码，这个要慢慢掌握。
这一章概念不多，不复杂，但是感觉学好了对编码能力提升会很多。

知识点：

1.“迭代”的意思是按照顺序反复多次执行一段程序，通常会有明确的终止条件。

普通的迭代，通常用for循环，通过[ ]操作符进行迭代，需要明确的数据结构，并且不支持隐式顺序的数据结构。

迭代方法:
(1).Array.prototype.forEach() 方法

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

特点：
这个方法解决了单独记录索引和通过数组对象取得值的问题。
不过，没有办法标识迭代何时终止。
因此这个方法只适用于数组，而且回调结构
也比较笨拙。
2.迭代器模式：

• 可迭代对象：

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

它们实现了正式的 Iterable 接口，而且可以通过迭代器Iterator 消费。

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

实现Iterable 接口（可迭代协议）要求同时具备两种能力：支持迭代
的自我识别能力和创建实现Iterator 接口的对象的能力。在
ECMAScript中，这意味着必须暴露一个属性作为“默认迭代器”，而且这
个属性必须使用特殊的Symbol.iterator 作为键。这个默认迭代器属
性必须引用一个迭代器工厂函数，调用这个工厂函数必须返回一个新迭
代器。

很多内置类型都实现了Iterable 接口： 字符串

数组
映射
集合
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 {}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

for-of 循环 数组解构 扩展操作符

Array.from() 创建集合 创建映射 Promise.all() 接收由期约组成的可迭代对象 Promise.race()
接收由期约组成的可迭代对象 yield* 操作符，在生成器中使用

这些可以自动生成一个迭代器用于迭代

如果对象原型链上的父类实现了Iterable 接口，那这个对象也就实现

了这个接口：

class FooArray extends Array {}
let fooArr = new FooArray('foo', 'bar', 'baz');
for (let el of fooArr) {
  console.log(el);
}
// foo
// bar
// baz
1
2
3
4
5
6
7
8

• 迭代器是一种一次性使用的对象，用于迭代与其关联的可迭代对象。

迭代器.next()返回下一个迭代器对象，包含两个属性，done和value，done表示是否迭代完成了，value是本次迭代的值。

// 可迭代对象
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 }
1
2
3
4
5
6
7
8
9
10
11

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 }
1
2
3
4
5
6

每个迭代器都表示对可迭代对象的一次性有序遍历。不同迭代器的实例
相互之间没有联系，只会独立地遍历可迭代对象：

let arr = ['foo', 'bar'];
let iter1 = arr[Symbol.iterator]();
let iter2 = arr[Symbol.iterator]();
console.log(iter1.next()); // { done: false, value: 'foo' }
console.log(iter2.next()); // { done: false, value: 'foo' }
console.log(iter2.next()); // { done: false, value: 'bar' }
console.log(iter1.next()); // { done: false, value: 'bar' }
1
2
3
4
5
6
7

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

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 }
1
2
3
4
5
6
7
8

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

自定义迭代器：

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

通过自定义next方法，来自定义迭代器，其中闭包是为了每次访问迭代器就产生新计数器

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
1
2
3
4
5

提前终止迭代器：

break 、continue 、return 或throw

如下面的代码所示，内置语言结构在发现还有更多值可以迭代，但不会
消费这些值时，会自动调用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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

如果迭代器没有关闭，则还可以继续从上次离开的地方继续迭代。比
如，数组的迭代器就是不能关闭的：

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

因为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
  }
}
// 1

// 2
// 3
// 提前退出
for (let i of iter) {
  console.log(i);
}
// 4
// 5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3.生成器

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

// 生成器函数声明
function* generatorFn() {}
// 生成器函数表达式
let generatorFn = function* () {}
// 作为对象字面量方法的生成器函数
let foo = {
  * generatorFn() {}
}
// 作为类实例方法的生成器函数
class Foo {
  * generatorFn() {}
}
// 作为类静态方法的生成器函数
class Bar {
  static * generatorFn() {}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

箭头函数不能用来定义生成器函数。
标识生成器函数的星号不受两侧空格的影响：

// 等价的生成器函数：
function* generatorFnA() {}
function *generatorFnB() {}
function * generatorFnC() {}
// 等价的生成器方法：
class Foo {
  *generatorFnD() {}
  * generatorFnE() {}
}
1
2
3
4
5
6
7
8
9

生成器可以用来迭代，使用next方法

函数体为空的生成器函数中间不会停留，调用一次next() 就会让
生成器到达done: true 状态。

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

成器函数的返回值指定：

function* generatorFn() {
  return 'foo';
}
let generatorObject = generatorFn();
console.log(generatorObject);         // generatorFn {<suspended>}
console.log(generatorObject.next());  // { done: true, value: 'foo' }
1
2
3
4
5
6

生成器对象实现了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
1
2
3
4
5
6
7
8
9
10
11
12

yield，相当于return，但是它不结束生成器的迭代，只是这一次迭代的返回。

返回结果是next里的value：

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' }
1
2
3
4
5
6
7
8
9

return 退出，并且让done变为true

生成器函数内部的执行流程会针对每个生成器对象区分作用域。在一个
生成器对象上调用next() 不会影响其他生成器：

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
2
3
4
5
6
7
8
9
10
11
12

yield只能在生成器函数中使用，其他地方会报错，出现嵌套的情况也会报错：

// 有效
function* validGeneratorFn() {
  yield;
}
// 无效
function* invalidGeneratorFnA() {
  function a() {
    yield;
  }
}
// 无效
function* invalidGeneratorFnB() {
  const b = () => {
    yield;
  }
}
// 无效
function* invalidGeneratorFnC() {
  (() => {
    yield;
  })();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

可以这样用：
这不比for循环香？？

function* nTimes(n) {
  while(n--) {
    yield;
  }
}
for (let _ of nTimes(3)) {
  console.log('foo');
}
// foo
// foo
// foo
1
2
3
4
5
6
7
8
9
10
11

使用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
1
2
3
4
5
6
7
8
9

相当于，括号里的yield先运行，下次运行时就变成了下次传进来的参数。

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' }
1
2
3
4
5
6

这里要把return 和yield分开看，return要计算后面的yield，yield返回’foo’并且接受下一次传进来的‘bar’

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
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14

有些奇奇怪怪的技巧：

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

function* nTimes(n) {
  for (let i = 0; i < n; ++i) {
    yield i;
  }
}
for (let x of nTimes(3)) {
  console.log(x);
}
// 0
// 1
// 2
1
2
3
4
5
6
7
8
9
10
11

使用while 循环也可以，而且代码稍微简洁一点：

function* nTimes(n) {
  let i = 0;
  while(n--) {
    yield i++;
  }
}
for (let x of nTimes(3)) {
  console.log(x);
}
// 0
// 1
// 2
1
2
3
4
5
6
7
8
9
10
11
12

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

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]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

产生可迭代对象：

可以使用星号增强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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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
1
2
3
4
5
6
7
8
9
10

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
1
2
3
4
5
6
7
8
9
10

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

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
1
2
3
4
5
6
7
8
9
10
11
12

使用yield* 实现递归算法：

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
1
2
3
4
5
6
7
8
9
10
11
12

生成器作为默认迭代器：

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

提前终止生成器：

throw() 
1

return() 和throw() 方法都可以用于强制生成器进入关闭状态。

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));  // { done: true, value: 4 }
console.log(g);            // generatorFn {<closed>}
1
2
3
4
5
6
7
8
9

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

function* generatorFn() {
  for (const x of [1, 2, 3]) {
    yield x;
  }
}
const g = generatorFn();
console.log(g.next());     // { done: false, value: 1 }
console.log(g.return(4));  // { done: true, value: 4 }
console.log(g.next());     // { done: true, value: undefined }
console.log(g.next());     // { done: true, value: undefined }

console.log(g.next());     // { done: true, value: undefined }
1
2
3
4
5
6
7
8
9
10
11
12

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);
}
// 1
// 2
1
2
3
4
5
6
7
8
9
10
11
12
13
14

最后一次返回的4没有被接受，也就是done：true状态

throw() 方法会在暂停的时候将一个提供的错误注入到生成器对象
中。如果错误未被处理，生成器就会关闭：

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>}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

假如错误被处理了，就会跳过这个yield执行下一个yield

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}
1
2
3
4
5
6
7
8
9
10
11

catch到的e就是throw抛出的foo