迭代器：forEach深入浅出

使用forEach遍历数组

const fruits = ["苹果", "香蕉", "橘子"];
fruits.forEach((fruit, index) => {
  console.log(\`第${index + 1}个水果是：${fruit}\`);
});

这段代码中，forEach方法接受一个回调函数作为参数，回调函数有两个参数：当前元素和当前元素的索引。forEach方法会遍历数组中的每个元素，并对每个元素调用回调函数。

使用for...in遍历数组

const fruits = ["苹果", "香蕉", "橘子"];
for (const key in fruits) {
  console.log(\`第${Number(key) + 1}个水果是：${fruits[key]}\`);
}

这段代码中，for...in循环会遍历数组中的每个键值对。键值对的键是数组元素的索引，值是数组元素本身。

使用for...of遍历数组

const fruits = ["苹果", "香蕉", "橘子"];
for (const fruit of fruits) {
  console.log(\`当前水果是：${fruit}\`);
}

这段代码中，for...of循环会遍历数组中的每个元素。

forEach、for...in、for...of三者的差异

特性	forEach	for...in	for...of
遍历方式	遍历数组中的每个元素	遍历数组中的每个键值对	遍历数组中的每个元素
索引	会返回当前元素的索引	会返回当前元素的键（索引）	不会返回当前元素的索引
跳过已删除或从未被分配的元素	是	否	是
遍历顺序	按照数组元素的顺序遍历	按照数组键值对的顺序遍历	按照数组元素的顺序遍历

可迭代对象/迭代器

在 ES6 中，引入了 *可迭代对象/迭代器 *的概念。可迭代对象是指可以被遍历的对象，迭代器是指可以遍历可迭代对象的对象。

可迭代对象包括：

• 数组
• 字符串
• Set
• Map
• 函数的 arguments 对象
• NodeList 对象
• HTMLCollection 对象

迭代器包括：

• 数组的 keys() 方法
• 数组的 values() 方法
• 数组的 entries() 方法
• 字符串的 Symbol.iterator 方法
• Set 的 keys() 方法
• Set 的 values() 方法
• Set 的 entries() 方法
• Map 的 keys() 方法
• Map 的 values() 方法
• Map 的 entries() 方法

使用迭代器遍历数组

const fruits = ["苹果", "香蕉", "橘子"];
const iterator = fruits[Symbol.iterator]();

while (true) {
  const next = iterator.next();
  if (next.done) {
    break;
  }
  console.log(\`当前水果是：${next.value}\`);
}

这段代码中，我们使用数组的 Symbol.iterator 方法来获取数组的迭代器。然后，我们使用迭代器的 next() 方法来遍历数组中的每个元素。next() 方法会返回一个包含两个属性的对象：done 和 value。done 属性是一个布尔值，表示遍历是否已经结束。value 属性是当前元素的值。

结束语

forEach、for...in、for...of都是遍历数组的有效方法。在某些情况下，一种方法可能比其他方法更合适。例如，如果您需要遍历数组中的每个元素，并对每个元素执行某个操作，那么 forEach 方法可能是最好的选择。如果您需要遍历数组中的每个键值对，那么 for...in 循环可能是最好的选择。如果您需要遍历数组中的每个元素，并访问该元素的索引，那么 for...of 循环可能是最好的选择。

ES6 中引入的 *可迭代对象/迭代器 *概念，为我们提供了更灵活、更强大的遍历数组的方式。我们可以使用迭代器来遍历任何可迭代对象，而不仅仅是数组。