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

原创 2018年04月15日 09:19:53

记笔记,主要是为了提高学习效率,避免只看不动手,领略不到书的精髓,忽略到书中的重点知识,本文学习主要是根据阮一峰大神走的,很感谢阮一峰大神的无私奉献。如果想要了解更详细的关于本节的内容可以看阮一峰大神的ES6官网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命令一起用,会报错。

版权声明: https://blog.csdn.net/lhjuejiang/article/details/79946350

ES6入门二(常见的面试点)

项目中对应的代码github的地址:https://github.com/Barretem/ES6_demo_list5、面向对象es5类以及类的继承//父类 function User(name, ...
  • barret007
  • barret007
  • 2018-03-08 23:37:07
  • 73

ES6学习总结

  • 2017年08月14日 10:54
  • 1.59MB
  • 下载

JavaScript基于ES6的重点知识点

JavaScript基于ES6的重点知识点 定义变量多用let,少用var 作为全局是平等的。 在函数里也是平等的。 在块中不同。 let 只是在 for 循环中可见,var 却是在整个函数都是可见...
  • dy_qin
  • dy_qin
  • 2017-12-07 17:46:01
  • 97

ES6学习——总结

JS从ES3.1到ES5再到ES6,可以说有了本质性的进步,API越来越多,语言特性也越来越丰富,这些都是随着Web的发展而来。以前的JS基本只能用在桌面PC网页端,但现在JS真是无处不在,后端有no...
  • kittyjie
  • kittyjie
  • 2016-02-08 16:30:30
  • 982

es6入门基础总结

最近在学习javascript es6,也在看javascript es6标准入门,所以结合了这本书的内容写了一个读书笔记,希望对入门学习ES6的同学有点帮助。       运...
  • qq_32506555
  • qq_32506555
  • 2016-07-29 21:11:01
  • 574

es6知识点总结

  • 2017年07月11日 15:42
  • 103KB
  • 下载

ES6学习笔记之Generator 函数的语法

简介基本概念Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。本章详细介绍Generator 函数的语法和 API,它的异步编程应用请看《Generator ...
  • Real_Bird
  • Real_Bird
  • 2017-02-22 16:42:42
  • 856

ECMAScript 6 学习系列课程 (ES6 Generator 函数的使用)

在学习ES6的过程中,个人认为Generator稍微会有些难以理解,其实Generator函数是ES6提供的一种异步编程解决方案,语法行为与传统函数完全不同。我们从表面上看,Generator函数是一...
  • jiangbo_phd
  • jiangbo_phd
  • 2016-07-04 16:17:16
  • 2615

ES6-Generator与异步操作

Generator与异步操作 1.Generator概念 可以把Generator理解成一个状态机(好像React中有很多state),封装了多个内部状态。执行Generator返回的是一个遍历器对...
  • qiqingjin
  • qiqingjin
  • 2016-04-22 16:52:11
  • 2067

用ES6 Generator替代回调函数

目前,已经有很多文章讨论过了如何使用ES6 generators来取代JavaScript中经常遇到的“回调金字塔”。但是,其中提到的绝大多数方法都需要依赖于某个库,而对于其中的原理却提及甚少。 ...
  • sinat_17775997
  • sinat_17775997
  • 2017-04-14 10:32:17
  • 806
收藏助手
不良信息举报
您举报文章:ES6之Generator(3)知识点总结(十)
举报原因:
原因补充:

(最多只允许输入30个字)