JavaScript中Generator函数和yield表达式怎么使用

//传统函数
functionfoo(){
return'helloworld'
}
foo()//'helloworld'，一旦调用立即执行
//Generator函数
function*generator(){
yield'statusone'//yield表达式是暂停执行的标记
return'helloworld'
}
letiterator=generator()//调用Generator函数，函数并没有执行，返回的是一个Iterator对象
iterator.next()//{value:"statusone",done:false}，value表示返回值，done表示遍历还没有结束
iterator.next()//{value:"helloworld",done:true}，value表示返回值，done表示遍历结束

function*gen(){
yield'hello'
yield'world'
return'ending'
}
letit=gen()
it.next()//{value:"hello",done:false}
it.next()//{value:"world",done:false}
it.next()//{value:"ending",done:true}
it.next()//{value:undefined,done:true}

function(){
yield1;
})()
//SyntaxError:Unexpectednumber
//在一个普通函数中使用yield表达式，结果产生一个句法错误

function*demo(){
console.log('Hello'+yield);//SyntaxError
console.log('Hello'+yield123);//SyntaxError
console.log('Hello'+(yield));//OK
console.log('Hello'+(yield123));//OK
}

function*demo(){
foo(yield'a',yield'b');//OK
letinput=yield;//OK
}

function*foo(){
yield'aaa'
yield'bbb'
}
function*bar(){
foo()
yield'ccc'
yield'ddd'
}
letiterator=bar()
for(letvalueofiterator){
console.log(value)
}
//ccc
//ddd

function*foo(){
yield'aaa'
yield'bbb'
}
function*bar(){
yield*foo()//在bar函数中**执行**foo函数
yield'ccc'
yield'ddd'
}
letiterator=bar()
for(letvalueofiterator){
console.log(value)
}
//aaa
//bbb
//ccc
//ddd

function*gen(x){
lety=2*(yield(x+1))//注意：yield表达式如果用在另一个表达式中，必须放在圆括号里面
letz=yield(y/3)
returnx+y+z
}
letit=gen(5)
/***正确的结果在这里***/
console.log(it.next())//首次调用next，函数只会执行到“yield(5+1)”暂停，并返回{value:6,done:false}
console.log(it.next())//第二次调用next，没有传递参数，所以y的值是undefined，那么y/3当然是一个NaN，所以应该返回{value:NaN,done:false}
console.log(it.next())//同样的道理，z也是undefined，6+undefined+undefined=NaN，返回{value:NaN,done:true}

{
function*gen(x){
lety=2*(yield(x+1))//注意：yield表达式如果用在另一个表达式中，必须放在圆括号里面
letz=yield(y/3)
returnx+y+z
}
letit=gen(5)
console.log(it.next())//正常的运算应该是先执行圆括号内的计算，再去乘以2，由于圆括号内被yield返回5+1的结果并暂停，所以返回{value:6,done:false}
console.log(it.next(9))//上次是在圆括号内部暂停的，所以第二次调用next方法应该从圆括号里面开始，就变成了lety=2*(9)，y被赋值为18，所以第二次返回的应该是18/3的结果{value:6,done:false}
console.log(it.next(2))//参数2被赋值给了z，最终x+y+z=5+18+2=25，返回{value:25,done:true}
}

{
letobj={}
function*gen(){
yield4
yield5
yield6
}
obj[Symbol.iterator]=gen
for(letvalueofobj){
console.log(value)
}
//4
//5
//6
console.log([...obj])//[4,5,6]
}

{
function*gen(){
yield1
yield2
yield3
yield4
return5
}
for(letitemofgen()){
console.log(item)
}
//1234
}

{
function*gen(){
yield1
yield2
yield3
}
letit=gen()
it.next()//{value:1,done:false}
it.return('ending')//{value:"ending",done:true}
it.next()//{value:undefined,done:true}
}

{
letcount=6//声明一个全局变量
//具体抽奖逻辑的方法
functiondraw(){
//执行一段抽奖逻辑
//...
//执行完毕
console.log(`剩余${count}次`)
}
//执行抽奖的方法
functionstartDrawing(){
if(count>0){
count--
draw(count)
}
}
letbtn=document.createElement('button')
btn.id='start'
btn.textContent='开始抽奖'
document.body.appendChild(btn)
document.getElementById('start').addEventListener('click',function(){
startDrawing()
},false)
}[objectObject]

事实上，抽奖通常是每个人自己来抽，每抽一次就调用一次抽奖方法，而不是点一次就一次性就全部运行完，是可暂停的，这个不就是 Generator 函数的意义所在吗？

//具体抽奖逻辑的方法
functiondraw(count){
//执行一段抽奖逻辑
//...
console.log(`剩余${count}次`)
}
//执行抽奖的方法
function*remain(count){
while(count>0){
count--
yielddraw(count)
}
}
letstartDrawing=remain(6)
letbtn=document.createElement('button')
btn.id='start'
btn.textContent='开始抽奖'
document.body.appendChild(btn)
document.getElementById('start').addEventListener('click',function(){
startDrawing.next()
},false)

{
//请求的方法
function*ajax(){
yieldnewPromise((resolve,reject)=>{
//此处用一个定时器来模拟请求数据的耗时，并约定当返回的json中code为0表示有新数据更新
setTimeout(()=>{
resolve({code:0})
},200)
})
}
//长轮询的方法
functionupdate(){
letpromise=ajax().next().value//返回的对象的value属性是一个Promise实例对象
promise.then(res=>{
if(res.code!=0){
setTimeout(()=>{
console.log('2秒后继续查询.....')
update()
},2000)
}else{
console.log(res)
}
})
}
update()
}