深入理解You Don't Know JS：ES6中的迭代器与生成器-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00432/article/details/148490716

深入理解You Don't Know JS：ES6中的迭代器与生成器

You-Dont-Know-JS 📗📒 (PT-Br translation) JS Book Series. 项目地址: https://gitcode.com/gh_mirrors/you/You-Dont-Know-JS

前言

在JavaScript开发中，代码的组织和结构设计至关重要。ES6引入了几项强大的特性来帮助我们更好地组织代码，其中迭代器和生成器是最具革命性的特性之一。本文将深入探讨这些特性，帮助你掌握它们的核心概念和实际应用。

迭代器：数据消费的标准接口

什么是迭代器？

迭代器是一种设计模式，它提供了一种标准的方法来逐个访问集合中的元素。在ES6之前，JavaScript开发者已经通过各种方式实现了类似迭代器的功能，但ES6将其标准化为语言层面的接口。

迭代器接口规范

ES6定义了以下迭代器接口：

Iterator {
    next() // 获取下一个迭代结果
    [可选] return() // 提前终止迭代
    [可选] throw() // 向迭代器抛出异常
}

IteratorResult {
    value // 当前迭代值
    done // 是否迭代完成
}

实际应用示例

让我们看一个数组迭代的例子：

const arr = [1, 2, 3];
const it = arr[Symbol.iterator]();

it.next(); // {value: 1, done: false}
it.next(); // {value: 2, done: false}
it.next(); // {value: 3, done: false}
it.next(); // {value: undefined, done: true}

自定义迭代器

我们可以创建自己的迭代器来实现特定功能。例如，创建一个斐波那契数列生成器：

const Fib = {
    [Symbol.iterator]() {
        let n1 = 1, n2 = 1;
        
        return {
            [Symbol.iterator]() { return this; },
            
            next() {
                const current = n2;
                n2 = n1;
                n1 += current;
                return {value: current, done: false};
            },
            
            return(v) {
                console.log("Sequence abandoned");
                return {value: v, done: true};
            }
        };
    }
};

for (const v of Fib) {
    console.log(v);
    if (v > 50) break;
}
// 输出: 1, 1, 2, 3, 5, 8, 13, 21, 34, 55
// "Sequence abandoned"

生成器：可暂停的函数

生成器基础

生成器是ES6引入的一种特殊函数，它可以在执行过程中暂停和恢复。与普通函数不同，生成器函数在被调用时不会立即执行，而是返回一个生成器对象。

function* genFunc() {
    console.log("First");
    yield;
    console.log("Second");
}

const genObj = genFunc();
genObj.next(); // 输出"First"
genObj.next(); // 输出"Second"

生成器与迭代器

生成器实际上是一种特殊的迭代器。每次调用next()方法时，生成器会执行到下一个yield表达式并暂停。

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

const counter = countToThree();
counter.next(); // {value: 1, done: false}
counter.next(); // {value: 2, done: false}
counter.next(); // {value: 3, done: false}
counter.next(); // {value: undefined, done: true}

双向通信

生成器支持双向通信，可以通过yield表达式接收值：

function* interrogate() {
    const name = yield "What is your name?";
    const age = yield `Hello ${name}, how old are you?`;
    return `${name} is ${age} years old`;
}

const it = interrogate();
it.next().value; // "What is your name?"
it.next("Alice").value; // "Hello Alice, how old are you?"
it.next(30).value; // "Alice is 30 years old"

实际应用场景

异步编程

生成器可以简化异步代码的编写，使其看起来像同步代码：

function* main() {
    try {
        const result = yield asyncTask();
        console.log(result);
    } catch (err) {
        console.error(err);
    }
}

function asyncTask() {
    return new Promise(resolve => {
        setTimeout(() => resolve("Done!"), 1000);
    });
}

// 需要运行器函数来驱动生成器
runGenerator(main);

function runGenerator(gen) {
    const it = gen();
    
    function handle(result) {
        if (result.done) return;
        
        result.value.then(
            res => handle(it.next(res)),
            err => handle(it.throw(err))
        );
    }
    
    handle(it.next());
}

无限数据流

生成器非常适合表示无限序列：

function* naturalNumbers() {
    let n = 0;
    while (true) {
        yield n++;
    }
}

const numbers = naturalNumbers();
numbers.next().value; // 0
numbers.next().value; // 1
numbers.next().value; // 2
// 可以无限继续...