13518219792
小编给大家分享一下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生成器怎么使用的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
