JavaScript Iterator：简化数据迭代之旅

2023-12-21 20:51:57

JavaScript中数据存储和操作的基础是数据结构。从最初的Array、Object、String到ES6引入的Set和Map，这些结构都提供了迭代操作。然而，每种结构的迭代方法各不相同，迭代器的诞生为我们提供了一个统一的方法来遍历它们。

Iterator的本质

Iterator本质上是一个带有next()方法的对象，它可以生成一系列值。我们通过调用next()方法来获取值。

const iterator = [1, 2, 3][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 }

next()方法返回一个对象，其中value属性为当前遍历的值，done属性为一个布尔值，表示遍历是否已完成。

遍历不同的数据结构

Iterator的可迭代性允许我们使用统一的方法来遍历各种数据结构。

数组

const arr = [1, 2, 3];
for (const value of arr) {
  console.log(value); // 1 2 3
}

对象

const obj = { name: "John", age: 30 };
for (const key in obj) {
  console.log(key, obj[key]); // name John age 30
}

字符串

const str = "Hello";
for (const char of str) {
  console.log(char); // H e l l o
}

Set

const set = new Set([1, 2, 3]);
for (const value of set) {
  console.log(value); // 1 2 3
}

Map

const map = new Map([[1, "one"], [2, "two"], [3, "three"]]);
for (const [key, value] of map) {
  console.log(key, value); // 1 one 2 two 3 three
}

自定义Iterator

我们可以自定义自己的Iterator，让我们的对象具有可迭代性。

class MyIterator {
  constructor(data) {
    this.data = data;
    this.index = 0;
  }

  [Symbol.iterator]() {
    return this;
  }

  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([1, 2, 3]);

for (const value of myIterator) {
  console.log(value); // 1 2 3
}