ES6 Generator 函数的语法 yield表达式

最新推荐文章于 2024-04-28 13:51:47 发布
最新推荐文章于 2024-04-28 13:51:47 发布
阅读量607 收藏
点赞数
分类专栏： es6 文章标签： javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HHW223/article/details/106227524
版权

Generator 函数的语法

基本介绍

Genertator 函数是ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。

Generator 函数有多种理解的角度，语法上， 首先可以把它理解成，Genterator函数是一个状态机，封装了多个内部状态。

执行Generator 函数会返回一个遍历器对象， 也就是说， Genertator 函数除了状态机，还是一个遍历器对象生成函数，返回的遍历器对象，可以依次遍历Generator函数内部的每一个状态。

形式上，Generator函数是一个普通函数， 但是有两个特征，一是，function关键字与函数名之间有一个星号；二是， 函数体内部使用yield 表达式 ， 定义不同的内部状态。

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

上面代码定义了一个Generator 函数 ， 它内部有两个yield表达式 ，即刻函数有三个状态：hello ， world 和return语句。

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

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

总结

调用Generator 函数， 返回一个遍历器对象， 代表Generator函数的内部指针。以后， 每次调用遍历器对象的next 方法，就会返回一个有着value 和 done两个属性值的对象。value 属性表示当前内部状态的值。 是yield表达式后面的那个表达式的值；done 属性是一个布尔值， 表示是否遍历结束。

yield 表达式

由于Generator 函数返回的遍历器对象，只有调用next 方法才会遍历下一个内部状态，所以其实提供了一种可暂停执行的函数， yield 表达式就是暂停的标志。

遍历器对象的next 方法的运行逻辑如下

（1） 遇到yield表达式，就暂停执行后面的操作， 并将紧跟在yield 后面的那个表达式的值，作为返回的对象的value属性值。

（2）下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。

（3）如果没有遇到新的yield 表达式， 就一直运行到函数结束， 直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。

（4）如果函数没有return语句，则返回的对象的value 属性值为undefined

需要注意的是，yield 表达式后面的表达式，只有当调用next 方法，内部指针指向该语句时才会执行，因此类似于惰性取值。

function* gen() {
  yield  123 + 456;
}

上面的代码中 ，yield 后面的表达式123+456 不会立即求值， 只会在next方法将指针移到这一句是才会求值。

yield表达式和return语句既有相似之处 ， 也有区别，相似之处在于， 都能返回紧跟在语句后面的那个表达式的值。区别在于每次遇到yield ， 函数暂停执行， 下一次再从该位置继续向后执行，而return语句不具备位置记忆的功能， 一个函数里面只能执行一次return语句， 但是可以执行多次yield表达式。正常的函数只能返回一个值，因为只能执行一次return；generator函数可以返回一系列的值，因为可以有任意多的yield 从另一个角度看， 也可以说Generator生成了一系列的值。

注意 yield 关键字只能用在Generator函数里面，用在其他地方会报错，！！！！！

Generator 函数可以不用yield 表达式，这时就变成了一个单纯的暂缓执行的函数。

function* f() {
  console.log('执行了！')
}

var generator = f();

setTimeout(function () {
  generator.next()
}, 2000);

上面代码中，函数f如果是普通函数，在为遍历generator赋值时就会执行。但是 ， 函数f是一个generator函数， 就变成只有只有调用next 方法时，函数f才会执行。

var arr = [1, [[2, 3], 4], [5, 6]];

var flat = function* (a) {
  a.forEach(function (item) {
    if (typeof item !== 'number') {
      yield* flat(item);
    } else {
      yield item;
    }
  });
};

for (var f of flat(arr)){
  console.log(f);
}

上面的代码会产生语法错误，因为forEach方法的参数是一个普通函数，但是在里面使用了yield表达式。

其中yield* 表示可以调用Generator函数。上面的代码把一个复杂的数组对象给化解了

另外，yield 表达式如果用在另一个表达式中，必须方法圆括号里。

function* demo() {
  console.log('Hello' + yield); // SyntaxError
  console.log('Hello' + yield 123); // SyntaxError

  console.log('Hello' + (yield)); // OK
  console.log('Hello' + (yield 123)); // OK
}

与Iterator接口的关系

上一章说过，任意一个对象的Symbol.iterator方法 ， 等于该对象的遍历器生成函数，调用该函数会返回该对象的一个遍历器对象。

由于Generator 函数就是遍历器生成函数，因此可以把Generator赋值给对象的Symbol.iterator属性，从而使得该对象具有Iterator 接口。

var myIterable = {};
myIterable[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
};

[...myIterable] // [1, 2, 3]

上面代码中，Generator 函数赋值给Symbol.iterator属性， 从而使得myIterable对象具有了Iterator接口，可以被…运算符遍历了。

Generator函数执行后，返回一个遍历器对象，该对象本身也具有Symbol.iterator 属性， 执行后返回自身。

function* gen(){
  // some code
}

var g = gen();

g[Symbol.iterator]() === g
// true

上面代码中，gen是一个Generator函数， 调用它会生成一个遍历器对象G ，它的Symbol.iterator属性，也是一个遍历器生成函数，执行后返回它自己 。

next 方法的参数

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

function* f() {
  for(var i = 0; true; i++) {
    var reset = yield i;
    if(reset) { i = -1; }
  }
}

var g = f();

g.next() // { value: 0, done: false }
g.next() // { value: 1, done: false }
g.next(true) // { value: 0, done: false }

上面的代码先定义一个可以无限循环的Generator函数 f ,如果next 方法没有参数，每次运行到yield 表达式，变量reset 的值总是undefined 。 当next 方法带了一个参数true时， 变量reset就被重置为这个参数因此i 会等与 -1 下一轮循环就从-1开始递增。

这个功能有很重要的语法意义，Generator 函数从暂停状态到恢复运行，它的上下文状态是不变的。通过next方法的参数，就有办法在Generator函数开始运行之后，继续向函数体内部注入值。也就是说，可以在Generator函数运行的不同阶段，从外部向内部注入不同的值，从而调整函数行为。

function* foo(x) {
  var y = 2 * (yield (x + 1));
  var z = yield (y / 3);
  return (x + y + z);
}

var a = foo(5);
a.next() // Object{value:6, done:false}
a.next() // Object{value:NaN, done:false}
a.next() // Object{value:NaN, done:true}

var b = foo(5);
b.next() // { value:6, done:false }
b.next(12) // { value:8, done:false }
b.next(13) // { value:42, done:true }

注意，由于next方法的参数表示上一个yield 表达式的返回值， 所以第一次使用next 方法时， 传递参数是无效的，V8引擎直接忽略第一次使用next 方法时的参数，只有从第二次使用next 方法开始，参数才是有效的。从语义上讲，第一个next 方法用来启动遍历器对象，所以不用带有参数。

function* dataConsumer() {
  console.log('Started');
  console.log(`1. ${yield}`);
  console.log(`2. ${yield}`);
  return 'result';
}

let genObj = dataConsumer();
genObj.next();
// Started
genObj.next('a')
// 1. a
genObj.next('b')
// 2. b

上面的代码中${} 表示字符串的拼接，类似与占位符。

for… of 循环

for…of 循环可以自动循环遍历 Generator 函数执行时生成的Iterator对象， 且此时不再需要调用next 方法。

function* foo() {
  yield 1;
  yield 2;
  yield 3;
  yield 4;
  yield 5;
  return 6;
}

for (let v of foo()) {
  console.log(v);
}
// 1 2 3 4 5

上面代码使用for…of循环 ， 依次显示5个yield表达式的值。这里需要注意，一旦next 方法的返回对象的done 属性为true ，for…of循环就会中止，且不包含该返回对象，所以上面的代码return 语句返回的6 不包括在for…of 循环之中。

function* fibonacci() {
  let [prev, curr] = [0, 1];
  for (;;) {
    yield curr;
    [prev, curr] = [curr, prev + curr];
  }
}

for (let n of fibonacci()) {
  if (n > 1000) break;
  console.log(n);
}

for 循环无限循环 ， 每次遇到yield 就返回，因为for循环是无限循环 ，所以第一次是1 ， 第二次的时候上一个数加当前这个数，所以第二个数是1 第三个数是2 第四个数是3

利用Genterator 遍历对象

function* objectTest(obj){
	// 获取对象中的所有的属性名，并通过数组返回
	let propkeys = Reflect.ownKeys(obj);
	console.log(propkeys);
	for(let propKey of propkeys){
		yield[propKey , obj[propKey]];
	}
}

let name = {"id":1,"name":'admin'};
for(let [key,value] of objectTest(name)){
	console.log(key,value);
}

上面的代码中，对象 name 原生不具备Iterator 接口， 无法用 for…of 遍历， 这时， 我们通过Generator 函数为他加上遍历器接口，就可以用for…of遍历了，加上遍历接口的另一种写法是， 将Generator函数加到对象的Symbol.iterator属性上面。

function* objectEntries() {
  let propKeys = Object.keys(this);

  for (let propKey of propKeys) {
    yield [propKey, this[propKey]];
  }
}

let jane = { first: 'Jane', last: 'Doe' };

jane[Symbol.iterator] = objectEntries;

for (let [key, value] of jane) {
  console.log(`${key}: ${value}`);
}
// first: Jane
// last: Doe

除了for…of 循环以外，扩展运算符(…)、 解构赋值和Array.from 方法内部调用的，都是遍历器接口。这意味着。他们都可以将Gnerator 函数返回的Iterator 对象， 作为参数。

function* numbers () {
  yield 1
  yield 2
  return 3
  yield 4
}

// 扩展运算符
[...numbers()] // [1, 2]

// Array.from 方法
Array.from(numbers()) // [1, 2]

// 解构赋值
let [x, y] = numbers();
x // 1
y // 2

// for...of 循环
for (let n of numbers()) {
  console.log(n)
}
// 1
// 2

Generator.prototype.throw()

Generator 函数返回的遍历器对象，都有一个throw方法，可以在函数体外抛出错误，然后在Generator函数体内捕获

var g = function* () {
  try {
    yield;
  } catch (e) {
    console.log('内部捕获', e);
  }
};

var i = g();
i.next();

try {
  i.throw('a');
  i.throw('b');
} catch (e) {
  console.log('外部捕获', e);
}
// 内部捕获 a
// 外部捕获 b

上面代码中， 遍历器对象i 连续抛出两个错误，第一个错误被Generator 函数体内catch语句捕获， i第二次抛出错误，由于Generator函数内部catch 语句已经执行过了，不会再捕获这个错误了，所以这个错误被抛出了函数体完，被体外的catch捕获。

throw 方法可以接受一个参数， 该参数会被catch语句接收， 一般建议抛出Error对象的实例

var g = function* () {
  try {
    yield;
  } catch (e) {
    console.log(e);
  }
};

var i = g();
i.next();
i.throw(new Error('出错了！'));
// Error: 出错了！(…)

注意， 不要混淆遍历器对象的throw方法和全局的throw 命令，上面代码的错误，是用遍历器对象的throw方法抛出的，而不是throw命令抛出的，后者只能被函数体完的catch语句捕获。

var g = function* () {
  while (true) {
    try {
      yield;
    } catch (e) {
      if (e != 'a') throw e;
      console.log('内部捕获', e);
    }
  }
};

var i = g();
i.next();

try {
  throw new Error('a');
  throw new Error('b');
} catch (e) {
  console.log('外部捕获', e);
}
// 外部捕获 [Error: a]

上面代码之所以捕获了a是因为函数体外的catch 语句块， 捕获了抛出的a错误以后就不会再继续try代码块里面剩余的语句。

如果Generator 函数内部没有部署try… catch 代码块，那么throw 方法抛出的错误，将被部署在外部的的tey 代码捕获。

var g = function* () {
  while (true) {
    yield;
    console.log('内部捕获', e);
  }
};

var i = g();
i.next();

try {
  i.throw('a');
  i.throw('b');
} catch (e) {
  console.log('外部捕获', e);
}
// 外部捕获 a

上面代码中，Generator 函数G 内部没有部署tey…chatch 代码块。所以抛出的错误直接被外部catch代码块捕获。

var gen = function* gen(){
  yield console.log('hello');
  yield console.log('world');
}

var g = gen();
g.next();
g.throw();
// hello
// Uncaught undefined

上面代码 中，g.throw 抛出错误后， 没有任何try…catch 代码块可以捕获这个错误， 导致程序出错。

throw 方法抛出的错误要被内部捕获， 前提是必须至少在执行一个next方法。

韩宏伟
关注
专栏目录
【ES6知识】Generator 函数 与 yield 关键字
前端知识分享喵
09-28 948
Generator 函数 与 yield 关键字
ES6 Generator函数 语法 深入理解
sinat_30552885的博客
12-28 1858
a
es6中的generator yield
weixin_44682587的博客
01-13 237
generator—生成器 应用场景：在函数执行时，需要请求数据，可以通过yield暂停执行，等到数据获取完成，再继续执行。 generator函数------中间能停 <script> //generator-生成器 function *show(){ // 声明格式为：*函数() alert('a'); yield; // 告诉函数“到哪停” alert('b'); } let genObj = show(); console.log(genObj); genObj.next
ES6 入门教程 19 Generator 函数的语法 19.7 yield星号表达式
谢谢你们的关注
11-22 169
ES6 入门教程 19 Generator 函数的语法 19.7 yield星号表达式
Generator函数、yield语句
weixin_46544034的博客
02-26 321
Generator函数、yield语句
ES6知识点整理之----Generator----概述
ap1005233的博客
09-20 148
1、ES6 提供的一种异步编程解决方案 2、是一个状态机，封装了多个内部状态。 3、是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。 4、Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态。 function* ...
Es6 Generator函数详细解析
08-27
Generator 函数的定义、yield 表达式、与 Iterator 接口的关系等都是 Generator 函数中非常重要的概念。 一、Generator 函数的定义 Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同...
【ES6】浅谈Generator和yield
hhhhhhhssss的博客
07-19 741
文章目录前言一、async await实现二、Generator实现三、Generator函数1、什么是Generator2.Generator的特点3.Generator的执行四、yield表达式1、什么是yield2、yield注意点五、Iterator对象五、next方法的参数总结 前言 问题发生在一个下午，当我正在实现Promise.all()方法的时候（有兴趣的可以去我另一篇博客看一看：深入透析Promise的all和race方法），发现for循环里的函数并不是同步执行的，那么我如果想让它同步
深入理解ES6 Generator函数：异步操作与异常处理
"ES6 Generator函数的应用实例分析，深入解析Generator函数在异步操作和异常捕获中的使用技巧" ES6 Generator函数是JavaScript中的一种特殊函数，它引入了一种新的控制流机制，允许开发者暂停和恢复函数执行。...
ES6——generator与yield
Erya Programming learning
12-30 914
文章目录一、Generator生成器函数1. 特点二、yield的加入1. 引入2. yield 特点三、举个例子 一、Generator生成器函数 它是ES6新推出的一种异步编程解决方案，与普通函数的区别：函数名前多了一个星号，与yield关键字配合使用，实现暂停执行的功能。 1. 特点 函数名前多了一个星号* 直接调用 Generator函数并不会执行，也不会返回运行结果，而是返回一个遍历器对象（Iterator Object） 依次调用遍历器对象的next方法，遍历 Generator函数内部的每
ES6-深入理解Generator yield & Koa中间件执行顺序
柒青衿的博客
07-15 8504
几个月前写过一篇博客，讲Generator，比较基础。最近总在写ES6，想深入讲讲yield的执行顺序。你可能想问，Generator执行顺序很简单啊，就是调用next()就执行下一个yield后面的代码。很多问题，如果你认为很简单，很可能是你理解不深刻，就像我当初也认为Generator很简单。如果你关心koa中间件的执行顺序也可以接着看看。yield与yield*关于这个话题，你只需要知道四点：
ES6新特性 Generator函数和yield
wuyujin1997的博客
04-14 376
intro ES6引入了Generator函数，可以通过yield关键字，把函数的执行流挂起， 这为改变执行流程提供了可能，从而为异步编程提供解决方案。 API function* foo() {...}; // 定义生成器函数generator function。 f = foo() 获取Generator对象，foo为Generator函数。 g.next(?v) 程序向后执行，返回下一个...
es6 中 async await 的使用 (替代generator yield)
weixin_44682587的博客
01-13 572
async await 和 generator yield 的使用方法和应用场景基本一样，不过 async await 的使用更加简练，不需要再写runner()来异步执行各个部分的代码，官方已经提供，所以注定选择更加简练方便的，使用async await，抛弃generator yield。 async function readData(){ // async ()=>{ // 注：async声明时可以写成箭头函数，但是generator不行。 let data1 = await $.aj
generator函数和yield
Meiko记录
10-09 638
在MDN上，对yield的第一句解释就是： Theyieldkeyword is used to pause and resume a generator function. // yield这个关键字是用来暂停和恢复一个遍历器函数（的运行）的。 这也就是yield的所有解释了，可谓大道至简，然并卵，深层的意思不去挖掘，根本还是没法用它，还是老老实实做老古董。 关键字yield 没...
ES6--generator概念及写法(含yield与next执行机制分析)_generator遇见return也会停止执行
最新发布
2401_84411323的博客
04-28 874
用来在一个 Generator 函数里面执行另一个 Generator 函数与不加*的对比// foo同上// 不加\*的对比由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】*执行结果如下：*### 最后[外链图片转存中...(img-mNtv4WyX-1714283496371)][外链图片转存中...(img-M22gxItu-1714283496372)]
Iterator和Genertator
weixin_60968779的博客
02-27 361
Iterator和Genertator
ES6：Generator函数详解
DZQ1223的博客
07-29 1106
从另一个角度看，也可以说 Generator 生成了一系列的值，这也就是其名称的来历(在英语中generator”这个词是“生成器”的意思)。上面的代码中，函数 f 如果是普通函数，在为变量 generator 赋值时就会执行。方法时，内部的指针就会从函数的头部或上一次停下来的地方开始执行，直到遇到下一个。方法等于该对象的遍历器对象生成函数，调用该函数会返回该对象的一个遍历器对象。函数运行的不同阶段从外部向内部注入不同的值，从而调整函数行为。上面的代码已经把回调函数改成了直线执行的形式，但是加入了大量。
ES6学习—Generator函数
blackwuxin的专栏
12-06 794
基本概念Generator是ES6提供的一种异步编程的解决方案。 形式上有两个特征。一是，function关键字和函数名之间有个星号；二是，函数内部使用yield语句，定义不同的内部状态。 function* helloGenerator(){ yield 'hello'; yield 'world'; return 'ending'; }var hw = helloGen
ES6系列教程第三篇--Generator 详解
热门推荐
恰恰虎的博客
05-27 1万+
一、什么是Generator 函数 先看下面的Generator函数， function* helloGenerator() { console.log("this is generator"); } 这个函数与普通的函数区别是在定义的时候有个*,我们来执行下这个函数。 function* helloGenerator() { console.log("th...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值