JavaScript基本功之生成器(generator)

生成器是什么

  • 是一个特殊函数,特殊的迭代器(Iterator)
  • 定义: 函数名前有星号,内部使用 yield 语法
  • 返回: 内部包含next方法的迭代器
  • 执行: 通过调用 next() 方法消耗生成器,直至遇到 yield 关键字。
js 复制代码
// 定义生成器函数
function * gen(){
    console.log('hello generator!')
}
// 生成器函数返回
let genResult = gen()
console.log('genResult=',genResult)
// // genResult=gen{<suspended>} 内部包含Prototype-next(function)

demo: 生成器的迭代

  • for-of 遍历
js 复制代码
// for-of迭代遍历
function * gen(){    
    yield "小学生"; // 相当于执行next()返回 {value: '小学生', done: false} 
    yield "中学生" 
    yield "大学生" 
}                 

// TEST 
for (const v of gen()) {
  console.log('v=',v)
}
// v= 小学生
// v= 中学生
// v= 大学生

demo:生成器执行next

  • yield的参数是next方法的返回值
  • yield 把代码分成N段执行
  • next 方法可以分段执行
js 复制代码
// 定义生成器函数
// yield 把代码分成4段执行
function * gen(){
    console.log('111')
    yield "小学生"; // 第1段
    console.log('222')
    yield "中学生" // 第2段
    console.log('333')
    yield "大学生" // 第3段
    console.log('444')
}                 // 第4段

// TEST 
let g = gen()
console.log('g.next()=',g.next())
// 111
// g.next()= {value: '小学生', done: false}
console.log('g.next()=',g.next())
// 222
// g.next()= {value: '中学生', done: false}
console.log('g.next()=',g.next())
// 333
// g.next()= {value: '大学生', done: false}
console.log('g.next()=',g.next())
// 444
// g.next()= {value: undefined, done: true}

demo:生成器yield的返回值

  • next方法的参数是yield的返回值
  • 第N个next方法的参数是N-1个yield的返回值
js 复制代码
// 定义生成器函数
// 第N个next方法的参数是N-1个yield的返回值
function * gen(){    
    const one = yield "小学生"
    console.log('one=',one)
    const two = yield "中学生" 
    console.log('two=',two)
    const three = yield "大学生" 
    console.log('three=',three)
}                 

// TEST 
const g = gen()
g.next();
g.next('AAA'); // 第2个next是第1个yield的返回值
g.next('BBB'); // 第3个next是第2个yield的返回值
g.next('CCC'); // 第4个next是第3个yield的返回值
// one= AAA
// two= BBB
// three= CCC

demo: 异步任务同步化表达

  • 需求: 按顺序获取异步请求的结果
  • 顺序: 用户数据-》订单数据-》商品数据
  • 异步: 使用 settimout 模拟
js 复制代码
// 使用回调方式执行: 回调地狱
function getData() {
  let result = []
  setTimeout(() => {
    result.push('用户数据')
    setTimeout(() => {
      result.push('订单数据')
      setTimeout(() => {
        result.push('商品数据')
        consumeData(result)
      }, 500)
    }, 500);
  }, 500)
}
function consumeData(data) {
  console.log('data=', data)
}
getData()
// getData start...
// getUsers
// getOrders
// getGoods
// getData end...
// consumeData data= (3) ['用户数据', '订单数据', '商品数据']
js 复制代码
// 使用生成器方式执行: 执行顺序更清晰
let result = []
function getUsers() {
    setTimeout(() => {
        console.log('getUsers...')
        result.push('用户数据')
        iter.next() // 2.执行 getOrders
    }, 500)
}
function getOrders() {
    setTimeout(() => {
        console.log('getOrders...')
        result.push('订单数据')
        iter.next()  // 3.执行 getGoods
    }, 500)
}
function getGoods() {
    setTimeout(() => {
        console.log('getGoods...')
        result.push('商品数据')
        iter.next() // 4.执行getGoods在getData后面的代码
        consumeData(result)
    }, 500)
}
function* getData() {
    console.log('getData start')
    yield getUsers()
    yield getOrders()
    yield getGoods()
    console.log('getData end')
}

function consumeData(data) {
    console.log('consumeData data=', data)
}

let iter = getData()
iter.next() // 1.执行 getUsers
// getData start
// getUsers...
// getOrders...
// getGoods...
// getData end
// consumeData data= (3) ['用户数据', '订单数据', '商品数据']

demo: 生成器和迭代器结合

js 复制代码
// 遍历扑克牌 
// 生成器和迭代器结合使用 
// yield 相当于 next 方法 
const cards = {
  suits: ["♣️", "♦️", "♥️", "♠️"],
  courts: ["J", "Q", "K", "A"],
  [Symbol.iterator]:function*(){ // 迭代器+生成器
    for(let s of this.suits){
      for (let i = 2; i < 10; i++) yield s+i 
      for(let c of this.courts) yield s+c
    }
  }
}

// TEST1 for-of 遍历
let result = []
for (const v of cards) {
  result.push(v)
}
console.log('result=',result)
// result= (48) ['♣️2', '♣️3', '♣️4', '♣️5', '♣️6', '♣️7', '♣️8', '♣️9', '♣️J', '♣️Q', '♣️K', '♣️A', '♦️2', '♦️3', '♦️4', '♦️5', '♦️6', '♦️7', '♦️8', '♦️9', '♦️J', '♦️Q', '♦️K', '♦️A', '♥️2', '♥️3', '♥️4', '♥️5', '♥️6', '♥️7', '♥️8', '♥️9', '♥️J', '♥️Q', '♥️K', '♥️A', '♠️2', '♠️3', '♠️4', '♠️5', '♠️6', '♠️7', '♠️8', '♠️9', '♠️J', '♠️Q', '♠️K', '♠️A']

// TEST2 解构赋值
console.log('cards=',[...cards])
// cards= (48) ['♣️2', '♣️3', '♣️4', '♣️5', '♣️6', '♣️7', '♣️8', '♣️9', '♣️J', '♣️Q', '♣️K', '♣️A', '♦️2', '♦️3', '♦️4', '♦️5', '♦️6', '♦️7', '♦️8', '♦️9', '♦️J', '♦️Q', '♦️K', '♦️A', '♥️2', '♥️3', '♥️4', '♥️5', '♥️6', '♥️7', '♥️8', '♥️9', '♥️J', '♥️Q', '♥️K', '♥️A', '♠️2', '♠️3', '♠️4', '♠️5', '♠️6', '♠️7', '♠️8', '♠️9', '♠️J', '♠️Q', '♠️K', '♠️A']
相关推荐
_Legend_King5 分钟前
vue3 + elementPlus 日期时间选择器禁用未来及过去时间
javascript·vue.js·elementui
余生H7 分钟前
transformer.js(三):底层架构及性能优化指南
javascript·深度学习·架构·transformer
凡人的AI工具箱10 分钟前
15分钟学 Go 第 60 天 :综合项目展示 - 构建微服务电商平台(完整示例25000字)
开发语言·后端·微服务·架构·golang
景天科技苑20 分钟前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
chnming198726 分钟前
STL关联式容器之map
开发语言·c++
进击的六角龙27 分钟前
深入浅出:使用Python调用API实现智能天气预报
开发语言·python
檀越剑指大厂28 分钟前
【Python系列】浅析 Python 中的字典更新与应用场景
开发语言·python
石小石Orz29 分钟前
Three.js + AI:AI 算法生成 3D 萤火虫飞舞效果~
javascript·人工智能·算法
小行星12531 分钟前
前端预览pdf文件流
前端·javascript·vue.js
join833 分钟前
解决vue-pdf的签章不显示问题
javascript·vue.js·pdf