跳到主要內容
← 回到學習

學習 · 面試考題

Generator functions 生成器函式

By Kurau2 分鐘閱讀

目錄 · 3 個段落
  1. 01基本語法
  2. 02核心概念
  3. 03實用場景

**function*** 宣告式（function 關鍵字後面跟著一個星號）定義了一個_生成器函式（generator function）_，他會回傳一個生成器（Generator） 物件。

基本語法

function* myGenerator() {
  yield 1;
  yield 2;
  yield 3;
}
 
const gen = myGenerator();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }
javascript

核心概念

  • yield：暫停函式執行並回傳一個值，下次呼叫 next() 時從暫停處繼續
  • next()：恢復生成器執行，回傳 { value, done } 物件
  • return()：強制結束生成器
  • throw()：向生成器內部拋出錯誤

實用場景

1. 無限序列

function* fibonacci() {
  let [a, b] = [0, 1];
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}
 
const fib = fibonacci();
console.log(fib.next().value); // 0
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2
javascript

2. 搭配 for...of 迭代

function* range(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
}
 
for (const num of range(1, 5)) {
  console.log(num); // 1, 2, 3, 4, 5
}
javascript

3. 非同步流程控制（搭配 Promise）

在 async/await 出現之前，Generator 常用來處理非同步流程。現在 async/await 本質上就是 Generator + Promise 的語法糖。

目錄