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

BitCat

已于 2025-01-11 21:30:08 修改

阅读量662

点赞数 14

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

于 2025-01-11 21:29:54 首次发布

本文链接：https://blog.youkuaiyun.com/Chen7Chan/article/details/145080274

版权

JavaScript 专栏收录该内容

101 篇文章

订阅专栏

JavaScript Generator应用详解 🌟

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

Generator基础回顾 🎯

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

Generator的基本应用 📊

// 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的高级应用 🚀

// 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的实用工具 🛠️

// 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的性能优化 ⚡

// 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;
        }
    }
}

最佳实践建议 💡

错误处理

// 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);
    }
}

代码组织优化

// 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';
        }
    }
}