ES6之Generator(3)知识点总结（十）

心已赠人 2022-05-27 08:22 205阅读 0赞

记笔记，主要是为了提高学习效率，避免只看不动手，领略不到书的精髓，忽略到书中的重点知识，本文学习主要是根据阮一峰大神走的，很感谢阮一峰大神的无私奉献。如果想要了解更详细的关于本节的内容可以看阮一峰大神的ES6官网[http://es6.ruanyifeng.com/\#docs/generator][http_es6.ruanyifeng.com_docs_generator]

yield\*表达式

如果在Generator函数内部调用另一个Generator函数，默认情况是没有效果的。这个就需要用到yield\*表达式，用来在一个Generator函数里面执行另一个Generator函数。

var g = function *(){
        yield "leo";
        yield "lalalal";
    
    }
    var p = g();
    var g2 = function * (){
        yield "donna";
        yield* p;
        yield "henory";
    }
    var p2 = g2();
    console.log(p2.next());//{ value: "donna", done: false }
    console.log(p2.next());//{ value: "leo", done: false }
    console.log(p2.next());//{ value: "lalalal", done: false }
    console.log(p2.next());//{ value: "henory", done: false }
    console.log(p2.next());//{ value: "undefined", done: true }

注意：如果yield表达式后面跟的的是一个遍历器对象，需要在yield表达式后面加上星号，表明它返回的是一个遍历器对象，这被称为yield\*表达式。

yield\*表达式后面的Generator函数（没有return语句时），等同于在Generator函数内部，部署一个for...of循环。

如果yield\*表达式后面的Generator函数有return语句时，需要用var value = yield\* iterator 的形式获取return语句的值

var g = function *(){
        yield "leo";
        yield "lalalal";
        return "over";
    
    }
    var p = g();
    
    
    var g2 = function * (){
        yield "donna";
       var value = yield*p;
      // console.log(value);
        yield "henory";
    }
    var p2 = g2();
    console.log(p2.next());
    console.log(p2.next());
    console.log(p2.next());
    console.log(p2.next());
    console.log(p2.next());
    //{ value: "donna", done: false }
    //{ value: "leo", done: false }
    //{ value: "lalalal", done: false }
    // over
    //{ value: "henory", done: false }
    //{ value: "undefined", done: true }

如果yield\*后面跟着一个数组，由于数组原生支持遍历器，因此就会遍历数组成员，如果yield表达式后面跟一个数组，返回的是整个数组

var g2 = function * (){
        yield "donna";
       yield* ["leo","momo"];
       yield [1,2,3];
        yield "henory";
    }
    var p2 = g2();
    console.log(p2.next());//{ value: "donna", done: false }
    console.log(p2.next());//{ value: "leo", done: false }
    console.log(p2.next());//{ value: "momo", done: false }
    console.log(p2.next());//{ value: [1,2,3], done: false }
    console.log(p2.next());//{ value: "henory", done: false }

实际上，任何数据结构只要有Iterator接口，就可以被yield\*遍历。（数组、类数组、字符串、Map数据结构、Set数据结构）

如果一个对象的属性是Generator函数，可以在这个属性的前面加星号，表示这个属性是一个Generator函数

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

[http_es6.ruanyifeng.com_docs_generator]: http://es6.ruanyifeng.com/#docs/generator

发表评论取消回复

表情：

评论列表（有 0 条评论，205人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6知识点总结

声明变量 let 不能重复声明块级作用域可修改let变量的值， const 不能重复声明块级作用域不能修改const 变量的值 2. 箭头函数

朱雀/ 2023年08月17日 16:58/ 0 赞/ 88 阅读

相关 ES6知识点总结

面向对象编程介绍面向过程和面向对象的对比面向过程优点：性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。缺点：没有面

阳光穿透心脏的1/2处/ 2022年12月26日 07:28/ 0 赞/ 162 阅读

相关 ES6-ES2020前端JS知识点总结

1. 使用const或者let定义的变量需要先声明，不允许重复声明。 const // 定义静态变量 --> 定义之后不允许修改 let // 定义局部

淩亂°似流年/ 2022年12月17日 07:27/ 0 赞/ 278 阅读

相关 ES6之Class类知识点总结（十三）

好的文章就要分享出来，让更多的小伙伴看到、嗯、继续推荐阮一峰大神的ES6文章，真的很棒，关于Class类的知识，想要了解的更清楚的建议到大神的官网走一走[http://es6.

「爱情、让人受尽委屈。」/ 2022年05月27日 11:42/ 0 赞/ 209 阅读

相关 ES6之async函数(1)知识点总结（十二）

每天集中精力学一会ES6，效果还是蛮好的，嗯，跟着阮一峰大神学功夫喽，如果你也见识见识阮一峰大神的神功，请点击[http://es6.ruanyifeng.com/\docs/

待我称王封你为后i/ 2022年05月27日 10:20/ 0 赞/ 242 阅读

相关 ES6之Generator函数（4）知识点总结（十一）

Generator函数的数据交换和错误处理。 Generator函数可以暂停执行和恢复执行，这是它能封装异步任务的根本原因。除此之外，它还有两个特性，使他可以作为异步编程的完

短命女/ 2022年05月27日 09:12/ 0 赞/ 210 阅读

相关 ES6之Generator(3)知识点总结（十）

记笔记，主要是为了提高学习效率，避免只看不动手，领略不到书的精髓，忽略到书中的重点知识，本文学习主要是根据阮一峰大神走的，很感谢阮一峰大神的无私奉献。如果想要了解更详细的关于本

心已赠人/ 2022年05月27日 08:22/ 0 赞/ 206 阅读

相关 ES6之Generator(2)知识点总结（九）

记笔记，主要是为了提高学习效率，避免只看不动手，领略不到书的精髓，忽略到书中的重点知识，本文学习主要是根据阮一峰大神走的，很感谢阮一峰大神的无私奉献。如果想要了解更详细的关于本

朱雀/ 2022年05月27日 07:38/ 0 赞/ 235 阅读

相关 ES6之Generator(1)知识点总结（八）

学ES6的时候，我一般会先看一些讲ES6的视频，对要学的概念有个大致的理解之后，再来看阮老师的文章，嗯、每次都会有，原来如此的感觉，阮老师讲的真的很详细，也很好理解，整理一遍是

素颜马尾好姑娘i/ 2022年05月27日 06:51/ 0 赞/ 217 阅读

相关 ES6之Promise对象知识点总结（七）

还是要强调一下，我的ES6学习主要参考的是阮一峰大神的书，作笔记的目的，就是把对于我来说比较重要或者易错的点整理出来方便自己再次学习有所偏重，真的对这些不懂的请看原文：[htt

待我称王封你为后i/ 2022年05月27日 03:49/ 0 赞/ 248 阅读