通俗的講 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 的定義方法,有幾個點值得注意:
- 比普通函數多一個 *
- 函數內部用 yield 來控制程序的執行的“暫停”
- 函數的返回值通過調用 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 給自定義數據結構寫一個遍歷器