ES6 学习14 Generator函数

最新推荐文章于 2022-12-14 16:41:58 发布

pspxuan

最新推荐文章于 2022-12-14 16:41:58 发布

阅读量141

点赞数

分类专栏： ES6

本文链接：https://blog.csdn.net/pspxuan/article/details/102977155

版权

ES6 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

此文参考学习于阮一峰老师《ES6入门》，更多特性以及方法可以点击查看

1.Generator 函数

1.1.概述

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。

Generator 函数有多种理解角度。语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。
执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。

Generator 的表示：类似于一个普通函数，有两个特征。

（1）function关键字与函数名之间有一个星号
（2）函数体内部使用yield表达式，定义不同的内部状态

function*  Generator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = Generator();

上面定义了一个 Generator 函数，它内部有两个yield表达式（hello和world），该函数还有三个状态：hello，world 和 return 语句（表示结束执行）。

当调用函数并带上圆括号时Generator()，此Generator函数并不会像普通函数一样立即执行函数中的语句，而是返回一个指向内部状态的指针对象。也就是上一篇学习笔记介绍的遍历器对象（Iterator
Object）。

下一步，要调用遍历器对象的 next 方法，才能使得指针移向下一个状态。
简单来说，只有调用了 next 方法，才能执行 Generator 函数中的语句。
Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。

hw.next()// { value: 'hello', done: false }
hw.next()// { value: 'world', done: false }
hw.next()// { value: 'ending', done: true }
hw.next()// { value: undefined, done: true }

上面表示，使用 next 方法的执行结果

小结

Generator函数类似于一个普通函数，function 后带有*符号，函数内部使用yield表达式，定义不同的内部状态
调用 Generator 函数，不执行函数，而是返回一个遍历器对象，代表 Generator 函数的内部指针。
每次调用遍历器对象的next方法，就会返回一个有着 value 和 done 两个属性的对象。
value 属性表示当前的内部状态的值（yield表达式后面那个表达式的值）
done 属性是一个布尔值，表示是否遍历结束。

1.2.yield表达式

yield表达式就是遍历内部状态（函数内部的语句）时的暂停标志。
yield表达式只能用在 Generator 函数中

运行逻辑如下：

遇到yield表达式，就暂停这一行执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。或者说遇到这一行有yield表达式时，就停止执行这一条语句。
下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。
如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。
如果该函数没有return语句并且函数体内语句都执行完毕，则返回的对象的value属性值为undefined。

注意：
yield表达式后面的表达式，只有当调用next方法、内部指针指向该语句时才会执行，因此等于为 JavaScript 提供了手动的“惰性求值”（Lazy Evaluation）的语法功能。

function* gen() {
  yield  123 + 456;
}

上面 yield 表达式的值，在没有使用 next 方法的指针没有移动到此处前不会求值

yield表达式与return语句既有相似之处，也有区别。相似之处在于，都能返回紧跟在语句后面的那个表达式的值。区别在于每次遇到yield，函数暂停执行，下一次再从该位置继续向后执行，而return语句不具备位置记忆的功能。一个函数里面，只能执行一次（或者说一个）return语句，但是可以执行多次（或者说多个）yield表达式。正常函数只能返回一个值，因为只能执行一次return；Generator 函数可以返回一系列的值，因为可以有任意多个yield。从另一个角度看，也可以说 Generator 生成了一系列的值，这也就是它的名称的来历（英语中，generator 这个词是“生成器”的意思）。

yield表达式如果用在另一个表达式之中，必须放在圆括号里面。

function* demo() {
  console.log('Hello' + yield); // SyntaxError
  console.log('Hello' + yield 123); // SyntaxError

  console.log('Hello' + (yield)); // OK
  console.log('Hello' + (yield 123)); // OK
}

yield表达式用作函数参数或放在赋值表达式的右边，可以不加括号。

function* demo() {
  foo(yield 'a', yield 'b'); // OK
  let input = yield; // OK
}

1.3.next 方法的参数

yield表达式本身没有返回值，或者说总是返回undefined。next方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值。

function* f() {
  for(var i = 0; true; i++) {
    var reset = yield i;
    if(reset) { i = -1; }
  }
}

var g = f();

g.next() // { value: 0, done: false }
g.next() // { value: 1, done: false }
g.next(true) // { value: 0, done: false }

上面的例子可以很好的体现 next 方法返回值的特性

这个功能有很重要的语法意义。Generator
函数从暂停状态到恢复运行，它的上下文状态（context）是不变的。通过next方法的参数，就有办法在 Generator
函数开始运行之后，继续向函数体内部注入值。也就是说，可以在 Generator
函数运行的不同阶段，从外部向内部注入不同的值，从而调整函数行为。

看明白上面的代码后，我们再看一个例子。

function* foo(x) {
  var y = 2 * (yield (x + 1));
  var z = yield (y / 3);
  return (x + y + z);
}

var a = foo(5);
a.next() // Object{value:6, done:false}  
//上面一行代码 Object中的 Value，返回的是 yield表达式（x+1）的值，为 6，下面的也是一样的道理
a.next() // Object{value:NaN, done:false}
//上面一行代码执行为什么是 NaN 呢，因为未携带参数，导致函数认为最开始执行的"yield (x + 1)"未赋值，所以解析这一行时 y 为 undefined。
a.next() // Object{value:NaN, done:true}

var b = foo(5);
b.next() // { value:6, done:false }
b.next(12) // { value:8, done:false }
b.next(13) // { value:42, done:true }

再看一个通过next方法的参数，向 Generator 函数内部输入值的例子。

function* dataConsumer() {
  console.log('Started');  
  console.log(`1. ${yield}`);
  console.log(`2. ${yield}`);
  return 'result';
}

let genObj = dataConsumer();
genObj.next(); //Generator中的第一个next不能携带参数
// Started
genObj.next('a') 
// 1. a
genObj.next('b')
// 2. b

上面的例子将 yield 当做接受参数的变量使用
刚刚开始很疑惑，为什么第二个 next 中的参数会直接带入第二行的 yield 表达式呢，后来发现，第二次使用 next 并携带参数，如果第一条语句没有 yield 表达式，参数会一直向下找，找到第一个 yield 表达式并带入。（其实也就是体现了 yield 可以暂停执行的特性）

与此同时，yield 表达式中后面的语句，是可以使用 yield 变量的

function* dataConsumer() {
  console.log(`1`);
  console.log(`2 `);
  console.log(`3`);
  yield console.log(`${yield}`)
  return 'result';
}
let genObj = dataConsumer();
genObj.next();
//1
//2
//3
genObj.next('a')
//a
genObj.next('a')
//result

如果想要第一次调用next方法时，就能够输入值，可以在 Generator 函数外面再包一层。

//定义一个函数，使它先执行一遍 next 方法，再将执行完后的对象返回。
function wrapper(generatorFunction) { 
  return function (...args) {     
    let generatorObject = generatorFunction(...args); //准备启动Generator函数，返回遍历器指针给变量
    generatorObject.next();//使用 next 方法，启动 generator 函数
    return generatorObject;
  };
}
//使 Generator 函数为参数带入上面的函数。
const wrapped = wrapper(function* () {
  console.log(`First input: ${yield}`);
  return 'DONE';
});

wrapped().next('hello!')
// First input: hello!

不过上面的代码其实没有多大意义，你在原函数上执行两次 next 其实更加方便（一样的效果）。

参数这一小结的学习花费了很多时间，很多问题困扰了自己许久，下面着重说一个问题
当 Generator 函数的第一行 yield 表达式为变量时，使用 next 并不会执行代码，只是启动函数，到了第二次使用 next
时才可以让参数带入并执行，看一个例子

function* dataConsumer() {
  console.log(`${yield}`)
  return 'result';
}
let genObj = dataConsumer();
genObj.next() //启动函数，除外不会有任何操作
genObj.next(1) //执行函数第一行，并带入参数
genObj.next() //return结果，函数执行完毕

1.4.for…of 循环

for…of循环可以自动遍历 Generator 函数运行时生成的 Iterator 对象，且此时不再需要调用 next 方法。

function* foo() {
  yield 1;
  yield 2;
  return 3;
}

for (let v of foo()) { console.log(v); }// 1 2

上面的例子中使用 for…of 循环遍历函数，尽管有 yield 表达式，但还是会依次遍历函数，不会停止。需要注意的是，当 done 的值为 true 时，for…of 将会停止遍历，所以上面代码的 return 语句返回的 3，不包括在for…of循环之中。

利用for…of循环，可以写出遍历任意对象（object）的方法。原生的 JavaScript 对象没有遍历接口，无法使用for…of循环，通过 Generator 函数为它加上这个接口，就可以用了。

function* objectEntries(obj) {
  let propKeys = Reflect.ownKeys(obj); //获取目标对象的键名
  for (let propKey of propKeys) {    //循环获取每个对象的值，并返回键值对数组
    yield [propKey, obj[propKey]];
  }
}
let jane = { first: 'Jane', last: 'Doe' };//目标对象
for (let [key, value] of objectEntries(jane)) { //for...of遍历接口
  console.log(`${key}: ${value}`);
}
// first: Jane
// last: Doe

Reflect.ownKeys(target)
方法用于返回对象的所有属性名（包括 Symbol 类型），基本等同于 Object.getOwnPropertyNames 与 Object.getOwnPropertySymbols 之和。返回一个数组

还有另一种写法是，将 Generator 函数加到对象的Symbol.iterator属性上面。，这样就可以使对象直接调用 for…of 循环。

function* objectEntries() {
  let propKeys = Object.keys(this);
  for (let propKey of propKeys) {
    yield [propKey, this[propKey]];
  }
}
let jane = { first: 'Jane', last: 'Doe' };
jane[Symbol.iterator] = objectEntries; //将 Generator 函数定义在 Symbol.iterator 上
for (let [key, value] of jane) { //for...of遍历操作会直接启动接口
  console.log(`${key}: ${value}`);
}
// first: Jane
// last: Doe

除了for…of循环以外，扩展运算符（…）、解构赋值和Array.from方法内部调用的，都是遍历器接口。这意味着，它们都可以将 Generator 函数返回的 Iterator 对象，作为参数。

function* numbers () {
  yield 1
  yield 2
  return 3
  yield 4
}
[...numbers()] // [1, 2];扩展运算符

Array.from(numbers()) // [1, 2]; Array.from 方法

let [x, y] = numbers();
x // 1
y // 2 ;解构赋值

for (let n of numbers()) {
  console.log(n)
}
// 1
// 2

1.5.Generator.prototype.throw()

先来讲讲，等会儿会用到的 try catch语句

try/catch/finally 语句用于处理代码中可能出现的错误信息。
try语句允许我们定义在执行时进行错误测试的代码块
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
finally 语句在 try 和 catch 之后无论有无异常都会执行。

try {
    //tryCode - 尝试执行代码块
}
catch(err) {
    //catchCode - 捕获错误的代码块
} 
finally {
    //finallyCode - 无论 try / catch 结果如何都会执行的代码块
}

注意： catch 和 finally 语句都是可选的，但你在使用 try 语句时必须至少使用一个。

回到正题：

Generator 函数返回的遍历器对象，都有一个throw方法，可以在函数体外抛出错误，然后在 Generator 函数体内捕获。

var g = function* () {
  try {
    yield;
  } catch (e) {
    console.log('内部捕获', e);
  }
};

var i = g();
i.next();

try {
  i.throw('a');//抛出第一个错误，由于定义了Generator函数，所以这个错误被函数所捕获
  i.throw('b');//抛出第二个错误，由于第一个错误被 Generator 中的 catch 捕获，所以函数的catch不会再执行，于是将错误再抛出到外部，被外部的 catch 所捕获
catch (e) {
  console.log('外部捕获', e);
}
// 内部捕获 a
// 外部捕获 b

throw方法可以接受一个参数，该参数会被 catch 语句接收。
建议抛出Error对象的实例。

var g = function* () {
  try {
    yield;
  } catch (e) {
    console.log(e);
  }
};

var i = g();
i.next();//启动函数，若无此语句，则会捕获不到下一行语句抛出的错误，并报错
i.throw(new Error('出错了！'));

上面代码的错误，是用遍历器对象的throw方法抛出的，只有遍历器对象的 throw 方法抛出的错误才能被 Generator 函数所捕获

注意：

只有部署了 try…catch 代码块才能捕获 throw 方法抛出的错误
throw方法抛出的错误要被内部捕获，前提是必须至少执行过一次next方法。目的是启动函数，否则 Generator 函数还没有开始执行，这时throw方法抛错只可能抛出在函数外部。
另外，throw命令与g.throw方法是无关的，两者互不影响。
一旦 Generator 执行过程中抛出错误，且没有被内部捕获，就不会再执行下去了。

这种函数体内捕获错误的机制，大大方便了对错误的处理。多个yield表达式，可以只用一个try…catch代码块来捕获错误。如果使用回调函数的写法，想要捕获多个错误，就不得不为每个函数内部写一个错误处理语句，现在只在 Generator 函数内部写一次catch语句就可以了。

Generator 函数体外抛出的错误，可以在函数体内捕获；
反过来，Generator 函数体内抛出的错误，也可以被函数体外的catch捕获。

function* foo() {
  var x = yield 3;
  var y = x.toUpperCase();
  yield y;
}

var it = foo();

it.next(); // { value:3, done:false }

try {
  it.next(42);
} catch (err) {
  console.log(err);
}

toUpperCase() 方法用于把字符串转换为大写。
语法：stringObject.toUpperCase()
返回值：一个新的字符串，在其中 stringObject 的所有小写字符全部被转换为了大写字符。

上面代码中，第二个next方法向函数体内传入一个参数 42，数值是没有toUpperCase方法的，所以会抛出一个 TypeError 错误，被函数体外的catch捕获。

1.6.Generator.prototype.return()

Generator 函数返回的遍历器对象，还有一个return方法，可以返回给定的值，并且终结遍历 Generator 函数。

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

var g = gen();

g.next()        // { value: 1, done: false }
g.return('foo') // { value: "foo", done: true }
g.next()        // { value: undefined, done: true }

上面代码中，遍历器对象g调用return方法后，返回值的value属性就是return方法的参数foo。
Generator 函数的遍历就终止了，以后再调用next方法，done属性总是返回true。

如果return方法调用时，不提供参数，则返回值的value属性为undefined。

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

var g = gen();

g.next()        // { value: 1, done: false }
g.return() // { value: undefined, done: true }

如果 Generator 函数内部有try…finally代码块，且正在执行try代码块，那么return方法会导致立刻进入finally代码块，执行完以后，整个函数才会结束。

function* numbers () {
  yield 1;
  try {
    yield 2;
    yield 3;
  } finally {
    yield 4;
    yield 5;
  }
  yield 6;
}
var g = numbers();
g.next() // { value: 1, done: false }
g.next() // { value: 2, done: false }
g.return(7) // { value: 4, done: false }
g.next() // { value: 5, done: false }
g.next() // { value: 7, done: true }

上面代码中，调用return()方法后，就开始执行finally代码块，不执行try里面剩下的代码了，然后等到finally代码块执行完，再返回return()方法指定的返回值。

1.7.next()、throw()、return() 的共同点

next()、throw()、return()这三个方法本质上是同一件事，可以放在一起理解。它们的作用都是让 Generator 函数恢复执行，并且使用不同的语句替换yield表达式。

const g = function* (x, y) {
  let result = yield x + y;
  return result;
};

const gen = g(1, 2);
gen.next(); // Object {value: 3, done: false}

gen.next(1); // Object {value: 1, done: true}
// 相当于将 let result = yield x + y
// 替换成 let result = 1;

上面代码中，第二个next(1)方法就相当于将yield表达式替换成一个值1。如果next方法没有参数，就相当于替换成undefined。

throw()是将yield表达式替换成一个throw语句。

gen.throw(new Error('出错了')); // Uncaught Error: 出错了
// 相当于将 let result = yield x + y
// 替换成 let result = throw(new Error('出错了'));

1.8.yield* 表达式

如果在 Generator 函数内部，调用另一个 Generator 函数的。需要在前者的函数体内部，自己手动完成遍历。

function* foo() {
  yield 'a';
  yield 'b';
}

function* bar() {
  yield 'x';
  // 手动遍历 foo()
  for (let i of foo()) {
    console.log(i);
  }
  yield 'y';
}

for (let v of bar()){
  console.log(v);
}
// x
// a
// b
// y

ES6 提供了 yield* 表达式来解决这个问题，使得可以不用遍历来在一个 Generator 函数里面执行另一个 Generator 函数。

function* foo() {
  yield 'a';
  yield 'b';
}

function* bar() {
  yield 'x';
  yield* foo()
  yield 'y';
}

for (let v of bar()){
  console.log(v);
}
// x
// a
// b
// y

再来看一个例子

function* foo() {
  yield 'a';
  yield 'b';
}

function* bar() {
  yield 'x';
  yield foo()
  yield 'y';
}

var gen = bar();
gen.next().value // 'x'
gen.next().value // 返回一个遍历器的对象
gen.next().value // 'y'

上面的两个例子很直观体现了 yield 和 yield* 的区别

从语法角度看，如果yield表达式后面跟的是一个遍历器对象，需要在yield表达式后面加上星号，表明它返回的是一个遍历器对象。这被称为yield*表达式。

yield*后面的 Generator 函数（没有return语句时），等同于在 Generator 函数内部，部署一个for...of循环。
由此可以推断出，任何数据结构只要有 Iterator 接口，就可以被yield*遍历。

let read = (function* () {   //字符串
  yield 'hello';
  yield* 'hello';
})();
read.next().value // "hello"
read.next().value // "h"

var gen = (function* ge() {   //数组
  yield* ["a", "b", "c"];
})()
gen.next()  // { value:"a", done:false }

如果被代理的 Generator 函数有return语句，那么就可以向代理它的 Generator 函数返回数据。

function* foo() {
  yield 3;
  return "foo";
}

function* bar() {
  yield 1;
  var v = yield* foo();
  console.log("v: " + v);
  yield 4;
}

var it = bar();

it.next()
// {value: 1, done: false}
it.next()
// {value: 3, done: false}
it.next();
// "v: foo"
// {value: 4, done: false}
it.next()
// {value: undefined, done: true}

上面代码在第三次调用 next 方法的时候，屏幕上会有输出，这是因为函数 foo 的 return 语句，向函数 bar 提供了返回值。

扩展一个例子

function* gen() {
  yield 'a';
  yield 'b';
  return 'The result';
}
function* log(genObj) {
  let result = yield* genObj;
  console.log(result);
}

[...log(gen())] 

// The result
// 值为 [ 'a', 'b' ]

上面的代码，第一步将 gen() 带入 log() 函数中。log() 函数内部又使用了 yield* 表达式，相当于将传过来的gen() 函数遍历出来，又因为有扩展运算符，所以导致了 log() 函数被遍历。

yield* 的应用

yield*命令可以很方便地取出嵌套数组的所有成员。

function* iterTree(tree) {
  if (Array.isArray(tree)) {
    for(let i=0; i < tree.length; i++) {
      yield* iterTree(tree[i]);
    }
  } else {
    yield tree;
  }
}

const tree = [ 'a', ['b', 'c'], ['d', 'e'] ];

[...iterTree(tree)] // ["a", "b", "c", "d", "e"]

Array.isArray(obj) 用于确定传递的值是否是一个 Array。

1.9.Generator 函数为一个对象的属性

如果一个对象的属性是 Generator 函数，可以简写成下面的形式。

let obj = {
  * myGeneratorMethod() {  // 与定义对象的方法类似
    ···
  }
};

上面代码中，myGeneratorMethod属性前面有一个星号，表示这个属性是一个 Generator 函数。

1.10.Generator 函数的this

Generator 函数总是返回一个遍历器，ES6 规定这个遍历器是 Generator 函数的实例，这个实例（遍历器）也继承了 Generator 函数的prototype对象上的方法。

function* g() {}

g.prototype.hello = function () {
  return 'hi!';
};

let obj = g();

obj instanceof g // true
obj.hello() // 'hi!'

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

上面代码表明，Generator 函数g返回的遍历器 obj，是 g 的实例，而且继承了 g.prototype 。但是，如果把 g 当作普通的构造函数，并不会生效，因为 g 返回的总是遍历器对象，而不是this对象。

function* g() {
  this.a = 11;
}

let obj = g();
obj.next();
obj.a // undefined

上面代码中，Generator 函数g在this对象上面添加了一个属性a，但是obj对象拿不到这个属性。

Generator 函数也不能跟new命令一起用，会报错。

下面是一个变通方法。既可以让 Generator 函数用 next 方法，又可以像普通构造一样获取函数内部的 this。

首先，生成一个空对象，使用 call 方法绑定 Generator 函数内部的 this。这样，构造函数调用以后，这个空对象就是 Generator 函数的实例对象了。

function* Generator() {
  this.a = 1;
  yield this.b = 2;
  yield this.c = 3;
}
var obj = {};     // 声明对象 obj 用来充当 Generator 函数中 this 的指向目标
var f = Generator.call(obj);  // call 方法改变 Generator函数中 this 的指向，指向上一行代码生成的 obj

f.next();  // Object {value: 2, done: false}
f.next();  // Object {value: 3, done: false}
f.next();  // Object {value: undefined, done: true}

obj.a // 1
obj.b // 2
obj.c // 3

上面代码中，首先是 Generator 内部的 this 对象绑定 obj 对象，然后调用它，返回一个 Iterator 对象。这个对象执行三次 next 方法（因为F内部有两个yield表达式），完成 F 内部所有代码的运行。这时，所有内部属性都绑定在 obj 对象上了（当然也可以执行两次 next 方法，依然可以正常绑定），因此obj对象也就成了F的实例。

还有一个办法可以将上面生成的遍历器对象f与生成的对象实例obj统一在一起

那就是将obj换成F.prototype。帮我们天然的充当了 this 的指向目标

function* F() {
  this.a = 1;
  yield this.b = 2;
  yield this.c = 3;
}
var f = F.call(F.prototype);

f.next();  // Object {value: 2, done: false}
f.next();  // Object {value: 3, done: false}
f.next();  // Object {value: undefined, done: true}

f.a // 1
f.b // 2
f.c // 3

再将F改成构造函数，就可以对它执行new命令了。

function* gen() {
  this.a = 1;
  yield this.b = 2;
  yield this.c = 3;
}

function F() {
  return gen.call(gen.prototype);
}

var f = new F();

f.next();  // Object {value: 2, done: false}
f.next();  // Object {value: 3, done: false}
f.next();  // Object {value: undefined, done: true}

f.a // 1
f.b // 2
f.c // 3

2.Generator 函数的应用

Generator 可以暂停函数执行，返回任意表达式的值。这种特点使得 Generator 有多种应用场景。

（1）异步操作的同步化表达

Generator 函数的暂停执行的效果，意味着可以把异步操作写在yield表达式里面，等到调用next方法时再往后执行。这实际上等同于不需要写回调函数了，因为异步操作的后续操作可以放在yield表达式下面，反正要等到调用next方法时再执行。所以，Generator 函数的一个重要实际意义就是用来处理异步操作，改写回调函数。

function* loadUI() {
  showLoadingScreen();
  yield loadUIDataAsynchronously();
  hideLoadingScreen();
}
var loader = loadUI();
// 加载UI
loader.next()

// 卸载UI
loader.next()

上面代码中，第一次调用loadUI函数时，该函数不会执行，仅返回一个遍历器。下一次对该遍历器调用next方法，则会显示Loading界面（showLoadingScreen），并且异步加载数据（loadUIDataAsynchronously）。等到数据加载完成，再一次使用next方法，则会隐藏Loading界面。可以看到，这种写法的好处是所有Loading界面的逻辑，都被封装在一个函数，按部就班非常清晰。

（2）部署 Iterator 接口

利用 Generator 函数，可以在任意对象上部署 Iterator 接口。

function* iterEntries(obj) {
  let keys = Object.keys(obj);
  for (let i=0; i < keys.length; i++) {
    let key = keys[i];
    yield [key, obj[key]];
  }
}
let myObj = { foo: 3, bar: 7 };

for (let [key, value] of iterEntries(myObj)) {
  console.log(key, value);
}// foo 3
 // bar 7

console.log(...iterEntries(myObj)) 
//["bar", 7] 
//["foo", 3]

上述代码中，myObj是一个普通对象，通过 Generator 函数来部署一个iterator 接口。
也就是说，可以在任意对象上部署next方法。

下面是一个对数组部署 Iterator 接口的例子，尽管数组原生具有这个接口。但是可以自定义一个接口，部署想要的行为

function* makeSimpleGenerator(array){
  var nextIndex = 0;

  while(nextIndex < array.length){
    yield array[nextIndex++];
  }
}

var gen = makeSimpleGenerator(['yo', 'ya']);

gen.next().value // 'yo'
gen.next().value // 'ya'
gen.next().done  // true