ES6学习笔记十五Generator函数

分类：ES6作者：编程之家用户

Generator函数是ES6中提供的一种异步解决方案，该函数同时也可以用来部署遍历器。

Generator函数的使用

Generator函数和普通的函数不一样，其function和函数名之间有个*，函数体内部用yield表达式来定义不同的状态。

function* gen(){

    yield 1;

    yield 2;

yield 3;

}

上面代码即为一个Generator函数，与普通函数一样，Generator函数也是在函数名后面加括号传入参数来调用参数的，但函数不会立即执行，需要使用next才会执行，且是执行到yield表达式后的那一句停止，等待下一个next。

function* gen(){

    yield 1;

    yield 2;

yield 3;

}

var g=gen()

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

g.next() // {value: 2, done: false}

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

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

如上面代码所示，每次调用next都会让函数往后执行，且返回一个对象，value为yield表达式后面的内容，done表示遍历是否结束，为true时就结束。

yield表达式

yield表达式是Generator函数中的暂停标志，若后面没有yield表达式，有return语句时，执行到return语句，返回value为return后面的内容的对象，没有return语句时，返回value为undefined的对象，done都为true。如果在两个yield表达式中间有return语句，则done会提前变为true。

function* gen(){

    yield 1;

    yield 2;

return 3;

    yield 4;

}

var g=gen();

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

g.next(); // {value: 2, done: false}

g.next(); // {value: 3, done: true}

g.next(); // {value: undefined, done: true}

上面代码可以看到，因为提前return了，所以在value为3时done就为true了，不会执行到下面的yield 4。

若yield表达式后面是一个表达式，那么会在next语句执行到这一句时才进行求值，即惰性求值。

function* gen() {

  yield  123 + 456;

}

像上面代码中，123+456就是在执行到这一句时才求值的。

当然，Generator函数里面可以没有yield语句，此时的Generator函数就变成一个暂缓执行的函数，当调用next时就会执行整个函数，但没调用和next之前，函数是不会执行的。

function* gen(){

    console.log('no yield');

}

var g=gen()

g.next();
// {value: undefined, done: true}

//  no yield

要注意的是，yield表达式只能在Generator函数中使用，在其他地方使用会报错。

(function (){

  yield 1;

})()

// Uncaught SyntaxError: Unexpected number

即使在Generator函数中，若在该函数中再嵌套了一个非Generator函数，而yield语句又在这个函数里面，则也会报错。

function* gen() {

    let arr = [1, 2, 3];

    arr.map(function(val) {

        yield val;

    })

}

// Uncaught SyntaxError: Unexpected identifier

上面代码中，yield语句实际上是在map参数中的函数的，而该函数不是一个Generator函数，所以在声明函数的时候就报错了。

另外，yield若要用在另一个表达式中，必须放在圆括号内，否则会报错。

function* gen(){

console.log(2+yield 3 );

}

// Uncaught SyntaxError: Unexpected identifier

function* gen(){

    console.log(2+(yield 3));

}

// 不报错

Generator的方法

Generator函数返回一个遍历器，该遍历器有三个方法使函数走出“冻结”的状态。

next方法

该方法使Generator函数执行到下一条yield语句，若之后没有yield语句，则执行到函数尾部，第一个次调用next时算启用Genertor函数。

该方法返回一个有value属性和done属性的对象，value属性的值为yield表达式后的内容，done表示遍历是否已经结束。

function* gen(){

    yield 1;

    yield 2;

    return 3;

}

var g=gen();

g.next()

// {value: 1, done: false}

g.next()

// {value: 2, done: false}

g.next()

// {value: 3, done: true}

g.next()

// {value: undefined, done: true}

throw方法

该方法会在Generator函数体外抛出一个错误，在函数体内处理。

function* gen(){

    try{

        yield;

    }catch(e){

        console.log(`Generator内部  ${e}`);

    }

}

var g=gen();

g.next();

try{

g.throw('error');

}catch(e){

console.log(`Generator 外部  ${e}`)

}

// Generator内部  error

上面代码可以看到，最后throw抛出的错误被Generator函数内部的catch捕获了。同时也可以看到，throw方法的参数被catch获取到了，若没有传入参数，catch获取的是undefined。

若Generator方法内部没有try catch语句，那么错误要在外部捕获

function* gen(){

    yield;

}

var g=gen();

g.next();

try{

g.throw('error');

}catch(e){

console.log(`Generator 外部  ${e}`)

}

// Generator 外部  error

若内部和外部都没有部署try...catch语句，那么将会报错。

function* gen(){

    yield;

}

var g=gen();

g.next();

g.throw('error');

// Uncaught error

要注意的是，throw方法使用时会执行下一条yield语句，即顺带执行一条next方法

var gen = function* gen(){

  try {

    yield console.log('a');

  } catch (e) {

// ...  

}

  yield console.log('b');

  yield console.log('c');}

var g = gen();

g.next() // a

g.throw() // b

g.next() // c

上面代码中，throw方法抛出错误的同时执行了下一条yield语句console.log(‘b’)，因为是在try...catch语句中抛出错误的，所以不影响下面语句的执行。

return方法

该方法返回给定的值并终结函数的遍历。即返回一个value为传入的参数，done为true的对象。

function* gen(){

    yield 1;

    yield 2;

    return 3;

}

var g=gen()

g.next()

// {value: 1, done: false}

g.return(4)

// {value: 4, done: true}

g.next()

// {value: undefined, done: true}

若Generator函数中有try...finally语句，则return方法使用后会等到finally块内的语句执完后才停止遍历。return方法的参数作为最后一次遍历返回的对象的value值。

function* gen(){

    yield 1;

    try{

        yield 2;

        yield 3;

    }finally{

     yield 4;

        yield 5;

    }

    yield 6;

}

var g=gen()

g.next()

// {value: 1, done: false}

g.next()

// {value: 2, done: false}

g.return(10)

// {value: 4, done: false}

g.next()

// {value: 5, done: false}

g.next()

// {value: 10, done: true}

g.next()

// {value: undefined, done: true}

上面代码中，在使用return方法后返回了value为finally语句中第一个yield表达式后的值的对象，且done为false，说明遍历还未结束。

yield*表达式

要在一个Generator函数里面调用另一个Generator函数，像普通函数一样调用是无效的。因为这样的调用并没有让Generator函数开始执行。

function* foo() {

  yield 'a';

  yield 'b';

}

function* bar() {

  yield 'x';

  foo();

  yield 'y';

}

for (let v of bar()){

  console.log(v);

}

// "x"

// "y"

通过使用yield*表达式，就能在一个Generator函数里面调用另一个Generator函数。

function* bar() {

  yield 'x';

  yield* foo();

  yield 'y';

}

for (let v of bar()){

  console.log(v);}

// "x"

// "a"

// "b"

// "y"

实际上，yield*表达式后面不只是可以放另一个Generator函数，只要是有Iterator接口的结构，都可以放在其后。yield*其实是表示遍历后面的带Iterator的结构。

function* gen(){

    yield* [1,2,3];

}

//等同于

function* gen(){

    for (let i of [1,2,3])

        yield i;

}

var g=gen();

g.next()

//{value: 1, done: false}

g.next()

//{value: 2, done: false}

g.next()

//{value: 3, done: false}

g.next()

//{value: undefined, done: true}

由此可以看出，yield*表达式其实就是用一个for...of来遍历后面的结构，同上，字符串也同样可以。

function* gen(){

    yield* 'yield';

}

var g=gen()

g.next()

// {value: "y", done: false}

g.next()

// {value: "i", done: false}

g.next()

// {value: "e", done: false}

g.next()

// {value: "l", done: false}

g.next()

// {value: "d", done: false}

g.next()

// {value: undefined, done: true}

作为对象的Generator函数写法

let obj = {

  myGeneratorMethod: function* () {

// ···  

}};

Generator函数的一般写法如上代码，但也可以简写为下面的代码

let obj = {

  * myGeneratorMethod() {

    //···

  }};

Generator函数的this

Generator函数返回的遍历器是Generator函数的实例，会继承Generator函数的原型，但要注意的是，函数返回的是遍历器对象，不是this对象。

function* g() {

  this.a = 11;

}

let obj = g();

obj.next();

obj.a // undefined

上面代码中，函数g中在this对象上声明赋值了一个属性a，但使用obj那不到这个a。

同时，Generator函数不能使用new运算符一起使用，否则会报错。

function* gen(){

    yield 1;

    yield 2;

}

new gen()

// Uncaught TypeError: gen is not a constructor

上面代码可以看到，报错提示gen不是一个构造函数。

参考自阮一峰的《ECMAScript6入门》

原文地址：https://blog.csdn.net/zemprogram/article/details/86592279

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

ES6模块的import和export用法总结
原文连接：https://www.cnblogs.com/dupd/p/5951311.htmlES6之前已经出现了js模块加载的方案，最主要的是CommonJS和AMD规范。commonjs主要应用于服务器，实现同步加载，如nodejs。AMD规范应用于浏览器，如requirejs，为异步加载。同时还有CMD规范，为同步加载方案如seaJS。ES6在语言规格的层面上，实现了模块功能，而且...
浅谈Es6中import * as xxx from几种基本用法
以为Es6，javascript第一次支持了module。ES6的模块化分为导出（export）与导入（import）两个模块，其中在项目中，我们会经常看到一种用法import * as obj from，这种写法是把所有的输出包裹到obj对象里。示例一 1 2 3 4 5 6 7 // index.js export function fn1(data){ console.log(1) } export f.
ES6系列文章 异步神器async-await
视频讲解关于异步处理，ES5的回调使我们陷入地狱，ES6的Promise使我们脱离魔障，终于、ES7的async-await带我们走向光明。今天就来学习一下 async-await。async-await和Promise的关系经常会看到有了 async-await、promise 还有必要学习吗、async await优于promise的几个特点，接收了这些信息后，就蒙圈了。现在才知道...
TypeScript看完就会了
TypeScript什么是TypeScript?TypeScript是由微软开发的一款开源的编程语言TypeScript是JavaScript的超集，遵循最新的ES5 ES6规范，TypeScript扩展了JavaScript的语法TypeScript更像后端 Java c# 这样的面向对象语言可以让js开发大型企业项目谷歌也在大力支持TypeScript的推广，React ，VUE 都集成了TypeScriptTypeScript安装安装-- 安装npm install -g type
typeScript 变量名 冒号 类名 ＜–这种写法什么意思?
export class AppComponent { title = 'Tour of heroes'; hero: Hero = { id: 1, name: '张三' };}export class Hero { id: number; name: string;}就是这一段,看起来有点晕,这里是实例化一个Hero类型的对象hero,还是创建一个变量?后面是赋值,但是不知道什么意思?hero: Hero = { id: 1, na.
用 async/await 来处理异步
用 async/await 来处理异步昨天看了一篇vue的教程，作者用async/ await来发送异步请求，从服务端获取数据，代码很简洁，同时async/await 已经被标准化，是时候学习一下了。先说一下async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数async function timeout() {return 'hello world'
es6之解构赋值
es6的语法已经出了很长的时间了，在使用上也可以通过babel这类的编译工具转译为浏览器可以识别的es5的语法，但是依旧有很多开发在写代码的时候，依旧没有用es6的语法，而是习惯使用老的语法，这篇文章主要会介绍解构赋值基本用法以及在实际使用场景中相比es5语法的优势，让大家从根本上了解es6语法的优势基本用法数组解构让我们一起先来看数组解构的基本用法：let [a, b, c] ...
TypeScript 定义函数的几种写法
参考链接1 参考链接2写法1 - 使用 function 关键字function greeter(fn: (a: string) => void) { fn("Hello, World");}function printToConsole(s: string) { console.log(s);}greeter(printToConsole);(a: string) => void上述语法的含义：表示一个函数，接收一个字符串作为输入参数，没有返回参数。可
es6
ES6简介-ECMAScript是javascript标准-ES6就是ECMAScript的第6个版本-ECMAScript6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。ES6新增加的功能：1.let
ES6的函数写法总结，一看就会！
ES6  在ES5的基础上增加了一些新的特性和写法，特别在函数写法上，增加了箭头函数 1.正经的函数写法//普通的传递值的写法functionsum1(x,y){returnx+y;}constres=sum1(2,3);console.log(res);//传递对象的方式,调用时需要传递一个对象过去function
JavaScript中的es5及es6新增的内容
ES5及ES6es表示ECMASCript，他是从es3，es5，es6，es5是2009.12月发布的，es6是2015.6月发布的。vue2完全支持es5的（vue3完全支持es6的），react完全支持es6es5的新特性严格模式（对应的相反的称为怪异模式）'usestrict'//一般用于相关的设计上面书写一个严格模式底下的代码就需要按照严格模
ES5及ES6
ES5的严格模式所谓严格模式，从字面上就很好理解，即更严格的模式，在这种模式下执行，浏览器会对JS的要求更苛刻，语法格式要求更细致，更符合逻辑。怪异模式：就是我们之前一直使用的开发模式，就叫怪异模式。因为很多时候出来的结果是非常怪异的，所以才称之为怪异模式。'usestrict'//一般用
es6 export和export default的区别
相同点export与exportdefault均可用于导出常量、函数、文件、模块可在其它文件或模块中通过import+(常量|函数|文件|模块)名的方式，将其导入，以便能够对其进行使用不同点一、在一个文件或模块中，export、import可以有多个，exportdefault仅有一个//model.jsle
学习ES6[尚硅谷二]笔记
24.class类 25.class中的extend 26.super关键字 27.super应用 28.class属性 30.静态成员和实例成员 31.构造函数问题 32.构造函数原型 33.原型链 34.js查找机制 35.原型对象中this指向 36.扩展内置对象方法 37.call方法 38.借用父构造函数
【JS高级】es6
什么是ES6ES的全称是ECMAScript,它是由ECMA国际标准化组织,制定的一项脚本语言的标准化规范。泛指2015年发布的es2015版极其后续版本ES6中新增语法letES6中新增的用于声明变量的关键字。注意:使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特
JavaScript ES6新增
命名修饰符let：不能重复声明变量、块级作用域leta=1;leta=2;//报错const：初始化常量，必须给初始值，否则报错、在同一个作用域内，const定义的常量不能修改其值、块级作用域consta=10a=100//报错，不能重复声明解构constobj={name:'jack'age:18sex:'
ES6
ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。1{2leta=10;3varb=1;4}56a//ReferenceError:aisnotdefined.7b//1上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用
ES6基础知识解构赋值
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatib
es6 正则的扩展
一，RegExp构造函数es5中，RegExp构造函数的参数有两种情况。1，参数是字符串，第二个参数表示正则表达式的修饰符（flag）。2，参数是一个正则表达式，返回一个原有正则表达式的拷贝。es6中，如果RegExp构造函数第一个参数是一个正则对象，那么可以使用第二个参数指定修饰符。而
ES6学习笔记二-字符串的扩展
一、字符的Unicode表示法JavaScript允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的Unicode码点。表示法只限于码点在\u0000~\uFFFF之间的字符，超过该范围需要用两个双字节表示ES6改进：将码点放入大括号，就能正确解读该字符。转换参考：https://blog.csdn.net/hezh1994/ar
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot