每天3分钟，重学ES6-ES12(十三)不常用但却常问的生成器函数

2022-09-19 14:19:58 浏览数 (1)

theme: juejin

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第25天，点击查看活动详情

每天3分钟，重学ES6-ES12文章汇总

前言

今天开始和大家一起系统的学习ES6 ,每天3分钟，用一把斗地主的时间，重学ES6 ，前面我们介绍了迭代器今天继续介绍生成器和生成器函数

什么是生成器?

  • 生成器是ES6中新增的一种函数控制、使用的方案，它可以让我们更加灵活的控制函数什么时候继续执行、暂停执行等。
  • 平时我们会编写很多的函数，这些函数终止的条件通常是返回值或者发生了异常。
  • 生成器函数也是一个函数，但是和普通的函数有一些区别:
    • 首先，生成器函数需要在function的后面加一个符号: *
    • 其次，生成器函数可以通过yield关键字来控制函数的执行流程:
    • 最后，生成器函数的返回值是一个Generator(生成器):
  • 生成器事实上是一种特殊的迭代器; MDN:Instead, they return a special type of iterator, called a Generator.

代码演示

我们新建一个生成器函数foo,通过yield 分割。当执行一次next是，遇到yield 会自动中断， 这样函数就可以通过我们在外部控制一步一步执行。

代码语言：javascript复制
//生成器函数 
function* foo(){ 
    console.log(1) 
    const value1 =10 
    console.log(value1) 
    const n = yield value1 //可以在中断的时候返回值 
    const value2 =20 * n 
    console.log(value2) 
    yield
    
    const value3 =30 
    console.log(value3) 
    yield
    
    console.log(2) 
} 
const generator = foo() 
generator.next() 
generator.next(100) //可传入值 generator.next()

生成器函数执行过程

  • 生成器函数foo的执行体压根没有执行，它只是返回了一个生成器对象
  • 那么它执行函数中的东西呢?调用next即可;
  • 通过yield来返回结果;
  • next函数的时候，可以给它传递参数，那么这个参数会作为上一个yield语句的返回值;
  • 生成器提前结束 – return函数
    • return传值后这个生成器函数就会结束，之后调用next不会继续生成值了;
  • 生成器抛出异常 – throw函数
    • 抛出异常后我们可以在生成器函数中捕获异常;
    • 但是在catch语句中不能继续yield新的值了，但是可以在catch语句外使用yield继续中断函数的执行; ```js const value1 = 100 try { yield value1 } catch (error) { console.log("捕获到异常情况:", error)

    yield "abc" // 不会执行 } console.log("第二段代码继续执行") const value2 = 200 yield value2

代码语言：javascript复制
# 生成器实现迭代器
```js
function* createArrayIterator(arr) {

  // 3.第三种写法 yield*
  yield* arr

  // 2.第二种写法
  // for (const item of arr) {
  //   yield item
  // }
  // 1.第一种写法
  // yield "abc" // { done: false, value: "abc" }
  // yield "cba" // { done: false, value: "abc" }
  // yield "nba" // { done: false, value: "abc" }
}

const names = ["abc", "cba", "nba"]
const namesIterator = createArrayIterator(names)

console.log(namesIterator.next())
console.log(namesIterator.next())
console.log(namesIterator.next())
console.log(namesIterator.next())

异步方案处理

介绍了我们前面的Promise、生成器等，我们目前来看一下异步代码的最终处理方案。

  • 需求:
    • 我们需要向服务器发送网络请求获取数据，一共需要发送三次请求;
    • 第二次的请求url依赖于第一次的结果;
    • 第三次的请求url依赖于第二次的结果;
    • 依次类推;
代码语言：javascript复制
function requestData(url) {
  // 异步请求的代码会被放入到executor中
  return new Promise((resolve, reject) => {
    // 模拟网络请求
    setTimeout(() => {
      // 拿到请求的结果
      resolve(url)
    }, 2000);
  })
}
function* getData() {
  const res1 = yield requestData("url")
  const res2 = yield requestData(res1   "aaa")
  const res3 = yield requestData(res2   "bbb")
  const res4 = yield requestData(res3   "ccc")
  console.log(res4)
}

但是上面的代码其实看起来也是阅读性比较差的，有没有办法可以继续来对上面的代码进行优化呢?

代码语言：javascript复制
function* getData(){ 
    const res1 = yield requestData("why") 
    const res2 = yield requestData(res1 'bbb') 
    const res3 = yield requestData(res2 'ccc') 
    console.log(res3) 
}
// 1> 手动执行生成器函数
const generator = getData()
generator.next().value.then(res => {
  generator.next(res).value.then(res => {
    generator.next(res).value.then(res => {
      generator.next(res)
    })
  })
})
// 2> 自己封装了一个自动执行的函数
function execGenerator(genFn) {
  const generator = genFn()
   function exec(res) {
     const result = generator.next(res)
     if (result.done) {
       return result.value
     }
     result.value.then(res => {
       exec(res)
     })
  }
  exec()
}

execGenerator(getData)

这其实也就是我们ES6中提出的generator 生成器函数，也是为了解决promise 异步回调地狱的问题。同是也增加了代码量，不太语义化，因此后面又提出了async/await

python ecmascript java php javascript

0 人点赞