当前位置：首页 > 文章列表 > 文章 > 前端 > JS迭代器原理与实现详解

JS迭代器原理与实现详解

2025-08-15 12:31:26 0浏览收藏

一分耕耘，一分收获！既然打开了这篇文章《JS迭代器实现与迭代器协议详解》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

JavaScript中实现迭代器需遵循可迭代协议和迭代器协议，通过定义[Symbol.iterator]方法返回具备next()方法的迭代器对象，从而支持for...of和展开运算符；该机制统一了数据结构的遍历接口，实现惰性求值，适用于自定义对象、树、图及无限序列等复杂场景，提升代码通用性与性能。

JS如何实现迭代器？迭代器协议

JavaScript中实现迭代器，核心在于遵循“迭代器协议”和“可迭代协议”。说白了，就是让你的数据结构能够被for...of循环或者展开运算符（...）这样的语法所消费。可迭代协议要求对象或其原型链上有一个名为[Symbol.iterator]的方法，这个方法必须返回一个迭代器。而迭代器协议则要求这个迭代器对象有一个next()方法，每次调用它时返回一个包含value（当前值）和done（是否遍历完成）属性的对象。

解决方案

要让一个自定义对象或数据结构可迭代，你需要：

实现可迭代协议： 在你的对象上定义一个[Symbol.iterator]方法。
实现迭代器协议： [Symbol.iterator]方法必须返回一个迭代器对象。这个迭代器对象需要有一个next()方法。
next()方法的返回值： next()方法每次调用时，都应返回一个形如{ value: T, done: boolean }的对象。value是当前迭代的值，done表示是否已遍历完成。当done为true时，value通常是undefined，表示没有更多元素了。

举个例子，假设我们要创建一个自定义的Range对象，让它能像数组一样被迭代：

class MyRange {
    constructor(start, end) {
        this.start = start;
        this.end = end;
    }

    [Symbol.iterator]() {
        let current = this.start;
        const end = this.end; // 缓存end，避免在闭包中引用this

        return {
            next() {
                if (current <= end) {
                    return { value: current++, done: false };
                } else {
                    return { value: undefined, done: true };
                }
            }
        };
    }
}

// 使用
const myNumbers = new MyRange(1, 5);
for (const num of myNumbers) {
    console.log(num); // 1, 2, 3, 4, 5
}

// 或者用展开运算符
console.log([...myNumbers]); // [1, 2, 3, 4, 5]

这里，MyRange实例通过[Symbol.iterator]方法，返回了一个拥有next()方法的匿名对象。这个匿名对象就是我们手写的迭代器，它维护了当前的遍历状态（current变量）。

为什么迭代器是现代JavaScript的基石？它解决了哪些编程痛点？

在我看来，迭代器这东西，它真正解决的是一个“统一接口”的问题。想想看，以前我们要遍历数组，用for循环；遍历对象属性，用for...in（还得小心原型链上的属性）；遍历Set或Map，那又得用它们各自的forEach或者keys()、values()、entries()方法。代码写着写着，就感觉很碎片化，不同的数据结构有不同的遍历方式，这对于写通用函数或者库来说，简直是噩梦。

迭代器协议的出现，就像是给所有可遍历的数据结构定了一个“君子协定”：只要你实现了[Symbol.iterator]这个方法，返回一个有next()方法的对象，我就能用for...of去遍历你。这一下子，所有的数据结构，无论它是数组、字符串、Set、Map，还是你自己写的自定义数据结构，都拥有了统一的遍历接口。这极大地提升了代码的通用性和可读性。

更深层次一点，它还引入了“惰性求值”的概念。我的MyRange例子虽然简单，但如果我把end设得非常大，甚至不设end（比如一个无限序列），只要你不去遍历到那个点，后面的值就不会被计算出来。这对于处理大数据流、或者生成无限序列（比如斐波那契数列）时，性能优势就非常明显了。你不需要一次性把所有数据都加载到内存里，这在资源受限的环境下尤其有用。

迭代器与生成器：它们之间是怎样的关系？如何选择使用？

提到迭代器，就不得不提生成器（Generators）。很多时候，大家会把它们混为一谈，但其实它们是两种不同的概念，只不过生成器是实现迭代器的一种“语法糖”，或者说，一种更优雅、更方便的工具。

迭代器是协议，是行为规范，是“你得有个next()方法，返回{value, done}”。 生成器是函数，是一种特殊的函数，它能够自动帮你实现这个迭代器协议。

当你写一个function*（注意函数名后面的星号）时，它就是一个生成器函数。调用这个函数，它不会立即执行里面的代码，而是返回一个生成器对象。这个生成器对象本身就符合迭代器协议和可迭代协议，也就是说，它自带了[Symbol.iterator]和next()方法。你可以在生成器函数内部使用yield关键字，每当yield一个值，就相当于next()方法返回了这个值，并且暂停了函数的执行。下次调用next()时，函数会从上次暂停的地方继续执行。

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

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

// 也可以直接用for...of
for (const val of simpleGenerator()) {
    console.log(val); // 1, 2, 3
}

你看，用生成器写迭代器，是不是比手动维护current状态和next()逻辑简单多了？大多数情况下，如果你需要实现一个自定义的迭代逻辑，我会毫不犹豫地选择生成器。它让代码更简洁、更易读，也更不容易出错。

那么什么时候会直接手写迭代器呢？嗯，可能是在一些非常底层、需要极致性能优化，或者你正在构建一个非常复杂的、需要精细控制迭代过程的库时。比如，你可能需要一个迭代器，它不仅仅是顺序遍历，还可能根据某些条件跳过元素，或者在遍历过程中修改自身状态。生成器虽然强大，但它的yield机制相对固定，如果你需要更灵活的控制流，手写迭代器能给你更多的自由度。但说实话，这种情况在日常开发中并不多见，生成器已经足够满足绝大部分需求了。

在复杂数据结构中应用迭代器模式，有哪些高级技巧或考虑？

在实际项目中，尤其是在处理一些非线性的复杂数据结构，比如树、图的时候，迭代器的价值就体现得淋漓尽致了。你不能简单地用一个for循环去遍历它们。这时候，迭代器模式就提供了一种优雅的方式来封装遍历逻辑。

实现特定遍历策略的迭代器： 例如，对于一棵二叉树，你可能需要前序遍历、中序遍历或后序遍历。你可以为每种遍历方式实现一个独立的迭代器。

class TreeNode {
    constructor(value) {
        this.value = value;
        this.left = null;
        this.right = null;
    }
}

// 假设我们想实现一个中序遍历的迭代器
class InOrderTreeIterator {
    constructor(root) {
        this.stack = [];
        this._pushLeft(root);
    }

    _pushLeft(node) {
        while (node) {
            this.stack.push(node);
            node = node.left;
        }
    }

    next() {
        if (this.stack.length === 0) {
            return { value: undefined, done: true };
        }

        const node = this.stack.pop();
        this._pushLeft(node.right); // 处理右子树

        return { value: node.value, done: false };
    }
}

class BinaryTree {
    constructor(root) {
        this.root = root;
    }

    [Symbol.iterator]() {
        // 默认返回中序遍历迭代器
        return new InOrderTreeIterator(this.root);
    }
}

// 示例使用
const root = new TreeNode(4);
root.left = new TreeNode(2);
root.right = new TreeNode(5);
root.left.left = new TreeNode(1);
root.left.right = new TreeNode(3);

const tree = new BinaryTree(root);
console.log([...tree]); // [1, 2, 3, 4, 5]

这里，InOrderTreeIterator就是手动实现的一个复杂迭代器，它内部维护了一个栈来模拟递归遍历过程。这比用递归函数来获取所有节点，然后把它们放到一个数组里再遍历，要更节省内存，因为它也是惰性求值的。

链式迭代器或组合迭代器： 设想你有多个数据源，你希望像一个整体一样去遍历它们。你可以创建迭代器，将它们串联起来。比如，一个ConcatIterator可以把两个迭代器连接起来，先遍历第一个，再遍历第二个。或者，一个FilterIterator可以在遍历过程中根据条件过滤元素。
```
function* filterIterable(iterable, predicate) {
    for (const item of iterable) {
        if (predicate(item)) {
            yield item;
        }
    }
}

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = filterIterable(numbers, n => n % 2 === 0);
console.log([...evenNumbers]); // [2, 4, 6]
```
这里，我们用一个生成器函数实现了过滤器，它接受一个可迭代对象和一个谓词函数，然后惰性地产生符合条件的元素。这其实就是函数式编程中常见的filter操作的迭代器版本。

无限序列的迭代器： 迭代器非常适合表示无限序列，因为它们是惰性求值的。比如，一个生成斐波那契数列的迭代器：

function* fibonacciSequence() {
    let a = 0, b = 1;
    while (true) {
        yield a;
        [a, b] = [b, a + b];
    }
}

const fib = fibonacciSequence();
console.log(fib.next().value); // 0
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2
// ...你可以一直调用next()

你不能把一个无限序列放到一个数组里，那会耗尽内存。但有了迭代器，你可以按需获取序列中的任何一个元素。

总的来说，迭代器模式在JavaScript中提供了一种非常强大和灵活的遍历机制。它不仅仅是让for...of能用起来，更重要的是，它提供了一种标准化的方式来处理各种复杂的数据流和数据结构，使得代码更具通用性、可维护性，并且在处理大数据或无限序列时，能带来显著的性能优势。理解并善用它，绝对能让你的JS代码更上一层楼。

以上就是《JS迭代器原理与实现详解》的详细内容，更多关于的资料请关注golang学习网公众号！