JavaScript系列（20）-- Generator应用详解

JavaScript Generator应用详解 🌟

今天，让我们深入探讨JavaScript中Generator的应用。Generator是ES6引入的强大特性，它为异步编程和迭代提供了优雅的解决方案。

Generator基础回顾 🎯

💡 小知识：Generator函数是一种特殊的函数，它可以在执行过程中被暂停和恢复。通过yield关键字，我们可以实现函数的分步执行，这为异步编程和迭代提供了强大的支持。

Generator的基本应用 📊

javascript">// 1. 基本的Generator函数
function* numberGenerator() {yield 1;yield 2;yield 3;
}const gen = numberGenerator();
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. Generator与迭代器
function* rangeGenerator(start, end) {for (let i = start; i <= end; i++) {yield i;}
}// 使用for...of遍历
for (const num of rangeGenerator(1, 5)) {console.log(num); // 1, 2, 3, 4, 5
}// 3. Generator与数据流
function* dataStream() {let index = 0;while (true) {const data = yield index++;if (data !== undefined) {index = data; // 允许外部注入数据}}
}

Generator的高级应用 🚀

javascript">// 1. 异步操作封装
function* fetchUserData() {try {const user = yield fetch('/api/user');const posts = yield fetch(`/api/posts/${user.id}`);const comments = yield fetch(`/api/comments/${posts[0].id}`);return { user, posts, comments };} catch (error) {console.error('Error fetching data:', error);}
}// 执行器函数
function runGenerator(generator) {const iterator = generator();function handle(yielded) {if (yielded.done) return Promise.resolve(yielded.value);return Promise.resolve(yielded.value).then(data => handle(iterator.next(data))).catch(error => handle(iterator.throw(error)));}return handle(iterator.next());
}// 2. 状态机实现
function* loginFlow() {while (true) {yield 'LOGGED_OUT';const credentials = yield 'WAITING_FOR_LOGIN';try {yield 'AUTHENTICATING';const user = yield authenticate(credentials);yield 'LOGGED_IN';yield* userSession(user);} catch (error) {yield 'LOGIN_ERROR';}}
}// 3. 协程实现
function* coroutine1() {yield 'coroutine1 start';yield* coroutine2();yield 'coroutine1 end';
}function* coroutine2() {yield 'coroutine2 execution';
}

Generator的实用工具 🛠️

javascript">// 1. Generator组合器
function* compose(...generators) {for (const generator of generators) {yield* generator();}
}// 2. 异步任务队列
class AsyncQueue {constructor() {this.queue = [];this.running = false;}*executor() {while (this.queue.length > 0) {const task = this.queue.shift();try {yield task();} catch (error) {console.error('Task execution error:', error);}}this.running = false;}addTask(task) {this.queue.push(task);if (!this.running) {this.running = true;runGenerator(this.executor.bind(this));}}
}// 3. 数据流处理
function* dataProcessor(source) {let buffer = [];try {for (const item of source) {buffer.push(item);if (buffer.length >= 3) {yield buffer;buffer = [];}}if (buffer.length > 0) {yield buffer;}} finally {console.log('Data processing completed');}
}

Generator的性能优化 ⚡

javascript">// 1. 惰性求值
function* lazyRange(start, end) {for (let i = start; i <= end; i++) {yield i;}
}function* lazyMap(iterable, mapper) {for (const item of iterable) {yield mapper(item);}
}function* lazyFilter(iterable, predicate) {for (const item of iterable) {if (predicate(item)) {yield item;}}
}// 使用示例
const numbers = lazyRange(1, 1000000);
const evenNumbers = lazyFilter(numbers, n => n % 2 === 0);
const multipliedNumbers = lazyMap(evenNumbers, n => n * 2);// 2. 内存优化
function* chunkProcessor(data, chunkSize) {for (let i = 0; i < data.length; i += chunkSize) {yield data.slice(i, i + chunkSize);}
}// 3. 计算缓存
function* memoizedGenerator() {const cache = new Map();while (true) {const input = yield;if (cache.has(input)) {yield cache.get(input);} else {const result = expensiveComputation(input);cache.set(input, result);yield result;}}
}

最佳实践建议 💡

错误处理

javascript">// 1. Generator错误处理模式
function* robustGenerator() {try {const a = yield operationA();const b = yield operationB(a);const c = yield operationC(b);return c;} catch (error) {console.error('Generator execution error:', error);yield* errorRecovery();} finally {yield cleanup();}
}// 2. 错误传播
function* errorPropagation() {try {yield* subGenerator();} catch (error) {yield error.message;}
}// 3. 安全迭代
function* safeIterator(iterable) {try {yield* iterable;} catch (error) {console.error('Iteration error:', error);}
}

代码组织优化

javascript">// 1. Generator模块化
function* mainFlow() {yield* initializeModule();yield* processData();yield* cleanupModule();
}// 2. 生成器复用
function* createReusableGenerator(config) {const { initialValue, step, maxValue } = config;let current = initialValue;while (current <= maxValue) {yield current;current += step;}
}// 3. 状态管理
function* createStatefulGenerator() {const state = {data: [],status: 'idle'};while (true) {const action = yield state;switch (action.type) {case 'ADD_DATA':state.data.push(action.payload);state.status = 'updated';break;case 'CLEAR_DATA':state.data = [];state.status = 'cleared';break;default:state.status = 'unknown_action';}}
}