文章目录
1.Generator函数
function*
这种声明方式(function 关键字后跟一个星号)会定义一个生成器函数 (generator function),它返回一个Generator 对象
- 1.
生成器函数
- 2.
Generator 生成器对象
- function*:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/function*
- ECMAScript 6 入门Generator 函数的语法:https://es6.ruanyifeng.com/#docs/generator
生成器函数的特点:
在执行时能暂停,后面又能从暂停处继续执行
普通函数:
run-to-completion 模式
即:函数开始执行后,会一直执行,直到该函数所有语句执行完或遇到 return 返回,期间无法执行函数外的其他代码
生成器函数:
run-pause-run 模式
即:函数开始执行后,可以被暂停一次或多次,然后再恢复执行,暂停期间可以执行其他代码
Generator 对象(生成器对象),generator 函数的返回值
- 调用 generator 函数,并不会执行函数中的代码,而是返回一个 generator 对象
- 函数中的代码什么时候执行?调用 generator 对象的 next() 方法才会执行函数中的代码
generator 函数是否一次性执行
generator 函数中的代码,不是一次性执行完毕!
generator 函数中的代码执行时,执行到 yield,然后,函数中的代码就暂停执行了
const GeneratorDemo = () => {
// -- 1. generator 函数 vs. 普通函数
// const fn = () => {
// console.log('fn 函数执行了')
// return 1
// }
// const res = fn()
// console.log('返回值', res)
// generator 函数:需要在 function 关键字的后面加上一个 * 星号
// 注意:
// 1. 调用 generator 函数,函数中的代码并不会执行
// 2. generator 函数的返回值,是一个 generator 对象
// 3. 调用 generator对象 的 next() 方法,函数内部的代码才会执行
// 4. generator 函数中的代码可以暂停,可以通过 yield 关键字,让代码暂停
// 5. generator 函数个运行模式: 运行-暂停-运行
function* gen() {
console.log('gen 函数执行了')
yield
console.log('yield 后面的一行代码')
}
const g = gen()
g.next()
setTimeout(() => {
g.next()
}, 3000)
return <h1>Generator</h1>
}
export default GeneratorDemo
执行 generator 函数中的所有代码:
根据 next() 方法返回对象的 done 是否为 true 来判断
// 生成器函数
function* generator() {
yield 1
yield 2
}
// gen 生成器对象
const gen = generator()
console.log(gen.next()) // { value: 1, done: false }
console.log(gen.next()) // { value: 2, done: false }
console.log(gen.next()) // { value: undefined, done: true }