从零开始学_JavaScript_系列（55）——Generator函数(3)yield*表达式

4、yield*表达式

4.1、基础

简单来说，yield*表达式就是在一个Generator函数内嵌套另外一个Generator函数。

于是在遍历的过程中，当在第一个Generator函数内遇见第二个Generator函数后，就会先停止遍历第一个Generator函数，先遍历完第二个Generator函数，然后再恢复。

如代码：

let g1 = function*() {    yield 1;    yield* g2();    yield 2;}let g2 = function*() {    yield "a";    yield "b";}let foo = g1();for (let i of foo) {    console.log(i)}// 1// a// b// 2

如上，简单暴力通俗易懂。

假如不是yield* g2()，而是yield g2()会发生什么事情呢？

1. 首先，g2()会返回一个遍历器对象，毫无疑问；
2. 其次，yield表达式会使得该遍历器对象作为next的返回值来返回；
3. 因此最终结果是1——》g2()的遍历器——》2，代码就略了不写

4.2、递归

因为yield*表达式的存在，因此遍历器可以递归自己，代码十分简单：

let g1 = function*(count) {    console.log("count:" + count)    if (count > 3) {        return    }    yield 1;    yield 2;    yield* g1(count + 1);}let foo = g1(1);for (let i of foo) {    console.log(i)}// count:1// 1// 2// count:2// 1// 2// count:3// 1// 2// count:4

4.3、有Iterator接口的数据结构

yield*表达式可以遍历Generator函数，原因是Generator函数有Iterator接口，相当于对Generator函数的遍历器执行了for...of；

那么yield*表达式能不能遍历非Generator函数，但是也有Iterator接口的数据结构呢？显然也是可以的。

如代码：

let g1 = function*() {    yield* [1, 2]    yield* "ab"}let foo = g1();for (let i of foo) {    console.log(i)}// 1// 2// "a"// "b"

也可以对自定义数据结构生效，只要他有Iterator接口即可：

function Test() {    let arr = [3, 2, 1]    function Iterator() {        let index = 0        // 该对象有next方法，调用后返回一个当前索引下的值        this.next = function () {            let obj = {}            if (index < 3) {                obj.value = arr[index]                obj.done = false                index++            } else {                obj.value = undefined                obj.done = true            }            return obj        }        // 返回他自己        return this    }    // 遍历器接口    this[Symbol.iterator] = function () {        // 创建一个遍历器对象（Iterator不是关键词）        let temp = new Iterator()        // 返回他        return temp    }}let m = new Test()let g1 = function*() {    yield* m}let foo = g1();for (let i of foo) {    console.log(i)}// 3// 2// 1

4.4、返回值

1. Generator函数是返回值是他的遍历器；
2. 遍历器的返回值是对象，有value和done属性；
3. yield表达式的返回值是根据遍历器的next的参数决定；
4. 那么yield*表达式的返回值是什么呢？

答案是根据被遍历函数的return所决定；

最简单的示例如代码：

let g1 = function*() {    console.log(yield* g2())}let g2 = function*() {    yield 'a';    return 'b';}let foo = g1();for (let i of foo) {    console.log(i)}// 'a'// 'b'

那么，是否还记得Generator函数的返回值在什么时候起作用？

可以回去看看1.1，return是在done第一次变为true时，value属性的值。

因此，yield*的值，取决于遍历器在遍历结束，done变为true时，value属性的值，如以下代码自定义了一个数据结构，这个数据结构在done变为true时是有值的。

function G() {    let arr = [3, 2, 1]    function Iterator() {        let index = 0        this.next = function () {            let obj = {}            if (index < 3) {                obj.value = arr[index]                obj.done = false                index++            } else {                // 这里与之前的例子不同                obj.value = '自定义数据结构的done变为true了'                obj.done = true            }            return obj        }    }    this[Symbol.iterator] = function () {        let temp = new Iterator()        // 返回他        return temp    }}let g = new G()let g1 = function*() {    console.log(yield* g)}let foo = g1();for (let i of foo) {    console.log(i)}// 3// 2// 1// "自定义数据结构的done变为true了"