ES6 语法之 Generator 函数

最新推荐文章于 2024-07-18 14:46:43 发布

原创最新推荐文章于 2024-07-18 14:46:43 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

ECAMAScript6 语法简述专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了ES6中Generator函数的概念、特点及应用场景，包括如何使用yield表达式控制函数执行流程，以及如何利用Generator函数实现状态机和异步操作的同步处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、概念

Generator 函数是 ES6 提供的异步解决方法，可以把 Generator 函数看成是一种状态机，其内部封装了多种状态。执行 Generator 函数会返回一个遍历器对象，所以Generator 函数也是一个遍历器对象生成函数。

二、特点

1.在写法上比普通函数在function后面多了一个*；

//普通函数
function a(){}
//Generator 函数
function* a(){} //注意这里的function后面多了一个*

2.函数内部使用 yield 表达式，执行函数时通过 next 方法获取内部状态(这里的 yield 表示暂停，调用 next 方法表示放行)；

function* gen(){
yield 1;
yield 2;
return 3
};
var iterator = gen();//得到遍历器对象；
iterator.next();//{value:1,done:false};
iterator.next();//{value:2,done:false};
iterator.next();//{value:3,done:true};

3.调用 Generator 函数返回一个遍历器，可通过 for of 遍历出内部所有状态(return 后面的值会返回undefined)。

function* gen(){
yield 1;
yield 2;
return 3
};
var iterator = gen();//得到遍历器对象；
for(var i of iterator){
console.log(i)//1 2 undefined
}

三、应用

1.由于 Generator 函数是一种状态机机制，可以用于状态控制,下面演示了一个非红即黑状态的例子；

//非Generator函数
var bool = true;
function state(){
if(bool){
console.log('red');
}else{
console.log('black');
}
bool = !bool;
};
state()//red;
state()//black;
...

//Generator函数
function* gen(){
while(true){
console.log('red');
   yield;
console.log('black');
   yield;
}
};
var iterator = gen();
iterator.next()//red;
iterator.next()//black;
...

2.异步的操作可以写成同步的流程。

//非 Generator 函数
function gen(){
setTimeout(function(){console.log(111)},2000);
console.log(222);
};
gen();//222 111

//Generator 函数
function* gen(){
yield setTimeout(function(){console.log(111)},2000);
console.log(222);
};
var y= gen();
y.next();//111;
y.next();//222