es6的Generator函数用法

目录

1. 基本概念
2. 语法特性
3. 使用场景
4. 异步应用
5. 高级用法
6. 最佳实践

基本概念

什么是 Generator 函数？

Generator 函数是 ES6 提供的一种异步编程解决方案，它可以让函数执行过程中被暂停和恢复。Generator 函数通过 function* 声明，内部使用 yield 关键字暂停执行。

特点

1. 函数体内部使用 yield 表达式
2. 函数返回一个遍历器对象
3. 可以暂停执行和恢复执行
4. 可以记住上一次运行状态

语法特性

1. 基本语法

function* generator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = generator();
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 }

2. yield* 表达式

function* foo() {
  yield 'a';
  yield 'b';
}

function* bar() {
  yield 'x';
  yield* foo();  // 委托给其他 Generator 函数
  yield 'y';
}

const gen = bar();
console.log([...gen]); // ['x', 'a', 'b', 'y']

3. 传值与返回值

function* dataFlow() {
  const x = yield 1;
  const y = yield (x + 1);
  return x + y;
}

const gen = dataFlow();
console.log(gen.next());     // { value: 1, done: false }
console.log(gen.next(2));    // { value: 3, done: false }
console.log(gen.next(3));    // { value: 5, done: true }

使用场景

1. 异步操作流程控制

function* loadData() {
  try {
    const users = yield fetchUsers();
    const posts = yield fetchPosts(users[0].id);
    const comments = yield fetchComments(posts[0].id);
    return { users, posts, comments };
  } catch (error) {
    console.error('Error:', error);
  }
}

// 执行器函数
function run(generator) {
  const gen = generator();
  
  function next(data) {
    const result = gen.next(data);
    if (result.done) return result.value;
    
    result.value.then(data => next(data));
  }
  
  return next();
}

run(loadData);

2. 迭代器实现

function* range(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
}

const numbers = range(1, 5);
for (const num of numbers) {
  console.log(num); // 1, 2, 3, 4, 5
}

3. 状态机

function* trafficLight() {
  while (true) {
    yield 'red';
    yield 'green';
    yield 'yellow';
  }
}

const light = trafficLight();
console.log(light.next().value); // 'red'
console.log(light.next().value); // 'green'
console.log(light.next().value); // 'yellow'

异步应用

1. 异步任务队列

function* taskQueue() {
  const results = [];
  
  try {
    results.push(yield task1());
    results.push(yield task2());
    results.push(yield task3());
    return results;
  } catch (error) {
    console.error('Task failed:', error);
  }
}

2. 异步数据处理

function* processData(data) {
  for (const item of data) {
    const processed = yield transform(item);
    yield save(processed);
  }
}

高级用法

1. 双向通信

function* chat() {
  while (true) {
    const question = yield;
    if (question === 'bye') break;
    yield `Answer to: ${question}`;
  }
}

const conversation = chat();
conversation.next();           // 启动生成器
console.log(conversation.next('How are you?').value);  // "Answer to: How are you?"

2. 错误处理

function* errorHandler() {
  try {
    const a = yield operation1();
    const b = yield operation2();
    const c = yield operation3();
  } catch (error) {
    yield `Error occurred: ${error.message}`;
  }
}

最佳实践

1. 使用执行器函数

function run(gen) {
  const it = gen();
  
  return new Promise((resolve, reject) => {
    function next(data) {
      const { value, done } = it.next(data);
      if (done) return resolve(value);
      
      Promise.resolve(value)
        .then(data => next(data))
        .catch(reject);
    }
    
    next();
  });
}

2. 合理使用 yield*

function* combined() {
  yield* generator1();
  yield* generator2();
  yield* generator3();
}

总结

1. Generator 优势：

   • 控制函数执行流程
   • 异步操作同步化表达
   • 状态管理
   • 迭代器实现

2. 使用场景：

   • 异步操作控制
   • 数据流处理
   • 状态机实现
   • 迭代器生成

3. 注意事项：

   • 合理使用执行器
   • 错误处理
   • 避免过度使用
   • 考虑可读性