迭代器的魔力：揭开 ES6 遍历数据的新机制

前端

2023-12-14 01:27:39

ES6 带来了迭代这一遍历数据的全新机制，彻底改变了我们在 JavaScript 中操作数据的方式。迭代的核心围绕着两个关键概念：可迭代对象和迭代器。

可迭代对象：数据的便利访问

可迭代对象是一种数据结构，它允许我们轻松访问其元素。这种对象通过实现一个称为 Symbol.iterator 的特殊方法来实现，该方法充当迭代器的工厂方法。

迭代器：遍历数据的指针

迭代器就像数据库中的游标，它是一个指向数据结构中元素的指针。通过调用迭代器的 next() 方法，我们可以逐个获取元素。next() 方法返回一个包含元素本身和布尔值 done 的对象，表示遍历是否完成。

迭代与 for-of 循环

ES6 引入了 for-of 循环，专门用于遍历可迭代对象。语法如下：

for (const element of iterable) {
  // 使用元素
}

数组作为可迭代对象

数组是 JavaScript 中最常见的一种可迭代对象。我们可以使用 for-of 循环轻松遍历数组：

const myArray = [1, 2, 3];

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

自定義可迭代對象

除了内置类型外，我们还可以创建自己的可迭代对象。通过实现 Symbol.iterator 方法，我们可以使任何对象可迭代：

class MyIterable {
  constructor(data) {
    this.data = data;
  }

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

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

const myIterable = new MyIterable([1, 2, 3]);

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