很开心大家能 来到本篇笔记
generator 还是内容 蛮多的,不太好理解,我试着说给大家听,莫着急,一切都不是事
generator 生成器函数 是个什么东西呢, 首先我们原来的函数
比如下面的
function show(){
// 第一步
cosole.log('a')
//.....
//.....
//第 4 步
console.log('b')
}
上面的函数就是我们原来的函数, 丫的要执行的话, 会 从第一步一口气走完最后 一步 (也就是第四步)
而我们的generator 函数呢, 写法如下:
function * show(){
// 1, 第一步
console.log('a')
yield;
// 2 第二步
console.log('b')
}
它可不是, 它啊, 你 踹一角,它才走一下, 比如上面的你要 想 走完, 就 得 踹两下!
//1, 得到生成器函数对象
let a = show();
// 2, 踹一脚
let result1 = a.next()
let result2 = a.next();
上面就是 踹两脚,打印效果我给大家截图
行吧,上面的好理解,下面我们继续!
假如我们修改下代码:
//1, 得到生成器函数对象
let a = show();
// 2, 踹一脚
let result1 = a.next()
console.log(result1)
let result2 = a.next();
console.log(result2)
我们观察下result1 是个什么东西:
你会发现它的 结果是个对象,第一个为结果,第二个 为是否执行完(我理解为状态 )
当 done 为 true 就表示全部执行完了,这样 ,你 无论 咋踹,它都 不会 再动了!
//1, 得到生成器函数对象
let a = show();
// 2, 踹一脚
let result1 = a.next()
console.log(result1)
let result2 = a.next();
console.log(result2)
a.next()
a.next()
a.next()
a.next()
上面 添加a.next() 没有任何反应,因为状态已经执行完 了
下面我给大家来个复杂的:
大家看 仔细喽:
function * show(a1,b1){
// 这是做菜的初始材料! 很容易理解 打出a1 和b1
console.log(a1)
console.log(b1)
// 1, 第一步
console.log('a')
// 99 第一步里的! 所以会显示在result1中的value 中
let c = yield 99;
// c 是第二步的,所以会接受 a.next(88)
console.log(c)
// 2 第二步
console.log('b')
return 100;
}
oBtn.onclick = function(){
//1, 得到生成器函数对象
let a = show('action','lalala');
// 2, 踹一脚
let result1 = a.next(10)
console.log(result1)
let result2 = a.next(88);
console.log(result2)
}
结果:
下面是 分步图, 便于大家理解:
看到 没,因为c 是 属于第二步 的,所以只会接受 a.next(88) 中的88 而不会接受 第一步的 a.next(10) 中的10
同理 99 是第一步的,所以当然交给 result1
那么以上 就是 generator 函数 对象,那么这些特性,能带给我们啥好处呢?思考下,马上回来!