ES6生成器用途介绍（附示例）-百分百源码网

ES6生成器用途介绍（附示例）

发布时间：09/01 来源：未知浏览：关键词：

本篇文章给大家带来的内容是关于ES6生成器用途介绍（附示例），有必然的参照价值，有需要的伴侣可以参照一下，但愿对你有所帮忙。

概念

生成器是由生成器函数（ generator function ）运转后得到的，是可迭代的。

function* gen() { 
  yield 'a';
  yield 'b';
  yield 'c';
}

let g = gen(); 
// "Generator { }"

道理及简便使用

生成器有一个很大的特点，它可以暂停内部代码运转，返回一个值给外部函数。（暂停后不会阻挠其他代码运转）当外部调取其 next 办法后，会连续施行剩下的代码，并接受外部传来的一个参数。这个实现主要依靠于关键字 yield 。

yield 关键字使生成器函数施行暂停，yield 关键字后面的表达式的值返回给生成器的调取者。它可以被认为是一个基于生成器的版本的 return 关键字。

function* g(){
    var a = yield 2;
    console.log(a);
}

var it = g(); // 返回一个可迭代的生成器对象
console.log(it.next()); // 施行生成器函数内部代码，第一次返回 {done: false, value: 2}
it.next(3); // 连续施行生成器函数内部代码，同时向生成器传递参数3，最后返回 {done: true, value: undefined}

一个简便的计数器

function* count(){
    var n = 1;
    while(true){
        yield n++;
    }
}

var it = count();
it.next(); // 1
it.next(); // 2
it.next(); // 3

用同步方式写异步代码

之前处置异步 ajax 恳求结果，一样采纳传递回调函数的方式。一旦碰到多层回调嵌套，代码的可读性会落低，并且调试起来也不利便。有了生成器之后，我们就可以用同步的方式写异步的代码。这听上去非常的成心思。我们的代码将会是这样的

function foo(){
    var result = asyncFun(); // asyncFun 是异步函数，result 是异步返回的结果
    console.log(result);
}

当然，上面的代码并不克不及得到准确的结果，它只是一个设想。我们正打算用生成器来实现，并且这是可行的。想想生成器是什么特点:

它能暂停，向外部返回值
能连续施行剩下的代码，并接受外部传来的参数

这就足够了。有了生成器函数，此刻我们从新来设计代码：

function* foo(){
    // 这里碰到了异步办法，必需停下来。
    // 等候异步办法施行完毕，并返回结果，连续运转代码。当然，同步 ajax 不克不及算，它不是异步
    // 输出结果
}

静下来想一想是什么关键字，与暂停、连续有关。停下来...连续...停下来...连续...停下来...连续...Don't...Stop...Don't...Stop...Don't...Stop......这两个词就是 yield、next.

function *foo(){
    var result = yield asyncFun(next);
    console.log(result);
}

今世码碰到 yield 会暂停，这个时候 asyncFun 函数是不会暂停的，会施行，等施行完毕，再调取生成器的 next 办法，并将返回结果作为参数传给 next。由于在生成器函数内部我们拿不到 next，必需借助于全局变量来传递 next。

var next, gn;

function asyncFun(next){
    // 模拟异步恳求
    setTimeout(function(){
        // 返回一个随机数
        next(Math.random())
    }, 1000)
}

function* foo(){
    var result = yield asyncFun(next);
    console.log(result);
}

gn = foo();
next = gn.next.bind(gn);
next(); // 打印随机数

这样写，运转看上去有些沉重。可以写一个包装函数运转含有异步代码的生成器函数。

function asyncFun(next){
  // 模拟异步恳求
  setTimeout(function(){
    // 返回一个随机数
    next(Math.random())
  }, 1000)
}

function* foo(){
  var result = yield function(next){asyncFun(next)};
  console.log(result);
}



function wrapFun (gFn){
  var gn = foo(),
      next = gn.next.bind(gn);
  next().value(next);
}

wrapFun(foo);

演示地址

不外，自从出了 Promise 和 await 之后，更多的是用这个组合，其使用也更简便，范畴也更广。

以上就是ES6生成器用途介绍（附示例）的具体内容，更多请关注百分百源码网其它相关文章！

打赏