【ES6系列】Generator

通俗的講 Generators 是可以用來控制迭代器的函數。

// ES5循環寫法
function loop() {
  for (let i = 0; i < 5; i++) {
    console.log(i)
  }
}
loop()

// ES6 generator 寫法
function * loop() {
  for (let i = 0; i < 5; i++) {
    yield console.log(i) // 函數內部使用yield暫停程序執行
  }
}
const l = loop()
l.next() // 0 函數外部使用next()恢復執行
l.next() // 1
l.next() // 2
l.next() // 3
l.next() // 4

常規的循環只能一次遍歷完所有值，Generator 可以通過調用 next 方法拿到依次遍歷的值，讓遍歷的執行變得“可控”。

語法

function * gen () {
  yield 1
  yield 2
  yield 3
}

let g = gen()
// "Generator { }"

以上是 Generator 的定義方法，有幾個點值得注意：

1. 比普通函數多一個 *
2. 函數內部用 yield 來控制程序的執行的“暫停”
3. 函數的返回值通過調用 next 來“恢復”程序執行

function* gen() {
  let val
  val = yield 1
  console.log(val)
}
const l = gen()
l.next() // 找到 yield 但沒有代碼需要執行
l.next() // 未找到yield，沒有返回值 undefined
// Generator原理： Generator 函數返回一個對象，對象有next()方法，next()在函數體內找yield或函數結尾，找到一個就結束

Generator基本語法描述：

1、Generator 是一個函數，在定義時比普通函數多一個*

2、在Generator 函數內部，可以通過 yield 控制程序停止執行

3、Generator 函數可以通過在yield 後加*進行嵌套

4、可以用next()恢復執行，同時會返回當前執行的狀態和數據{value: 當前的執行結果, done: 是否執行完畢}

 Generator 讀法擴展：

function* gen() {
  let val
  val = (yield [1, 2, 3]) + 7
  console.log(val)
}
const l = gen()
// next()如果傳參數則是作爲 yield 表達式的返回值，替換yeld表達式，不傳參數則yield 表達式返回 undefined
console.log(l.next(10)) 
console.log(l.return()) // return 方法可以讓 Generator 遍歷終止，有點類似 for 循環的 break。
console.log(l.next(20))

 Generator 高級語法：

    1、next()可以傳值，用來修改內部運行數據。如果傳參數則是作爲 yield 表達式的返回值，替換yeld表達式，不傳參數則yield 表達式返回 undefined

    2、return() 方法可以讓 Generator 遍歷提前終止，有點類似 for 循環的 break。

    3、可以從外部向內部拋出異常，在內部通過 try{}catch(e){} 捕獲異常。程序運行不會受影響

// 通過return() 提前停止迭代
function* gen() {
  let val
  val = (yield [1, 2, 3]) + 7
  console.log(val)
}
const l = gen()
console.log(l.next(10)) // {value: Array(3), done: false}
console.log(l.return(100)) // {value: 100, done: true}
console.log(l.next(20)) // {value: undefined, done: true}

// 函數外部拋出異常，函數內部捕獲異常
function* gen() {
  while (true) {
    try {
      yield 1
    } catch (e) {
      console.log(e.message)
    }
  }
}
const g = gen()
console.log(g.next()) // {value: 1, done: false}
console.log(g.next()) // {value: 1, done: false}
console.log(g.next()) // {value: 1, done: false}
console.log(g.next()) // {value: 1, done: false}
console.log(g.next()) // {value: 1, done: false}
g.throw(new Error('something error')) // something error
console.log(g.next()) // {value: 1, done: false}

 

業務場景：年會抽獎模擬 一等獎：一名 二等獎：三名 三等獎：五名

// ES5 實現方法
function draw(first = 1, second = 3, third = 5) {
  let firstPrize = ['1A', '1B', '1C', '1D', '1E']
  let secondPrize = ['2A', '2B', , '2C', '2D', '2E', '2F', '2G', '2H', '2I']
  let thirdPrize = ['3A', '3B', , '3C', '3D', '3E', '3F', '3G', '3H', '3I', '3K', '3J']
  let result = []
  let random
  // 抽一等獎
  for (let i = 0; i < first; i++) {
    random = Math.floor(Math.random() * firstPrize.length)
    result = result.concat(firstPrize.splice(random, 1))
  }
  // 抽二等獎
  for (let i = 0; i < second; i++) {
    random = Math.floor(Math.random() * secondPrize.length)
    result = result.concat(secondPrize.splice(random, 1))
  }
  // 抽三等獎
  for (let i = 0; i < third; i++) {
    random = Math.floor(Math.random() * thirdPrize.length)
    result = result.concat(thirdPrize.splice(random, 1))
  }
  return result
}
let t = draw()
for (let value of t) {
  console.log(value)
}

// ES6 實現方法
function* draw(first = 1, second = 3, third = 5) {
  let firstPrize = ['1A', '1B', '1C', '1D', '1E']
  let secondPrize = ['2A', '2B', , '2C', '2D', '2E', '2F', '2G', '2H', '2I']
  let thirdPrize = ['3A', '3B', , '3C', '3D', '3E', '3F', '3G', '3H', '3I', '3K', '3J']
  let count = 0
  let random
  while (1) {
    if (count < first) { // 抽一等獎
      random = Math.floor(Math.random() * firstPrize.length)
      yield firstPrize[random]
      count++ // 抽一次計數器+1
      firstPrize.splice(random, 1)
    } else if (count < first + second) { // 抽二等獎
      random = Math.floor(Math.random() * secondPrize.length)
      yield secondPrize[random]
      count++ // 抽一次計數器+1
      secondPrize.splice(random, 1)
    } else if (count < first + second + third) {
      random = Math.floor(Math.random() * thirdPrize.length)
      yield thirdPrize[random]
      count++ // 抽一次計數器+1
      thirdPrize.splice(random, 1)
    } else { // 如果三個獎項都抽完
      return false
    }
  }
}
let d = draw()
console.log(d.next().value)
console.log(d.next().value)
console.log(d.next().value)
console.log(d.next().value)
console.log(d.next().value)
console.log(d.next().value)
console.log(d.next().value)
console.log(d.next().value)
console.log(d.next().value)
console.log(d.next().value) // false

場景二：輸出3的倍數。只要調用就執行並且有值

function* count(x = 1) {
  while (1) {
    if (x % 3 === 0) {
      yield x
    }
    x++
  }
}
let num = count()
console.log(num.next().value)
console.log(num.next().value)
console.log(num.next().value)
console.log(num.next().value)
console.log(num.next().value)
console.log(num.next().value)

思考：

1、用 Generator 實現一個斐波那契數列

             斐波那契數列 特性：從第三個數開始，值是前兩個數之和

// 遞歸實現方法：
function fibonacci(m) {
  if (m < 3) return m
  else return fibonacci(m - 1) + fibonacci(m - 2)
// else return arguments.callee(m - 1) + arguments.callee(m - 2)
}
console.log(fibonacci(1)) // 1
console.log(fibonacci(2)) // 2
console.log(fibonacci(3)) // 3
console.log(fibonacci(4)) // 5
console.log(fibonacci(8)) // 34

// generator 實現方法
function* gen() {
  let [prev, curr] = [0, 1]
  for (;;) { // 如果3個語句全部省略循環體永遠循環下去
    [prev, curr] = [curr, curr + prev] // 解構賦值，用當前值替換上一個的值，當前值爲上一個值+上一個當前值。很繞
    yield curr // 輸出當前數值
  }
}

for (let n of gen()) {
  if (n > 1000) {
    break
  }
  console.log(n)
}
// 1
// 2
// 3
// 5
// 8
// 13
// 21
// 34
// 55
// 89
// 144
// 233
// 377
// 610
// 987

2、用 Generator 給自定義數據結構寫一個遍歷器