文档章节

ES6躬行记(19)——生成器

o
 osc_gu9d45li
发布于 2019/04/08 09:42
字数 1918
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

  根据ES6制订的标准自定义迭代器实现起来比较复杂,因此ES6又引入了生成器的概念,生成器(Generator)是一个能直接创建并返回迭代器的特殊函数,可将其赋给可迭代对象的Symbol.iterator属性。与普通函数不同,生成器不仅可以暂停函数内部的执行(即维护内部的状态),在声明时还需要包含一个星号(*),并且拥有next()、return()和throw()三个迭代器方法。

一、function*

  生成器在声明时,需要把星号加到function关键字与函数名之间,但ES6没有规定星号两边是否需要空格,因此下面四种写法都是允许的,本篇将采用第一种写法。

function* generator() {}
function*generator() {}
function *generator() {}
function * generator() {}

  生成器也能通过函数表达式创建,如下代码所示。注意,不能用箭头函数创建生成器。

var iterator = function* () {};

  生成器虽然不能作为构造函数使用,但可以是对象的一个方法,并且还支持第5篇提到的简洁方式的写法,如下所示。

var obj = {
  *generator() {}
};

二、yield

  生成器之所以能在其内部实现分批执行,还要多亏ES6新增的yield关键字。这个关键字可标记暂停位置,具体使用可参考下面的代码。

function* generator() {
  var count = 0;
  while (count < 2)
    yield count++;
  return count;
}
var iterator = generator();

  虽然生成器的调用方式和普通函数相同,但它不会马上返回函数的结果(即不能立刻执行)。而是先返回一个它所生成的迭代器,然后再调用其next()方法恢复内部语句的执行(如下代码所示),直至遇到yield关键字,再次暂停,如此反复,一直持续到函数的末尾或碰到return语句才终止这套循环操作。

iterator.next();        //{value: 0, done: false}
iterator.next();        //{value: 1, done: false}
iterator.next();        //{value: 2, done: true}

1)yield表达式

  yield关键字的后面可以跟一个表达式,例如代码中的count++。生成器的next()方法能够返回一个IteratorResult对象,其done属性用于判断生成器是否执行完毕,即是否还有yield表达式。关于IteratorResult两个属性的值,需要分情况说明,具体如下所列。

(1)当生成器还在执行时,value的值可通过计算yield表达式得到,done的值为false。

(2)当生成器执行完毕时,value的值是undefined,done的值为true。

(3)当遇到return语句时,value的值就是return后面跟的值,done的值为true。

  要想遍历生成器,除了借助next()方法之外,还可以使用for-of循环。但要注意,遍历到的是yield表达式的计算结果,如下所示。

/********************
  0
  1
********************/
for(var step of iterator) {
  console.log(step);
}

2)优先级和结合性

  因为yield可以单独使用(例如x=yield),所以它并不是一个运算符。虽然如此,但它还是包含优先级和结合性的概念。yield的优先级很低,仅比扩展运算符和逗号高,如果要提前计算,可以像下面这样用一对圆括号包裹。

1 + (yield 2);

  yield的结合性与等号一样,也是从右往左,例如yield yield 1相当于yield(yield 1)。另外,yield有一个很重要的限制,就是它只能存在于生成器内,在其它位置出现都会有异常,包括生成器中的子函数内,如下所示。

function* error() {
  function inner() {
    yield 1;
  }
}

三、3个方法

1)next()

  本节开篇的时候曾提到过生成器包含三个迭代器方法,接下来将围绕这三个方法展开讲解。首先介绍的是next()方法,它能接收一个参数,而这个参数会成为上一个yield表达式的返回值。以下面的代码为例,calculate()函数包含两个yield表达式,在创建生成器后,调用了两次next()方法,第一次没有传参,第二次传入的数字10被赋给了x变量。

function* calculate() {
  let x = yield 1;
  let y = yield x + 2;
  return y;
}
var iterator = calculate();
iterator.next();          //{value: 1, done: false}
iterator.next(10);        //{value: 12, done: false}

  注意,第一次调用next()方法时,即使传进了参数,这个参数也会被忽略,因为此时还不存在上一个yield表达式。

2)return()

  接下来介绍的是return()方法,它能提前终止当前生成器,类似于在函数体内马上执行return语句。下面沿用上一个示例,将函数名改成stop,第二次调用的方法改成return()。

function* stop() {
  let x = yield 1;
  let y = yield x + 2;
  return y;
}
var iterator = stop();
iterator.next();        //{value: 1, done: false}
iterator.return(10);    //{value: 10, done: true}
iterator.next();        //{value: undefined, done: true}

  return()方法也能接收一个参数,而从上面的调用结果中可以得知,这个参数相当于return运算符后面跟的值,如下所示。

function* stop() {
  let x = yield 1;
  return 10;
}

3)throw()

  最后介绍的是throw()方法,它能强制生成器抛出一个错误。此方法也有一个参数,但这个参数只能被try-catch语句中的catch部分接收。下面用一个例子演示throw()方法的具体使用。

function* especial() {
  var count = 1;
  try {
    yield count;
  } catch (e) {
    count = 2;
    console.log(e);            //"inner"
  }
  yield count + 3;
}
var iterator = especial();
iterator.next();              //{value: 1, done: false}
try {
  iterator.throw("inner");     //{value: 5, done: false}
  iterator.next();             //{value: undefined, done: true}
  iterator.throw("outer");
} catch (e) {
  console.log(e);              //"outer"
}

  在especial生成器的内部和外部各有一条try-catch语句。第一次调用throw()方法,在生成器内部先捕获抛出的错误,再把传入的字符串“inner”赋给catch的e参数,接着执行yield count + 3,最后返回一个计算过的IteratorResult对象。第二次调用throw()方法,由于生成器已执行完毕,因此只能在外部将错误捕获。

四、yield*

  在yield关键字后面跟一个星号(两边的空格可选),就能将执行权委托给另一个生成器或可迭代对象。以下面代码为例,在delegation生成器中,有两个yield*表达式,第一个跟的是数组,第二个跟的是generator生成器(相当于将两个生成器合并)。

function* generator() {
  var count = 0;
  while (count < 2)
    yield count++;
  return count;
}
function* delegation() {
  yield* ["a", "b"];
  var result = yield* generator();
  console.log(result);      //2
}
var iterator = delegation();
iterator.next();            //{value: "a", done: false}
iterator.next();            //{value: "b", done: false}
iterator.next();            //{value: 0, done: false}
iterator.next();            //{value: 1, done: false}
iterator.next();            //{value: undefined, done: true}

  从上面的遍历结果中可知,delegation生成器先访问数组的每个元素,再计算generator生成器中的yield表达式,并将其返回值赋给了result变量。

五、异步编程

  在ES6之前,要实现异步编程,最常用的方法是用回调函数,例如捕获Ajax通信中的响应内容,如下所示。

function fetch(callback) {
  $.getJSON("server.php", {}, function(json) {
    callback.call(this, json);
  });
}
function asyn() {
  fetch(function(json) {
    console.log(json);        //{code: 200, msg: "操作成功"}
  });
}
asyn();

  fetch()函数调用了jQuery中能发起Ajax请求的getJSON()方法,在其载入成功时的回调函数内间接调用了callback参数(即传递进来的回调函数),其参数就是响应内容。

  接下来将asyn()变为生成器,并在其内部添加yield表达式,然后在getJSON()的回调函数中调用生成器的next()方法,并将响应内容作为参数传入。

function fetch() {
  $.getJSON("server.php", {}, function(json) {
    gen.next(json);
  });
}
function* asyn() {
  var result = yield fetch();
  console.log(result);        //{code: 200, msg: "操作成功"}
}
var gen = asyn();
gen.next();

  通过上面的代码可知,生成器能用同步的方式实现异步编程,从而有效避免了层层嵌套的回调金字塔。

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
ES6躬行记(20)——类

  ES6正式将类(Class)的概念在语法层面标准化,今后不必再用构造函数模拟类的行为。而ES6引入的类本质上只是个语法糖(即代码更为简洁、语义更为清晰),其大部分功能(例如继承、封装和...

osc_xgk2otgu
2019/04/15
1
0
ES6-类(Class)

ES6躬行记(20)——类   ES6正式将类(Class)的概念在语法层面标准化,今后不必再用构造函数模拟类的行为。而ES6引入的类本质上只是个语法糖(即代码更为简洁、语义更为清晰),其大部分...

osc_wfzj799x
2019/05/29
0
0
ES6躬行记(21)——类的继承

  ES6的继承依然是基于原型的继承,但语法更为简洁清晰。通过一个extends关键字,就能描述两个类之间的继承关系(如下代码所示),在此关键字之前的Man是子类(即派生类),而在其之后的Peo...

osc_ertc0ko2
04/16
2
0
ES6躬行记(18)——迭代器

  ES6将迭代器和生成器内置到语言中,不仅简化了数据处理和集合操作,还弥补了for、while等普通循环的不足,例如难以遍历无穷集合或自定义的树结构等。   迭代器(Iterator)是一种用于迭...

osc_w9s1w4o0
2019/04/01
1
0
ECMAScript 6新特性印象之一:新语法

前记 按照规划,明年年中,ECMAScript 6(ES6)就要正式发布了。 最近抽空看了Dr. Axel Rauschmayer的几篇文章和演讲PPT,对新特性有了些了解。 趁没忘,抓紧记录下,夹杂自己的感受。 计划分三...

皓矾
2019/09/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Hacker News 简讯 2020-07-10

更新时间: 2020-07-10 01:15 US Supreme Court deems half of Oklahoma a Native American Reservation - (reuters.com) 美国最高法院认为俄克拉荷马州的一半是印第安人保留地 得分:131 | 评...

FalconChen
53分钟前
16
0
OSChina 周五乱弹 —— 求求你吃了我吧,不要再玩弄食物的感情了

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @巴拉迪维 :张喆的单曲《陷阱 》 这首歌已经在网易找不到原唱了,不知道被哪家买了版权。#今日歌曲推荐# 《陷阱 》- 张喆 手机党少年们想听歌...

小小编辑
今天
26
1
清华陈文光教授:AI 超算基准测试的最新探索和实践。

道翰天琼认知智能平台为您揭秘新一代人工智能。 无规矩不成方圆。放在超级计算机的研发领域,没有一个大家普遍接受的算力评测指标,便难以推动超算迅猛发展。 而现在伴随着人工智能的发展,大...

jackli2020
今天
7
0
@RequestMapping, consumes 提交简单有意思的测试

getParm @GetMapping("getParm")public Result getParm(String id){ System.out.println(); return ResultFactory.success(id);} 等同于 == bodyParm @PostMapping("bodyParm......

莫库什勒
今天
25
0
63. Unique Paths II

题目: 63. Unique Paths II A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The robot can only move either down or right at any p......

JiaMing
今天
55
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部