js中的yield、yield*和Generator函数

 

基本概念
yield和yield*都是js中的关键字，他们不能直接使用；只能配合Generator进行使用；Generator是一种函数，声明方式和普通函数类似，只不过要在function后面加个*(function*)

yidld
yield是关键字，其语法如下：

[rv] = yield [expression];
1
expression：是Generator函数返回的构造器器对象调用next()方法是所得到的值；
rv：是遍历其对象调用next()方法所传的值
那么在这里我们先说明一下next方法，其语法如下：

gen.next(value)
1
value：传递给Generator函数的值，也就是上文中的rv
说到这里你可能会感到不解，没关系，让我们一起来看下面这个简单的例子：

这里比较有意思的就是传递给next方法的值value，下面通过例子来看一下：

function* testGenerator(x){
    console.log(`x得值为: ${x}`);
    let t = yield x;
    console.info(`t得值为: ${t}`);

    let s = yield 100;
    console.info(`s得值为: ${s}`);
    return 'over';
}

let test = testGenerator(10);
console.log(test.next());
console.log(test.next(1000).value);
console.log(test.next());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
输出如下：

x得值为: 10
{value: 10, done: false}
t得值为: 1000
100
s得值为: undefined
{value: "over", done: true}
1
2
3
4
5
6
如以上的程序，执行let test = testGenerator(10)的时候，创建一个了Generator对象，但是和代码并未执行，当我们执行test.next()，代码将会执行到let t = yield x暂停，等待对象重新调用next方法，当我们执行到test.next(1000).value的时候程序重新被激活，并将next中的参数，传到t中，并且执行到下面一个yield终，一直到知道程序结束。

在这里我们看next返回的结果是一个对象，包含两部分信息，一个是value，这是yield或者返回的值；还有一部分是done，如果仔细观察，我们可以发现当执行yield返回的时候，done的值为false，当程序完成执行以后，则done的值为true，其实这里的done就方法是否执行完成的标识。

yield*
yield*和yield类似，只不过他是可以自动解构，用法如下：

yield* [[expression]];
1
1
expression：是可遍历对象，可以是数组，也可以是另外一个Generator函数的执行表达式，等等

示例如下：

function* go(){
  yield* [1, 2, 3];
  yield* 'Hi';
  yield* Array.from(arguments);
}

var g = go(4, 5);

console.log(g.next()); // {value: 1, done: false}
console.log(g.next()); // {value: 2, done: false}
console.log(g.next()); // {value: 3, done: false}
console.log(g.next()); // {value: "H", done: false}
console.log(g.next()); // {value: "i", done: false}
console.log(g.next()); // {value: 4, done: false}
console.log(g.next()); // {value: 5, done: false}
console.log(g.next()); // {value: undefined, done: true}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
运行结果：

{value: 1, done: false}
{value: 2, done: false}
{value: 3, done: false}
{value: "H", done: false}
{value: "i", done: false}
{value: 4, done: false}
{value: 5, done: false}
{value: undefined, done: true}
1
2
3
4
5
6
7
8
Generator函数
这里不需要介绍了，上面两个例子中的方法还记的是怎么声明的吗？

function* go() {

}

1
2
3
4
没错！正如我们刚开始的时候所说的，这种就是Generator函数。