迭代器 iterator 及 for...of 遍历深入浅出

2023-12-28 18:06:20

揭开 Iterator 的神秘面纱

Iterator 遍历器，顾名思义，它是一种提供遍历操作的接口，允许我们以统一的方式遍历各种不同的数据结构。无论数据结构的内部实现如何，Iterator 都提供了标准化的方式来访问和操作其中的元素。

简单来说，Iterator 就是一种机制，它允许我们以循序渐进的方式访问数据结构中的元素。我们可以把它想象成一个指针，它指向数据结构中的当前元素，并允许我们前进或后退以访问下一个或上一个元素。

实现 Iterator 接口

在 JavaScript 中，任何数据结构只要部署了 Iterator 接口，就可以完成遍历操作。最简单的方法是实现 Symbol.iterator 方法。该方法返回一个 Iterator 对象，该对象具有 next 方法，用于返回数据结构中的下一个元素。

例如，以下代码实现了一个简单的数组 Iterator：

class MyArrayIterator {
  constructor(array) {
    this.array = array;
    this.index = 0;
  }

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

使用这个 Iterator，我们可以轻松地遍历数组：

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

for (const element of iterator) {
  console.log(element);
}

for...of 遍历的魅力

ES6 引入了新的 for...of 循环，它完美地与 Iterator 结合，使遍历操作变得更加简单和优雅。for...of 循环的语法如下：

for (const element of iterable) {
  // 循环体
}

其中，iterable 是一个可遍历对象，例如数组、对象、字符串等。

使用 for...of 循环，我们可以轻松地遍历上面的数组：

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

for (const element of myArray) {
  console.log(element);
}

遍历各种数据结构

Iterator 和 for...of 遍历的组合，可以轻松地遍历各种数据结构，包括数组、对象、字符串、Map、Set 等。

数组

使用 for...of 循环遍历数组非常简单，如下所示：

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

for (const element of myArray) {
  console.log(element);
}

对象

遍历对象时，for...of 循环会遍历对象的所有键，而不是值。要遍历对象的值，可以使用 Object.values() 方法将对象的值转换为一个数组，然后再使用 for...of 循环遍历。

const myObject = {
  name: 'John',
  age: 30,
  city: 'New York'
};

for (const key of Object.keys(myObject)) {
  console.log(key); // 输出: 'name', 'age', 'city'
}

for (const value of Object.values(myObject)) {
  console.log(value); // 输出: 'John', 30, 'New York'
}

字符串

字符串也是一种可遍历对象，可以使用 for...of 循环遍历字符串中的每个字符。

const myString = 'Hello World';

for (const char of myString) {
  console.log(char); // 输出: 'H', 'e', 'l', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'd'
}

Map 和 Set

Map 和 Set 都是 ES6 中新增的数据结构，它们也是可遍历对象。使用 for...of 循环遍历 Map 和 Set 时，会遍历其中的键值对和值。

const myMap = new Map();
myMap.set('name', 'John');
myMap.set('age', 30);
myMap.set('city', 'New York');

for (const [key, value] of myMap) {
  console.log(key, value); // 输出: ['name', 'John'], ['age', 30], ['city', 'New York']
}

const mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(3);

for (const value of mySet) {
  console.log(value); // 输出: 1, 2, 3
}