JavaScript设计模式「基于ES2024」:行为型模式-迭代器模式

69 阅读2分钟

迭代器模式是一种行为设计模式,它提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示。这种模式在 JavaScript 中尤为重要,因为它是语言内置的一个概念,广泛用于处理各种集合。

// 自定义集合类
class CustomCollection {
    #items = [];

    add(item) {
        this.#items.push(item);
    }

    // 实现 Symbol.iterator 方法使对象可迭代
    [Symbol.iterator]() {
        let index = 0;
        return {
            next: () => {
                if (index < this.#items.length) {
                    return { value: this.#items[index++], done: false };
                } else {
                    return { done: true };
                }
            }
        };
    }

    // 自定义迭代器方法
    getReverseIterator() {
        let index = this.#items.length - 1;
        return {
            next: () => {
                if (index >= 0) {
                    return { value: this.#items[index--], done: false };
                } else {
                    return { done: true };
                }
            }
        };
    }

    // 返回数组长度
    get length() {
        return this.#items.length;
    }
}

// 使用迭代器的示例
function demonstrateIterator() {
    const collection = new CustomCollection();
    collection.add("Item 1");
    collection.add("Item 2");
    collection.add("Item 3");

    console.log("Forward iteration:");
    for (const item of collection) {
        console.log(item);
    }

    console.log("\nReverse iteration:");
    const reverseIterator = collection.getReverseIterator();
    let result = reverseIterator.next();
    while (!result.done) {
        console.log(result.value);
        result = reverseIterator.next();
    }

    console.log("\nUsing spread operator:");
    console.log([...collection]);

    console.log("\nDestructuring:");
    const [first, second] = collection;
    console.log(`First: ${first}, Second: ${second}`);
}

demonstrateIterator();

// 扩展:无限迭代器示例
class FibonacciSequence {
    [Symbol.iterator]() {
        let prev = 0, curr = 1;
        return {
            next: () => {
                [prev, curr] = [curr, prev + curr];
                return { value: prev, done: false };
            }
        };
    }
}

function demonstrateInfiniteIterator() {
    console.log("\nFibonacci Sequence (first 10 numbers):");
    const fibonacci = new FibonacciSequence();
    let count = 0;
    for (const num of fibonacci) {
        if (count++ === 10) break;
        console.log(num);
    }
}

demonstrateInfiniteIterator();

实现思路

  1. CustomCollection

    • 使用私有字段 #items 来存储集合元素。
    • 实现了 Symbol.iterator 方法,使得对象可以在 for...of 循环中使用。
    • 提供了 getReverseIterator 方法,展示了如何创建自定义迭代器。
  2. 标准迭代器实现

    • 通过 Symbol.iterator 方法返回一个迭代器对象。
    • 迭代器对象包含 next() 方法,每次调用返回 { value, done } 结构。
  3. 无限迭代器示例

    • FibonacciSequence 类实现了一个无限的斐波那契序列。
    • 使用 Symbol.iterator 方法提供迭代器支持。

优点

  • 简化复杂数据结构的遍历:提供了一种统一的方法来访问不同类型的集合。
  • 单一职责原则:将数据存储和遍历逻辑分离。
  • 开放/封闭原则:可以实现新的遍历方式而不修改集合类。
  • 支持懒加载:迭代器只在需要时才计算下一个值,适用于大数据集或无限序列。