使用迭代器在JavaScript中循环数据

2023-10-01 20:37:02

迭代器和生成器：JavaScript 中遍历数据结构的强大工具

认识迭代器

想象一下你有一袋糖果，想一个个地吃掉它们。迭代器就像一个袋子里的魔术手，每次伸进去都能抓出一颗糖果。JavaScript 中无处不在的迭代器使我们能够轻松遍历数据结构中的元素，例如数组、字符串和 Map。借助 for-of 循环，我们可以毫不费力地访问每个元素，而无需手动处理索引或复杂循环。

使用 for-of 循环遍历数据结构

const numbers = [1, 2, 3, 4, 5];

for (const number of numbers) {
  console.log(number); // 输出：1, 2, 3, 4, 5
}

const names = "John Doe";

for (const letter of names) {
  console.log(letter); // 输出：J, o, h, n,  D, o, e
}

手动实现迭代器

除了使用现成的迭代器，我们还可以创建自己的自定义迭代器。这可以通过实现 Symbol.iterator 方法来实现，它表示一个对象的迭代性。当一个对象具有 Symbol.iterator 方法时，它就被视为可迭代的。

class MyArray {
  constructor(items) {
    this.items = items;
  }

  [Symbol.iterator]() {
    let index = 0;

    return {
      next: () => {
        if (index < this.items.length) {
          return { value: this.items[index++], done: false };
        } else {
          return { value: undefined, done: true };
        }
      },
    };
  }
}

const myArray = new MyArray([1, 2, 3, 4, 5]);

for (const number of myArray) {
  console.log(number); // 输出：1, 2, 3, 4, 5
}

认识生成器

生成器是一种独特的函数，可以暂停执行并保留其状态，以便以后继续执行。生成器利用 yield ，它暂停生成器的执行并向调用者返回当前值。

function* generateNumbers() {
  for (let i = 1; i <= 5; i++) {
    yield i;
  }
}

const generator = generateNumbers();

console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: 4, done: false }
console.log(generator.next()); // { value: 5, done: false }
console.log(generator.next()); // { value: undefined, done: true }

使用生成器创建自己的迭代器

生成器为我们提供了灵活的方式来创建自己的迭代器，从而可以更精确地控制迭代过程。

function* myIterable() {
  yield 1;
  yield 2;
  yield 3;
  yield 4;
  yield 5;
}

for (const number of myIterable()) {
  console.log(number); // 输出：1, 2, 3, 4, 5
}