Home JavaScript

# 什么是生成器？

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

# 生成器函数执行

# foo 生成器对象

function* foo() {
  console.log('函数开始执行')
  yield
    
  const v1 = 'Lain'
  console.log('第一段代码' ,v1)
  yield
    
  const v2 = 'Saber'
  console.log('第二段代码',v2)
  yield
    
  const v3 = 'Neko'
  console.log('第三段代码',v3)
  yield
  
  console.log('函数执行结束')
}
foo()
    

  • 我们发现上面的生成器函数 foo 的执行体压根没有执行，它只是返回了一个生成器对象。
    • 



# yield


    

  • 那么我们如何可以让它执行函数中的东西呢？调用 next 即可
    • 

  • 但是从下面可以看出 generator.next () 是没有返回值的
    • 



function* foo() {
  const lain = 'Lain'
  console.log(lain) // Lain
}
// 返回生成器
const generator = foo()
console.log(generator.next()) // { value: undefined, done: false }
# yield 返回值


    

  • 但是我们很多时候不希望 next 返回的是一个 undefined，这个时候我们可以通过 yield 来返回结果
    • 

  • 当遇到 yield 时候值暂停函数的执行
    • 

  • 当遇到 return 时候生成器就停止执行
    • 



function* foo() {
  console.log('函数开始执行')
    
  const v1 = 'Lain'
  console.log('第一段代码', v1)
  yield v1
    
  const v2 = 'Saber'
  console.log('第二段代码',v2)
  yield v2
    
  console.log('函数执行结束')
  return '函数执行结束'
}
//generator 本质上是一个特殊的 iterator
const generator = foo()
// 函数开始执行
// 执行第一段代码 Lain
console.log(generator.next()) // { value: 'Lain', done: false }
// 执行第二段代码 Saber
console.log(generator.next()) // { value: 'Saber', done: false }
// 函数执行结束
console.log(generator.next()) // {value: ' 函数执行结束 ', done: true}
# 生成器传递参数 – next 函数


    

  • 函数既然可以暂停来分段执行，那么函数应该是可以传递参数的，我们是否可以给每个分段来传递参数呢？

      

    • 答案是可以的：
      • 

    • 我们在调用 next 函数的时候，可以给它传递参数，那么这个参数会作为上一个 yield 语句的返回值；
      • 

    • 注意：也就是说我们是为本次的函数代码块执行提供了一个值；
      • 

    

    • 



function* foo(m) {
  console.log('函数开始执行') // 函数开始执行
    
  const v1 = 'Lain'
  console.log('第一段代码', v1 + m) // 第一段代码  yield 第一个参数可以传给函数来拿
  const val = yield v1
    
  const v2 = 'Saber' + val
  console.log('第二段代码',v2) // 第二段代码 Saber-Lain
  yield v2
  console.log('函数执行结束') // 函数执行结束
  return '函数执行结束'
}
// 返回生成器
const generator = foo('yield第一个参数可以传给函数来拿')
// 函数开始执行
console.log(generator.next()) // {value: 'Lain', done: false}
console.log(generator.next('-Lain')) // {value: 'Saber-Lain', done: false}
console.log(generator.next()) // {value: ' 函数执行结束 ', done: true}
# 生成器 return 终止执行


    

  • 还有一个可以给生成器函数传递参数的方法是通过 return 函数
    • 

  • return 传值后这个生成器函数就会结束，之后调用 next 不会继续生成值了；
    • 



function* foo() {
  console.log('函数开始执行') 
    
  const v1 = 'Lain'
  console.log('第一段代码', v1) 
  yield v1
  const v2 = 'Saber'
  console.log('第二段代码',v2) 
  yield v2
  console.log('函数执行结束') 
  return '函数执行结束'
}
// 返回生成器
const generator = foo()
// 函数开始执行
// 第一段代码 Lain
console.log(generator.next()) // {value: 'Lain', done: false}
console.log(generator.return('终止执行'))  // {value: ' 终止执行 ', done: true}
//generator.return 将函数提前终止掉了 相当于终止执行 后面的 next 就不会执行了
console.log(generator.next()) // { value: undefined, done: true }
console.log(generator.next()) // { value: undefined, done: true }
console.log(generator.next()) // { value: undefined, done: true }
console.log(generator.next()) // { value: undefined, done: true }
# 生成器 throw 抛出异常


    

  • 除了给生成器函数内部传递参数之外，也可以给生成器函数内部抛出异常：

      

    • 抛出异常后我们可以在生成器函数中捕获异常；
      • 

    • 但是在 catch 语句中不能继续 yield 新的值了，但是可以在 catch 语句外使用 yield 继续中断函数的执行；
      • 

    

    • 



function* foo() {
  console.log('函数开始执行') 
    
  const v1 = 'Lain'
  try {
    yield v1
  } catch (err) {
    console.log('捕获到异常', err) // 捕获到异常 233
    yield err
  }
  const v2 = 'Saber'
  yield v2
  console.log('函数执行结束') 
  return '函数执行结束'
}
// 返回生成器
const generator = foo()
// 函数开始执行
console.log(generator.next()) // {value: 'Lain', done: false}
// 传入异常信息
console.log(generator.throw(233)) // {value: 233, done: false}
    

  • 可能应用的场景
    • 



function* foo() {
  console.log('函数开始执行') 
    
  const v1 = 'Lain'
  try {
    yield v1
  } catch (err) {
    console.log(err) // Saber
    yield err
  }
  const v2 = 'Saber'
  yield v2
  console.log('函数执行结束') 
  return '函数执行结束'
}
// 返回生成器
const generator = foo()
const result = generator.next()
if (result.value !== 'Saber') {
  console.log(generator.throw('Saber')) // {value: 'Saber', done: false}
}
# 生成器替代迭代器


# 写法 1


function* createArrayIterator(fate, i = 0) {
  yield fate[i++]
  yield fate[i++]
  yield fate[i++]
}
const fate = createArrayIterator(['Lancer', 'Saber', 'Caster'])
console.log(fate.next()) // {value: 'Lancer', done: false}
console.log(fate.next()) // {value: 'Saber', done: false} 
console.log(fate.next()) // {value: 'Caster', done: false}
console.log(fate.next()) // {value: undefined, done: true}
# 写法 2


function* createArrayIterator(fate) {
  for (const item of fate) {
    yield item
  }
}
const fate = createArrayIterator(['Lancer', 'Saber', 'Caster'])
console.log(fate.next()) // {value: 'Lancer', done: false}
console.log(fate.next()) // {value: 'Saber', done: false} 
console.log(fate.next()) // {value: 'Caster', done: false}
console.log(fate.next()) // {value: undefined, done: true}
# 写法 3


function* createArrayIterator(fate) {
    // 跟上可迭代对象
    yield* fate
}
const fate = createArrayIterator(['Lancer', 'Saber', 'Caster'])
console.log(fate.next()) // {value: 'Lancer', done: false}
console.log(fate.next()) // {value: 'Saber', done: false} 
console.log(fate.next()) // {value: 'Caster', done: false}
console.log(fate.next()) // {value: undefined, done: true}
# 迭代范围内数字


function* createRangeIterator(start, end) {
  while (start < end) {
    yield start++
  }
}
const rangeIterator = createRangeIterator(1, 5)
console.log(rangeIterator.next()) // {value: 1, done: false}
console.log(rangeIterator.next()) // {value: 2, done: false}
console.log(rangeIterator.next()) // {value: 3, done: false}
console.log(rangeIterator.next()) // {value: 4, done: false}
console.log(rangeIterator.next()) // {value: undefined, done: true}
# 生成器替代迭代器


    

  • 这个案例是迭代器用的案例 当时的写法是比较麻烦
    • 



# 写法 1


class Charecters {
  constructor(name, age, frineds) {
    this.name = name
    this.age = age
    this.frineds = frineds
  }
  entery(newCharecter) {
    this.frineds.push(newCharecter)
  }
  [Symbol.iterator] = function* () {
    yield* this.frineds
  }
}
const lain = new Charecters('lain', 16, ['saber'])
lain.entery('樱岛麻衣')
// 变成可迭代对象了
for (const item of lain){
  console.log(item) //saber  樱岛麻衣
}
# 写法 2


class Charecters {
  constructor(name, age, frineds) {
    this.name = name
    this.age = age
    this.frineds = frineds
  }
  entery(newCharecter) {
    this.frineds.push(newCharecter)
  }
  *[Symbol.iterator]() {
    yield* this.frineds
  }
}
const lain = new Charecters('lain', 16, ['saber'])
lain.entery('樱岛麻衣')
// 变成可迭代对象了
for (const item of lain){
  console.log(item) //saber  樱岛麻衣
}

      

          
      

  


   


    

  
    
      
    
    Update on
    
  
  
      
        
      
      Views
      
      times
  



      


  
  
Give me a cup of [coffee]~(￣▽￣)~*

  

      
      

        Nico Niconi WeChat Pay
        
WeChat Pay

      

      
      

        Nico Niconi Alipay
        
Alipay