ES6生成器介绍和用法 _ES6函数

本文概述

收益声明
next()方法
生成器对象
生成器中的返回语句
带有for…of循环的生成器函数

生成器(或生成器函数)是ES6中引入的新概念。它为你提供了一种处理迭代器和函数的新方式。
ES6生成器是另一种函数, 可以在中间暂停一次或多次, 然后可以恢复。调用标准函数时, 控件将一直处于被调用函数的状态, 直到返回为止, 但是ES6中的生成器允许调用者函数控制被调用函数的执行。

文章图片
生成器与常规函数相同, 除了：

当生成器被调用时, 它不会运行其代码。而是返回一个特殊对象, 称为” 生成器对象” , 用于管理执行。
生成器函数可以随时将控制权返回(或让出)控制权给调用者。
与常规函数不同, 生成器可以根据需要一个接一个地返回(或产生)多个值。

语法
生成器函数的语法几乎与常规函数相同。唯一的实际区别是, 生成器函数通过在函数关键字后缀星号(*)来表示。
在以下语法中, 我们向你展示了一些定义生成器函数的有效方法：

function* mygenfun() // Valid { yield 1; yield 2; ... ... }function *mygenfun() // Valid { yield 1; yield 2; ... ... }function*mygenfun() // Valid { yield 1; yield 2; ... ... }

例子

function* gen() { yield 100; yield; yield 200; } // Calling the Generator Function var mygen = gen(); console.log(mygen.next().value); console.log(mygen.next().value); console.log(mygen.next().value);

【ES6生成器介绍和用法】输出如下

100 undefined 200

收益声明 yield语句将中止函数执行, 并将一个值发送回调用方。它保留了足够的状态, 以使函数可以从中断处恢复。恢复后, 该函数将在上次运行yield之后立即继续执行。它可以产生一系列值。
next()方法在上面的示例中, 我们使用了next()方法, 这是生成器的主要方法。当你将next()方法与参数一起调用时, 它将恢复生成器函数的执行, 并用next()方法中的参数替换暂停执行的生成表达式。
next()方法的结果始终是一个具有两个属性的对象：

值：它是产生的值。
done：这是一个布尔值, 如果函数代码已完成, 则为true。否则, 它给出false。

例如, 在这里, 我们正在创建一个生成器函数并获取其产生的值。
例子

function* show() { yield 100; }var gen = show(); //here 'gen' is a generator object console.log(gen.next()); // { value: 100, done: false }

输出如下

{ value: 100, done: false }

生成器对象生成器函数返回生成器对象。生成器对象是生成器函数的实例, 它既符合Iterable接口又符合Iterator接口。
可以通过调用next()方法或在循环内使用生成器对象来使用生成器对象。生成器对象是一个迭代器；这就是为什么可以在for…of循环或接受迭代的其他函数中使用它的原因。
在上面的next()方法示例中, 变量gen是生成器对象。
生成器中的返回语句 Return用于将指定值发送回其调用方。它用于结束函数调用执行, 并将结果返回给调用方。在函数内, 在return语句之后定义的语句不会执行。这就是为什么return语句应该是函数的最后一条语句。
让我们尝试通过一个示例来了解生成器中的return语句：
例子

function* myGen(){ yield 'First yield statement'; yield 'Second yield statement'; return 'Return statement'; yield 'Second yield statement'; } let genobj = myGen(); console.log(genobj.next()); //returns {value: 'First yield statement', done: false}console.log(genobj.next()); //returns {value: 'Second yield statement', done: false}console.log(genobj.next()); //returns {value: 'Return statement', done: true}console.log(genobj.next()); //returns {value: undefined, done: true}

输出如下

{ value: 'First yield statement', done: false } { value: 'Second yield statement', done: false } { value: 'Return statement', done: true } { value: undefined, done: true }

在上面的示例中, 我们定义了一个生成器函数myGen(), 其中定义了四个语句, 包括三个yield语句和return语句。每当我们调用next()方法时, 函数都会继续执行, 直到命中下一个yield语句为止。
你会注意到第一个next()方法如何返回” First yield statement” 。当我们第二次调用next()方法时, 它将恢复执行并返回” Second yield statement” 。再次调用next()方法后, 该函数不再找到yield语句并返回” Return语句” 。但是当我们第四次调用next()方法时, 它将不考虑yield语句, 并且返回undefined, 因为它是在return语句之后编写的。
你可以在上面示例的输出中看到, next()方法在return语句之后不考虑任何语句。
带有for…of循环的生成器函数将for…of循环与生成器函数一起使用会减少代码行。在以下示例中, 你可以看到相同的插图。
例子

"use strict" function* vowels() { // here the asterisk marks this as a generator yield 'A'; yield 'E'; yield 'I'; yield 'O'; yield 'U'; } for(let alpha of vowels()) { console.log(alpha); }

输出如下