ES6 生成器简单运用

JaysonWang 发布于2019-08-23 15:59 / 1080人阅读

摘要：概念生成器是由生成器函数运行后得到的，是可迭代的。关键字使生成器函数执行暂停，关键字后面的表达式的值返回给生成器的调用者。模拟异步请求返回一个随机数演示地址不过，自从出了和之后，更多的是用这个组合，其使用也更简单，范围也更广。

概念

生成器是由生成器函数（ 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 之后，更多的是用这个组合，其使用也更简单，范围也更广。

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

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

Javascript 打包工具

摘要：所以，打包工具就出现了，它可以帮助做这些繁琐的工作。打包工具介绍仅介绍款主流的打包工具，，，，以发布时间为顺序。它定位是模块打包器，而属于构建工具。而且在其他的打包工具在处理非网页文件比如等基本还是需要借助它来实现。本文当时写在本地，发现换电脑很不是方便，在这里记录下。前端的打包工具打包工具可以更好的管理html，css，javascript，使用可以锦上添花，不使用也没关系...

Sleepy 2019-08-23 18:03 评论0 收藏0
ES6——生成器

摘要：我们还能如何使用生成器作为迭代器的能力使对象可迭代。一些重要的事件值得了解生成器是由布伦丹艾希首次在上实现的。布伦丹艾希的设计是紧紧跟随由启发的生成器。什么是生成器？我们先从下面的这里例子开始。 function* quips(name) { yield hello + name + !; yield i hope you are enjoying the blog po...

cgh1999520 2019-08-19 18:09 评论0 收藏0
webpack配置 babel

摘要：三集成所需要的依赖和在或加载模块时，对代码进行预处理，语法转化为语法。到目前位置，用于开发应用的环境已经配置好了。本系列主要学习webpack的配置。webpack自己间接的用过不少次，但是自己配置却没多少次，所以特地写写文章，学习webpack的配置，有不恰当的地方，欢迎指正。这次配置 babel 。若你对webpack的概念还不了解，先查看相应文档webpack中文文档一、初...

Songlcy 2019-08-22 16:12 评论0 收藏0
ES6简单了解

摘要：报错块级作用域明确允许在块级作用域中声明函数。但其值是固定的，不可更改，只读。一旦声明变量，就必须立即初始化，不能留到以后赋值。调用函数会返回一个内部指针，执行它不会返回结果返回的是指针对象。 ES6初步学习 let和const let 用来声明变量，但是所声明的变量只在let命令所在的代码块内有效 let不像var那样会发生变量提升，所以一定要先声明后使用。 console.log...

K_B_Z 2019-08-20 15:08 评论0 收藏0
你需要了解的ES6的新特性（前沿技术）

摘要：年月，的创造者公司，决定将提交给国际标准化组织，希望这种语言能够成为国际标准。这表示外层代码块不受内层代码块的影响。也可以运用于函数及其他文中就简单介绍这么多，想更加了解新特性的可以自寻查看一下阮一峰的一本入门 ES6新特性最近在项目中遇到了很多ES6的语法，遇到了不少坑坑洼洼，因此，在这里就简单介绍一下ES6中的一些新特性如果想真正的了解ES6和ES5有什么不同，这里推荐看一下...

Nino 2019-08-20 18:19 评论0 收藏0