石川es6课程---13-16、generator-认识生成器函数

石川es6课程---13-16、generator-认识生成器函数

一、总结

一句话总结：

` generator函数，中间可以停，到哪停呢，用 yield 配合，交出执行权

` 需要调用next()方法启动执行，需要遇到 yield 停, 踹一脚走一步

` generator函数前面加一个 * 两边可以有空格，或靠近函数或function：function *show2() {

` 背后实际生成多个小函数，实现走走停停

function show() {
    console.log('a')
    console.log('b')
}
show() // 普通函数

function *show2() {
    console.log('1')
    yield
    console.log('2')
}
let genObj = show2()
genObj.next() // 1
genObj.next() // 2
genObj.next() // 最后了，没有结果

 

 

1、generator-yield是啥？

- yield既可传参，又可以返回

- 第一个next()传参无效，只用来启动

- 如果函数前漏掉 *，就是普通函数，如果有yield会报错， ReferenceError: yield is not defined

function * show() {
    console.log('1')
    var a = yield
    console.log('2')
    console.log(a)
}
// yield 传参
var gen = show()
gen.next() // 1
gen.next() // 2 和 undefined 因为没有传参，yield没有返回值
var gen = show()
gen.next(10) // 1 第一次执行到yield，但没有执行赋值
gen.next(20) // 2 和 20

function* show2() {
    console.log('1')
    yield 10
    console.log('2')
}
// yield 返回
var gen = show2()
var res1 = gen.next()
console.log(res1) // { value: 10, done: false }
var res2 = gen.next()
console.log(res2)
// { value: undefined, done: true } 最后的value需要return返回

 

 

2、generator-实例？

Promise 适合一次读一组，generator 适合逻辑性的

// 带逻辑-generator
runner(function * () {
    let userData = yield $.ajax({url: 'getUserData'})

    if (userData.type == 'VIP') {
        let items = yield $.ajax({url: 'getVIPItems'})
    } else {
        let items = yield $.ajax({url: 'getItems'})
    }
})
// yield 实例，用同步方式写异步
server.use(function * () {
    let data = yield db.query(`select * from user_table`)
    this.body = data
})

 

 

 

二、generator-认识生成器函数

1.generator-认识生成器函数

• generator 生成器函数
  • 普通函数，一路到底
  • generator函数，中间可以停，到哪停呢，用 yield 配合，交出执行权
  • yield 有 放弃、退让、退位的意思
  • 需要调用next()方法启动执行，需要遇到 yield 停, 踹一脚走一步
  • generator函数前面加一个 * 两边可以有空格，或靠近函数或function
  • 背后实际生成多个小函数，实现走走停停

function show() {
    console.log('a')
    console.log('b')
}
show() // 普通函数

function *show2() {
    console.log('1')
    yield
    console.log('2')
}
let genObj = show2()
genObj.next() // 1
genObj.next() // 2
genObj.next() // 最后了，没有结果

2.generator-yield是啥

• yield

  • 既可传参，又可以返回
  • 第一个next()传参无效，只用来启动

• 如果函数前漏掉 *

  • 就是普通函数
  • 如果有yield会报错， ReferenceError: yield is not defined
  • yield 只能在Generator函数内部使用

function * show() {
    console.log('1')
    var a = yield
    console.log('2')
    console.log(a)
}
// yield 传参
var gen = show()
gen.next() // 1
gen.next() // 2 和 undefined 因为没有传参，yield没有返回值
var gen = show()
gen.next(10) // 1 第一次执行到yield，但没有执行赋值
gen.next(20) // 2 和 20

function* show2() {
    console.log('1')
    yield 10
    console.log('2')
}
// yield 返回
var gen = show2()
var res1 = gen.next()
console.log(res1) // { value: 10, done: false }
var res2 = gen.next()
console.log(res2)
// { value: undefined, done: true } 最后的value需要return返回

3.generator-实例

• Promise 适合一次读一组
• generator 适合逻辑性的

// 带逻辑-generator
runner(function * () {
    let userData = yield $.ajax({url: 'getUserData'})

    if (userData.type == 'VIP') {
        let items = yield $.ajax({url: 'getVIPItems'})
    } else {
        let items = yield $.ajax({url: 'getItems'})
    }
})

// yield 实例，用同步方式写异步
server.use(function * () {
    let data = yield db.query(`select * from user_table`)
    this.body = data
})

 

三、generator 生成器，函数

generator 生成器，函数

• 普通函数
  • 一路到底
• generator函数
  • 中间能暂停
• 使用场景
  • 请求数据

  function 函数(){
      //code
      ajax(xx,function(){
          //code回调方式
      })
      //code
  }
  function *函数(){
      //code
      yield ajax(xxx)
      //yield将整个生成函数分割成若干个普通小函数，通过next()依次执行函数
      //code
  }
  

yield

• 传参

        function *show(){
            alert(1)
            let a=yield
            alert(2)
        }
        let gen=show()
        //如果第一个next想要传参的话直接同正常函数一样
        function *show(num1,num2){
            alert(`${num1},${num2}`)
            alert(1)
            let a=yield
            alert(2)
        }
        let gen=show()
        let gen=show(99,88)
        gen.next(12)//第一个next没法给yield传参
        gen.next(5)

 

 

 

• 返回

        function *show(){
            alert('a')
            yield 12
            alert('b')
        }
        let gen=show()
        res1=gen.next()
        console.log(res1)//{value:12,done:false}
        res2=gen.next()
        console.log(res2)//{value:undefined(取决于函数体中的return值),done:true}