Generator函数
1.概念
Generator 函数是 ES6 提供的一种异步编程解决方案
Generator 函数内部可以封装多个状态, 因此又可以理解为是一个状态机。
2.定义 Generator 函数
在普通函数的function后面加上 * 即可
eg: function* gen() { }
3.Generator函数和普通函数区别
3.1调用Generator函数后, 无论函数有没有返回值, 都会返回一个迭代器对象,
3.2调用Generator函数后, 函数中封装的代码不会立即被执行
4.yield关键字
4.1在Generator函数内部使用yield关键字定义状态
4.2并且yield关键字可以让 Generator内部的逻辑能够切割成多个部分。
4.3通过调用迭代器对象的next方法执行一个部分代码,
执行哪个部分就会返回哪个部分定义的状态
4.4.在调用next方法的时候可以传递一个参数, 这个参数会传递给上一个yield
代码举例:
function* gen() {
console.log("123");
let res = yield "aaa";
console.log(res);
console.log("567");
yield 1 + 1;
console.log("789");
yield true;
}
let it = gen();
console.log(it.next());
console.log(it.next("qqq"));
打印结果如下图
5.应用场景
- 让函数返回多个值
- 利用 Generator 函数,可以在任意对象上快速部署 Iterator 接口
<script>
let obj={
name:"a cool girl",
age:"18 forever",
sex:"woman"
}
function* gen(){
let that = this;
let keys= Object.keys(obj);
for(let i= 0 ;i<keys.length;i++){
yield that[keys[i]];
}
}
obj[Symbol.iterator]=gen;
let it=obj[Symbol.iterator]();
console.log(it);
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());
</script>
打印结果:gen {<suspended>}
{value: "a cool girl", done: false}
{value: "18 forever", done: false}
{value: "woman", done: false}
{value: undefined, done: true}
定义一个Generator 函数,然后赋值给接口,剩下的业务逻辑、返回值等在Generator 函数中实现,这样方便了很多。
注意点: yield关键字只能在Generator函数中使用, 不能在普通函数中使用。