ES6 中的迭代器如何使用？有哪些进阶用法？

乐闻

2024年04月12日 11:04· 阅读 448

前言

ES6 引入了一系列令人兴奋的新特性，极大地提高了代码的易读性和开发效率。其中，迭代器（Iterator）是一项重要的新特性，它为遍历复杂的数据结构提供了统一的接口。

ES6 的迭代器是遵循迭代器协议的对象，允许开发者按序访问集合的元素。它们不仅被数组和字符串等内置类型默认实现，还可以由开发者自定义，从而在数据的遍历上提供了更高的灵活性和控制力。

什么是迭代器

在 ES6 之前，我们经常通过数组或对象的索引来遍历数据。例如，用一个循环来遍历数组中的每一项。但是，随着数据结构变得更加复杂，这种方法的局限性变得越来越明显。

迭代器是一种让我们能够按照一定的顺序遍历各种数据结构的机制。它提供了一种统一的接口，让我们可以访问集合中的每一个元素，而不必关心集合的内部结构。

ES6 定义了迭代器协议，它要求一个对象拥有一个名为 Symbol.iterator 的属性，这个属性是一个函数，调用这个函数会返回一个迭代器对象。迭代器对象必须实现 next 方法，并且这个方法在被调用时会返回一个拥有 value 和 done 两个属性的对象。、

使用步骤

一、创建迭代器

在 ES6 中，一些内置类型如数组、字符串、Map 和 Set 都默认实现了迭代器协议。但我们也可以为自定义对象实现迭代器。

假设我们有一个简单的任务集合，我们想要按顺序遍历这些任务：

javascript
const taskList = {
  tasks: ['Task 1', 'Task 2', 'Task 3'],
  [Symbol.iterator]() {
    let index = 0;
    const tasks = this.tasks;

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

在这个例子中，我们给 taskList 对象添加了一个 Symbol.iterator 方法，该方法返回一个迭代器对象。这个迭代器对象包含一个 next 方法，当 next 方法被调用时，它会按顺序返回任务集合中的任务，直到没有更多的任务为止。

二、使用迭代器

有了迭代器之后，使用起来非常简单和直观。我们可以使用 for...of 循环来遍历所有的任务：

javascript
for (const task of taskList) {
  console.log(task);
}

输出结果为：

shell
Task 1
Task 2
Task 3

for...of 循环内部会自动寻找集合的 Symbol.iterator 方法，并调用它来获取迭代器对象，然后通过不断调用迭代器对象上的 next 方法来遍历集合。

进阶用法

我们可以通过迭代器完成一些高级操作，比如配合生成器（Generators）、使用解构赋值和展开运算符等。

1. 结合生成器（Generators）

生成器是一种特殊的函数，它可以暂停执行并在需要时再继续执行。生成器自动实现了迭代器协议，因此可以用来创建复杂的迭代逻辑。

让我们通过一个例子来看看如何结合使用迭代器和生成器：

javascript
function* taskGenerator() {
  yield 'Task 1';
  yield 'Task 2';
  yield 'Task 3';
}

const tasks = taskGenerator();

for (const task of tasks) {
  console.log(task);
}

在这个例子中，taskGenerator 是一个生成器函数，我们用 function* 语法来定义它，并通过 yield 关键字来产出任务。每当 for...of 循环迭代时，它会从上次暂停的地方继续执行生成器函数，直到遇到下一个 yield 表达式。

输出结果为：

shell
Task 1
Task 2
Task 3

2. 解构赋值

我们还可以使用 ES6 引入的解构赋值来从迭代器中提取值。这使得代码更加简洁，也更直观：

javascript
const [firstTask, secondTask] = taskList;

console.log(firstTask);  // 输出: Task 1
console.log(secondTask); // 输出: Task 2

在这个例子中，我们从 taskList 中提取了前两个任务，并将它们分别赋值给 firstTask 和 secondTask 变量。

3. 展开运算符

展开运算符（...）可以用于将迭代器转换为数组，这在需要将数据结构转换为更加通用形式时非常有用：

javascript
const allTasks = [...taskList];
console.log(allTasks); // 输出: ['Task 1', 'Task 2', 'Task 3']

通过展开运算符，我们将 taskList 迭代器中的所有元素“展开”成了一个数组。

4. 自定义迭代器

有时候，我们可能需要创建自定义的迭代器来完成比较复杂的迭代任务。例如，我们可能需要一个无限序列的迭代器：

javascript
const fibonacci = {
  [Symbol.iterator]() {
    let [prev, curr] = [0, 1];
    return {
      next() {
        [prev, curr] = [curr, prev + curr];
        return { value: curr, done: false };
      }
    };
  }
};

// 获取斐波那契序列的前 10 个数
for (const num of fibonacci) {
  console.log(num);
  if (num > 50) break;
}

在这个例子中，我们创建了一个斐波那契数列的迭代器，它可以无限生成斐波那契数列中的数。使用 for...of 循环时，我们可以设置一个条件来终止循环，以避免无限迭代。

总结

迭代器是 ES6 中一个强大而优雅的特性，它为不同的数据结构提供了一种通用的遍历机制。学会使用迭代器，可以让我们写出更加简洁和高效的代码，尤其是在处理复杂的数据集合时。它们允许我们定义复杂的数据生成逻辑，同时保持了代码的可读性和易维护性。通过解构赋值和展开运算符，我们可以更加便捷地使用迭代器，并且可以在任何可以使用数组的地方使用它们。

标签：

ES6