论ES6中Generator函数在实际开发中的应用
本帖最后由 pilot34 于 2022-8-2 13:14 编辑Generator函数是ES6提供的一种异步编程解决方案，其形式上也是一个普通函数，但与普通函数有着很多不同，其有几个显著的特征，如下：
[*]function关键字与函数名之间加星号 "*"
[*]函数体内使用 yield 表达式来定义不同的内部状态
[*]调用 Generator函数，返回一个遍历器对象（Iterator Object）
[*]依次调用遍历器对象的next方法，可以遍历 Generator函数内部的每一个状态
那么，基于Generator函数自身的特点，它都在实际开发中都有哪些应用呢？
比如：前端做抽奖，可以使用它来做：抽奖次数有限，不同的人来抽奖，抽奖一次，抽奖次数变少一次，直至没有抽奖次数为止。
实现伪代码如下：
{
// 抽奖逻辑的伪代码
function print(count) {
// 执行一段抽奖逻辑
// ...
console.log(`剩余${count}次`);
}
// 执行抽奖的方法
function* draw(count) {
while(count > 0) {
count--;
yield print(count);
}
}
let startDrawing = draw(6);//例如初始时抽奖次数为6次
//添加抽奖点击按钮
let btn = document.createElement('button');
btn.id = 'action';
btn.textContent = '开始抽奖';
document.body.appendChild(btn);
//添加按钮点击监听事件
document.getElementById('action').addEventListener('click', function(){
startDrawing.next();
}, false);
}
大家如有兴趣或对这方面有研究有想法，不妨畅所欲言，讨论讨论，共同进步~。{:301_997:} 感谢楼主分享 js给人的感觉就像是小学生设计的, 后面各种缝缝补补;www 最后那个false的作用是啥呀{:1_909:} 这也没讲清楚到底怎么用的，我还是去百度一下吧 nanqian 发表于 2022-7-27 16:36
最后那个false的作用是啥呀
添加事件监听的第三个参数。默认是false为冒泡，这里也可以不加；true为捕获。更详细的，自己求助度娘吧。 一般就是异步函数用吧 不过这个还要手动next
日常的话感觉还是async await用的比较多 pilot34 发表于 2022-7-27 17:40
添加事件监听的第三个参数。默认是false为冒泡，这里也可以不加；true为捕获。更详细的，自己求助度娘吧 ...
想起来了{:1_919:} sgvvvv 发表于 2022-7-27 21:02
一般就是异步函数用吧 不过这个还要手动next
日常的话感觉还是async await用的比较多
是的，在处理多个有关联的异步请求时，同步的方式处理异步，它比Promise的链式then更方便，更整洁。它与Generator的使用场景不同吧。 还是没明白这个function*有什么特别的意义，LZ发的抽奖应用，完全可以用普通的function实现
// 具体抽奖逻辑的方法
function print(count) {
// 执行一段抽奖逻辑
// ...
console.log(`剩余${count}次`);
}
// 执行抽奖的方法
function draw(count) {
if(count > 0) {
print(count);
}
}
let startDrawing = 6;//例如初始时抽奖次数为6次
//添加抽奖点击按钮
let btn = document.createElement('button');
btn.id = 'action';
btn.textContent = '开始抽奖';
document.body.appendChild(btn);
//添加按钮点击监听事件
document.getElementById('action').addEventListener('click', function(){
draw(startDrawing--);
}, false);
页:
[1]
2