掌握 JavaScript 中的迭代与迭代协议：深入浅出的指南

2023-11-05 02:37:18

在计算机科学中，迭代是指反复执行一段代码直到满足某个条件。在 JavaScript 中，迭代可以通过多种方式实现，包括 for 循环、for...of 循环、while 循环和 do...while 循环。然而，最强大的迭代机制是使用迭代器，它允许自定义控制迭代过程。

理解 JavaScript 中的迭代

for 循环

for 循环是最常用的迭代结构，它通过一个初始值、一个条件和一个迭代语句来定义一个循环。每次循环，迭代语句都会执行，条件会重新评估。当条件为 false 时，循环结束。

for (let i = 0; i < 10; i++) {
  console.log(i);
}

for...of 循环

for...of 循环是 ES6 引入的，它用于遍历可迭代对象（如数组和字符串）。循环变量会依次赋予可迭代对象的每个元素。

const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
  console.log(number);
}

while 循环

while 循环与 for 循环类似，但它没有初始值或迭代语句。循环条件会先进行评估，如果为 true，则执行循环体，并不断评估条件直到为 false 为止。

let i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

do...while 循环

do...while 循环类似于 while 循环，但它先执行循环体，然后评估条件。这确保循环体至少执行一次，即使条件最初为 false。

let i = 10;
do {
  console.log(i);
  i--;
} while (i > 0);

认识 JavaScript 中的迭代器

迭代器是一种对象，它提供了遍历集合的方法。迭代器有两种主要方法：next() 和 done。

next() 方法返回一个对象，其中包含 value 属性（当前元素的值）和 done 属性（布尔值，表示迭代是否完成）。
done 属性为 true 时，表示迭代已完成，并且 next() 方法将不再返回任何值。

创建自定义迭代器

我们可以使用 Symbol.iterator 属性来创建自定义迭代器。这个属性返回一个方法，该方法返回一个迭代器对象。

const myIterable = {
  [Symbol.iterator]: function* () {
    yield 1;
    yield 2;
    yield 3;
  }
};

for (const number of myIterable) {
  console.log(number);
}

结合迭代器和 for...of 循环

for...of 循环也可以与自定义迭代器一起使用。只需将迭代器对象传递给循环即可。

const myIterable = {
  [Symbol.iterator]: function* () {
    yield 1;
    yield 2;
    yield 3;
  }
};

for (const number of myIterable) {
  console.log(number);
}