认识 JavaScript 中的迭代器：从原理到实践

2023-12-14 20:21:59

序言

迭代器是一种遍历数据结构的强大工具，在 JavaScript 中扮演着至关重要的角色。它允许我们逐个访问集合中的元素，而无需手动管理索引或指针。通过理解迭代器的原理和实际应用，我们可以大幅提升代码的可读性、可维护性和效率。

内置类型迭代器

JavaScript 中，内置类型（如数组、字符串、映射和集合）都具有默认的迭代器。这些内置迭代器提供了简单易用的遍历方式：

// 数组迭代器
const arr = [1, 2, 3];
for (const num of arr) {
  console.log(num); // 输出：1 2 3
}

// 字符串迭代器
const str = 'Hello';
for (const char of str) {
  console.log(char); // 输出：H e l l o
}

内置迭代器的工作原理是利用 Symbol.iterator 符号，该符号指向一个返回迭代器对象的函数。当我们使用 for...of 循环或扩展运算符（...）时，JavaScript 会自动调用此函数来获取迭代器：

// Symbol.iterator 指向返回迭代器对象的函数
const iterator = arr[Symbol.iterator]();

// 手动迭代器遍历
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

自定义迭代器

除了内置类型，我们还可以创建自己的自定义迭代器。自定义迭代器允许我们遍历自定义数据结构或对象，而无需暴露其内部实现。

// 自定义迭代器
class MyIterator {
  constructor(data) {
    this.data = data;
    this.index = 0;
  }

  // Symbol.iterator 指向该方法，返回自身
  [Symbol.iterator]() {
    return this;
  }

  // next() 方法返回当前元素并移动索引
  next() {
    if (this.index < this.data.length) {
      return { value: this.data[this.index++], done: false };
    } else {
      return { value: undefined, done: true };
    }
  }
}

// 使用自定义迭代器
const myIterator = new MyIterator([4, 5, 6]);
for (const num of myIterator) {
  console.log(num); // 输出：4 5 6
}

迭代器中途退出

在某些情况下，我们可能希望在迭代器遍历过程中中途退出。JavaScript 提供了 return 方法，它可以从 for...of 循环中退出并返回一个指定的值：

// 使用 return 退出迭代器
const arr = [1, 2, 3, 4, 5];
for (const num of arr) {
  if (num > 3) {
    return num * 2; // 返回 8，退出循环
  }
  console.log(num); // 输出：1 2 3
}