ES6特性-Generators

what

你可以将Generators认为是可以中断进程、恢复进程的代码段,like this:

function* genFunc() {
    // (A)
    console.log('First');
    yield;
    console.log('Second');
}
  • function*是一个新的Generators函数的关键字。
  • yield是一个可以暂停它自己的操作符。
  • Generators还可以通过yield接收和发送。
  • 当调用生成器函数genFunc()时,您将获得可用于控制进程的生成器对象genObj:
const genObj = genFunc();

Generators的概念

Generators are defined with function*.

function* foo(x) {
    yield x + 1;

    var y = yield null;
    return x + y;
}

结果:

var gen = foo(5);
gen.next(); // { value: 6, done: false }
gen.next(); // { value: null, done: false }
gen.send(2); // { value: 7, done: true }

把这个方法贴到在线编辑器上运行了一下,打印出来的的y = 2,我就很不解,然后找了找资料,才得知:

<u·var y = yield; or var yield null;使用来接收.next(参数)方法中的参数的,也就是:这个参数传入生成器中,作为上一个阶段异步任务的返回结果,被函数体内的变量y接收。</u>

另外一个例子:

function* foo(x) {
  yield x+1;
  var y  = yield;
  console.log(`y=${y}`);
  return x + y ;
}

var gen = foo(5);
console.log(gen.next());
console.log(gen.next());
console.log(gen.next(4));

结果:

Object {
  "done": false,
  "value": 6
}
Object {
  "done": false,
  "value": undefined
}
"y=4"
Object {
  "done": true,
  "value": 9
}

Notes:

  • yield is allowed anywhere an expression is. This makes it a powerful construct for pausing a function in the middle of anything, such as foo(yield x, yield y), or loops.
  • Calling a generator looks like a function, but it just creates a generator object. You need to call next or send to resume the generator. send is used when you want to send values back into it. gen.next() is equivalent to gen.send(null). There's also gen.throw which throws an exception from within the generator.
  • Generator methods don't return a raw value, they return an object with two properties: value and done. This makes it clear when a generator is finished, either with return or simply the end of the function, instead of a clunky StopIteration exception was the old API.

-- 翻译的不好,直接上原文。

Generators的类型

  • Generator function declarations:
function* genFunc() { ··· }
 const genObj = genFunc();
  • Generator function expressions:
 const genFunc = function* () { ··· };
 const genObj = genFunc();
  • Generator method definitions in object literals:
 const obj = {
     * generatorMethod() {
         ···
     }
 };
 const genObj = obj.generatorMethod();
  • Generator method definitions in class definitions (class declarations or class expressions):
 class MyClass {
     * generatorMethod() {
         ···
     }
 }
 const myInst = new MyClass();
 const genObj = myInst.generatorMethod();

特性

  • 实现迭代
  • 简化异步代码
function fetchJson(url) {
    return fetch(url)
    .then(request => request.text())
    .then(text => {
        return JSON.parse(text);
    })
    .catch(error => {
        console.log(`ERROR: ${error.stack}`);
    });
}

上下是等价的

// es6
const fetchJson = co.wrap(function* (url) {
    try {
        let request = yield fetch(url);
        let text = yield request.text();
        return JSON.parse(text);
    }
    catch (error) {
        console.log(`ERROR: ${error.stack}`);
    }
});
// ECMAScript 2017
async function fetchJson(url) {
    try {
        let request = await fetch(url);
        let text = await request.text();
        return JSON.parse(text);
    }
    catch (error) {
        console.log(`ERROR: ${error.stack}`);
    }
}

Generator扮演的角色

  • Iterators - 数据生成器 每一个yield都可以通过next()返回一个数据,所以可以通过循环或者递归生成很多数据。
  • Observers - 数据消费者 yield可以通过next()返回数据,那么就可以在收到下一个数据之前暂停,来消费这些数据,然后再恢复继续接收数据。
  • Coroutines - 数据生成器和数据消费者

yield如何工作

function* genFunc() {
    yield 'a';
    yield 'b';
}

调用结果:

> const genObj = genFunc();
> genObj.next()
{ value: 'a', done: false }

> genObj.next()
{ value: 'b', done: false }

> genObj.next() // done: true => end of sequence
{ value: undefined, done: true }
  • yield不能在回调函数中使用。
function* genFunc() {
    ['a', 'b'].forEach(x => yield x); // SyntaxError
}

function* genFunc() {
    for (const x of ['a', 'b']) {
        yield x; // OK
    }
}

参考

写在后面

GitHub上集大家之力搞了一个前端面试题的项目,里面都是大家面试时所遇到的题以及一些学习资料,有兴趣的话可以关注一下。如果你也有兴趣加入我们的话,请在项目中留言。项目同时也可以在gitbook上查看。

InterviewLibrary-GitHub InterviewLibrary-gitbook

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android知识点总结

Android基于TCP的五子棋双人对战实现

20520
来自专栏Golang语言社区

Go Channel 详解

Channel是Go中的一个核心类型,你可以把它看成一个管道,通过它并发核心单元就可以发送或者接收数据进行通讯(communication)。

29220
来自专栏Spring相关

Springboot用官方建议访问Html页面并接传值

我们以前通常习惯用webapp来放置jsp页面,但是到了Springboot中,官方建议用Static文件夹来存放及静态的资源,

81040
来自专栏.NET后端开发

Highcharts使用指南

摘要 Highcharts图表控件是目前使用最为广泛的图表控件。本文将从零开始逐步为你介绍Highcharts图表控件。通过本文,你将学会如何配置Highcha...

34050
来自专栏为数不多的Android技巧

Android Studio你不知道的快捷键(二)

在Android Studio你不知道的快捷键(一)里面,主要讲述了一些窗口操作的快捷键还有补全参数提示等,这一篇会分享一些代码代码编辑的快捷键。(默认Keym...

12620
来自专栏LanceToBigData

XML(一)XML大揭秘

前言 每天都要学习很多新的知识,比你厉害的程序员比你还努力,那你混的下这口饭吗?所以不抱怨,坚持!接下来给大家分享的是xml。可能很多做开发的都遇到过xml, ...

21290
来自专栏PHP在线

PHP版的jQuery

个人认为,对于Web前端程序员和跟HTML和CSS打交道的人来说,jQuery是有史以来最伟大的发明。jQuery的出现使Web程序员的开发效率突飞猛进,不亚于...

40230
来自专栏雨过天晴

原 荐 PHP 在 Console 模式下的

18410
来自专栏lhyt前端之路

从单向到双向数据绑定0.前言1.单向数据(代表:react)2.观察者模式3.双绑的中间枢纽——Object.defineproperty(代表:vue)4. 脏值检测(代表:angular1)前面说

用户最满意的,无非就是界面的操作能实事反应到数据。而实现这种的可以有双向数据绑定、单向数据流的形式。双向数据绑定是,ui行为改变model层的数据,model层...

20840
来自专栏Golang语言社区

【Go 语言社区】并发性

并发性 并发的特点是需要锁Lock和互斥Mutex。在Java中加锁和解锁是一个复杂过程代码如下: try { mutex.acquire(); try...

373110

扫码关注云+社区

领取腾讯云代金券