一、Generator生成器函数

它是ES6新推出的一种异步编程解决方案，与普通函数的区别：函数名前多了一个星号，与yield关键字配合使用，实现暂停执行的功能。

1. 特点

函数名前多了一个星号*
直接调用 Generator函数并不会执行，也不会返回运行结果，而是返回一个遍历器对象（Iterator Object）
依次调用遍历器对象的next方法，遍历 Generator函数内部的每一个状态
函数体内使用 yield，定义不同的内部状态，会暂停执行

例如：
以下是一个生成器函数

function *generator(x) {console.log('x', x);
}

此时我们直接执行generator(10)

发现竟然什么也没输出？说明根本没有执行console.log(x,'x’)

所以我们应该着重注意generator函数的特点：
generator返回的是一个遍历器对象；
调用遍历器对象的next才可以执行函数；

function *generator(x) {console.log('x', x);
}
const a = generator(10);
a.next();

当我们用一个变量接住generator返回的遍历器对象，并调用next方法，就执行了console语句！

生成器函数的执行就像挤牙膏，被人挤一下才出来一点

2. 关联概念

async_await：原理基于generator实现

二、yield的加入

1. 引入

在上面的例子新增两个语句，其中一句是yield表达式，一个是正常的log语句

function *generator(x) {console.log('x', x);let b = yield x;          //新增语句console.log('b', b)         //新增语句
}let a = generator(10);
console.log(a.next());

让我们来看看结果是什么？

与上述例子相同的是仍然输出了x 10，但是第二个console并没有被执行，反而返回了一个对象{value:10, done:false}

==推断=>

程序的执行已经卡在yield语句那一行并且返回了一个对象

2. yield 特点

yield的返回是一个对象，包括 value 和 done 两部分：

value：返回值
done：generator函数是否执行完。false表明该函数后续还有可以执行的部分，反之则无

并且当在generator函数执行中遇到yield就会中断，只有进行下一次next()才会执行下一段代码（下一个yield之前的一段）

三、举个例子

function *generator(x) {console.log('x', x);let b = yield x;      //第一次next执行到此行console.log('x_after', x);console.log('b', b);yield "hello";            //第二次next执行到此行console.log('end');
}
let a = generator(10);
console.log(a.next());
console.log(a.next(1000));

结果：

第二次调用next执行的语句块是两个yield之间的内容
调用next()时，传入一个值1000：
再次打印x，x的值仍未10。但用b接收yield语句，b变为1000，说明 next()传进去的值会被yield接收作为自己的值，并可以返回给接收的变量。

ES6——generator与yield相关推荐

ES6 Generator 初体验
2019独角兽企业重金招聘Python工程师标准>>> ES6 Generator 初体验听说 ES6 的 Generator 是一个很神奇的函数,所以去了解了一下. 因为它不同于 ...
es6 Generator函数的应用
Generator函数的应用 es6 Generator 可以暂停函数执行,返回任意表达式的值.这种特点使得 Generator 有多种应用场景. 异步操作的同步化表达 Generator函数的暂停执 ...
ES6——Generator 函数的语法
Generator 函数是一个状态机,封装了多个内部状态.执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机,还是一个遍历器对象生成函数.返回的遍历器对象 ...
[ES6] Generator 函数
[ES6] Generator 函数 Generator 函数与普通函数的区别执行机制 Generator 函数返回的遍历器对象的方法循环遍历器 Iterator 对象的方法 next 方法 re ...
ES6 Generator实现协同程序
至此本系列的四篇文章翻译完结,查看完整系列请移步blogs 由于个人能力知识有限,翻译过程中难免有纰漏和错误,望不吝指正issue ES6 Generators: 完整系列 The Basics Of ...
generator 和 yield的使用
ECMAScript 6 第四讲本章目标: 本章内容: generator 和 yield的使用: Generator主要是用于异步编程,就是封装一个异步任务或者是异步任务的容器特点是:可以交出函 ...
koa源码分析-generator和yield分析
Generator和yield 分析项目中使用了koa,最近在学习koa的源码,先把这些东西都写下来,免得以后忘记了. koa源码学习前先注意下面这三个概念 generator function ( ...
es6 Generator.prototype.throw()方法
Generator.prototype.throw()方法 Generator函数返回的遍历器对象,都有一个throw()方法,可以在函数体外抛出错误,然后在 Generator函数体内捕获. var ...
es6 Generator函数的含义
Generator函数的含义 Generator 与状态机 Generator 是实现状态机的最佳结构.比如,下面的clock函数就是一个状态机. var ticking = true; var cl ...

ES6——generator与yield

文章目录