ES6语法之Generator

Vultr 发布于2019-08-22 14:04 / 551人阅读

摘要：不同的是，调用函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，也就是上一章介绍的遍历器对象。下一步，必须调用遍历器对象的方法，使得指针移向下一个状态。

Generator 函数

每当函数被调用时，JavaScript 引擎就会在函数顶部启动，并运行每行代码，直到到达底部。无法中途停止运行代码，并稍后重新开始。一直都是这种“运行到结束”的工作方式.

如果我们希望能够中途暂停运行函数，则需要使用 ES6 中新提供的一种函数，叫做 generator（生成器）函数！我们来看一个示例：

function* getEmployee() {
    console.log("the function has started");

    const names = ["Amanda", "Diego", "Farrin", "James"];

    for (const name of names) {
        yield name;
    }

    console.log("the function has ended");
}

注意到 function 关键字后面的星号（即 *）了吗？星号表示该函数实际上是生成器！

关键字 yield 是 ES6 中新出现的关键字。只能用在生成器函数中。yield 会导致生成器暂停下来。函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。

现在看看当我们尝试运行该函数时，会发生什么：

getEmployee();

// this is the response I get in Chrome:
getEmployee {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}

结果是控制台中没有输出我们所期待的，怎么回事呢？

事实上，生成器被调用时，它不会运行函数中的任何代码，而是创建和返回迭代器。该迭代器可以用来运行实际生成器的内部代码。

Generator 函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。不同的是，调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，也就是上一章介绍的遍历器对象（Iterator Object）。

下一步，必须调用遍历器对象的next方法，使得指针移向下一个状态。也就是说，每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。换言之，Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。

const generatorIterator = getEmployee();
 generatorIterator.next();
 //{value: "Amanda", done: false}
 
 generatorIterator.next();
 //{value: "Diego", done: false}
 
 generatorIterator.next();
 //{value: "Farrin", done: false}

 generatorIterator.next();
 //{value: "James", done: false}
 
 generatorIterator.next();
 //{value: "undefined", done: true}

我们可以使用关键字 yield 从生成器中获取数据。我们还可以将数据发送回生成器中。方式是使用 .next() 方法：

yield表达式本身没有返回值，或者说总是返回undefined。next方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值。

 function* createSundae() {
    const toppings = [];

    toppings.push(yield);
    toppings.push(yield);
    toppings.push(yield);

    return toppings;
}
var it = createSundae();
it.next("hot fudge");
it.next("sprinkles");
it.next("whipped cream");
it.next().value();
// ["sprinkles","whipped cream",undefined]

使用数据调用 it.next("hot fudge");会将该数据发送到生成器函数中上次离开的地方。它会将 yield 关键字替换为你提供的数据。

云服务器 GPU云服务器 Generator generator使用 generator数据类型 yeoman-generator

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92823.html

ES6&ES7中的异步之Generator的语法

摘要：第二次同理，遇到了第二个函数会停下来，输出的遍历器对象值为，的值依然是。比如返回的遍历器对象，都会有一个方法，这个方法挂在原型上。这三个函数共同的作用是让函数恢复执行。 Generator的语法 generator的英文意思是生成器简介关于Generator函数，我们可以理解成是一个状态机，里面封装了多种不同的状态。 function* gener(){ yield hel...

djfml 2019-08-21 16:57 评论0 收藏0
ES6 之 Iterator&Generator

摘要：可迭代对象就具有属性，它是一种与迭代器密切相关的对象。它通过指定的函数可以返回一个作用于附属对象的迭代器。迭代器特点每次调用方法时，返回一个数组，数组中两个元素，分别表示键和值。示例之输出输出输出之迭代器特点返回集合中存在的每一个键。 Iterator由来不推荐Iterator方法。 Iterator 函数是一个 SpiderMonkey 专有特性，并且会在某一时刻被删除。有一点，需...

xietao3 2019-08-23 18:40 评论0 收藏0
ES6 系列之我们来聊聊 Async

摘要：标准引入了函数，使得异步操作变得更加方便。在异步处理上，函数就是函数的语法糖。在实际项目中，错误处理逻辑可能会很复杂，这会导致冗余的代码。的出现使得就可以捕获同步和异步的错误。如果有错误或者不严谨的地方，请务必给予指正，十分感谢。 async ES2017 标准引入了 async 函数，使得异步操作变得更加方便。在异步处理上，async 函数就是 Generator 函数的语法糖。 ...

Songlcy 2019-08-23 12:30 评论0 收藏0
探索Javascript 异步编程

摘要：因为浏览器环境里是单线程的，所以异步编程在前端领域尤为重要。除此之外，它还有两个特性，使它可以作为异步编程的完整解决方案函数体内外的数据交换和错误处理机制。 showImg(https://segmentfault.com/img/bVz9Cy); 在我们日常编码中，需要异步的场景很多，比如读取文件内容、获取远程数据、发送数据到服务端等。因为浏览器环境里Javascript是单线程的，...

Salamander 2019-08-22 10:35 评论0 收藏0
使用JavaScript ES6的新特性计算Fibonacci（非波拉契数列）

摘要：采用的生成非波拉契数列提供了原生的支持，语法非常有特色，关键字后面紧跟一个星号。的详细介绍参考官网先看如何用这个黑科技重新实现非波拉契树立的生成。在这个内部，我们定义了一个无限循环，用于计算非波拉契数列。程序员面试系列 Java面试系列-webapp文件夹和WebContent文件夹的区别？程序员面试系列：Spring MVC能响应HTTP请求的原因？ Java程序员面试系列-什么...

yanbingyun1990 2019-08-23 12:29 评论0 收藏0