for…of 循环：遍历可迭代对象的统一方式

for…of：一场说走就走的迭代旅行

想象一下，你是一个旅行家，背着行囊，准备探索未知的世界。你手里有一张地图，上面标注着各种各样的地点：繁华的都市、宁静的乡村、神秘的森林、广袤的草原…… 你需要一种方式，能够让你按照地图的指引，依次到达每一个地点，感受不同的风景，体验不同的文化。

在编程世界里，for...of 循环就像这样一张地图，而那些值得我们探索的地点，就是各种各样的“可迭代对象”。它提供了一种简洁优雅的方式，让我们能够轻松地遍历这些对象，逐个访问它们的元素，就像旅行家一步一个脚印地走遍世界。

什么是可迭代对象？

要理解 for...of，首先要搞清楚什么是“可迭代对象”。简单来说，可迭代对象就是那些可以被“迭代”的对象。这听起来有点像绕口令，但其实很好理解。想象一下，你有一串珍珠项链。每一颗珍珠都是一个独立的元素，而项链本身就是一个可迭代对象，因为你可以一颗一颗地取出珍珠，直到取完为止。

在 JavaScript 中，常见的可迭代对象包括：

数组 (Array): 这是最常见的可迭代对象，里面的元素按照索引顺序排列。
字符串 (String): 字符串可以被看作是字符的集合，可以逐个访问每个字符。
Map: Map 对象存储的是键值对，可以迭代访问每个键值对。
Set: Set 对象存储的是唯一的元素，可以迭代访问每个元素。
arguments 对象: 函数内部可以访问的 arguments 对象，包含了函数调用时传入的所有参数。
NodeList 对象: 例如，通过 document.querySelectorAll() 获取的元素集合，可以迭代访问每个元素节点。
自定义的可迭代对象: 你也可以自己创建可迭代对象，只要遵循一定的协议。

for...of 的魅力：简洁与优雅

在 for...of 出现之前，我们遍历数组通常会使用 for 循环或者 forEach 方法。比如：

const colors = ["red", "green", "blue"];

// 使用 for 循环
for (let i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}

// 使用 forEach 方法
colors.forEach(color => {
  console.log(color);
});

虽然这两种方式都可以实现遍历数组的目的，但它们都有各自的缺点。 for 循环需要手动维护索引，容易出错； forEach 方法虽然简洁，但无法使用 break 和 continue 语句来控制循环的流程。

而 for...of 循环则完美地解决了这些问题：

const colors = ["red", "green", "blue"];

// 使用 for...of 循环
for (const color of colors) {
  console.log(color);
}

这段代码是不是简洁明了？ for...of 循环会自动遍历数组中的每个元素，并将元素的值赋给 color 变量，然后执行循环体中的代码。而且，你仍然可以使用 break 和 continue 语句来控制循环的流程，就像使用普通的 for 循环一样。

for...of 的应用场景：无处不在的迭代

for...of 循环的应用场景非常广泛，只要涉及到遍历可迭代对象，它都能派上用场。

遍历数组： 这是最常见的应用场景，前面已经演示过了。
遍历字符串： 可以逐个访问字符串中的字符。

const message = "Hello World!";

for (const char of message) {
  console.log(char);
}

遍历 Map 对象： 可以遍历 Map 对象中的键值对。

const myMap = new Map();
myMap.set("name", "Alice");
myMap.set("age", 30);

for (const [key, value] of myMap) {
  console.log(`Key: ${key}, Value: ${value}`);
}

遍历 Set 对象： 可以遍历 Set 对象中的元素。

const mySet = new Set([1, 2, 3, 4, 5]);

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

遍历 arguments 对象： 可以遍历函数调用时传入的参数。

function myFunction() {
  for (const arg of arguments) {
    console.log(arg);
  }
}

myFunction(1, "hello", true);

遍历 NodeList 对象： 可以遍历通过 document.querySelectorAll() 获取的元素集合。

const paragraphs = document.querySelectorAll("p");

for (const paragraph of paragraphs) {
  console.log(paragraph.textContent);
}

for...of 与 for...in：一字之差，天壤之别

很多初学者容易将 for...of 和 for...in 循环混淆，因为它们的名字很相似。但实际上，它们的作用完全不同。

for...of 循环遍历的是可迭代对象的值 (values)。
for...in 循环遍历的是对象的键 (keys)。

举个例子：

const myObject = {
  name: "Bob",
  age: 40,
  city: "New York"
};

// 使用 for...in 循环
for (const key in myObject) {
  console.log(key); // 输出：name, age, city
}

const myArray = ["apple", "banana", "orange"];

// 使用 for...in 循环
for (const key in myArray) {
  console.log(key); // 输出：0, 1, 2 (注意：这里输出的是索引)
}

// 使用 for...of 循环
for (const value of myArray) {
  console.log(value); // 输出：apple, banana, orange
}

可以看到，for...in 循环会遍历对象的属性名（或者数组的索引），而 for...of 循环会遍历数组的值。因此，在使用循环时，一定要根据需要选择合适的循环方式。

自定义可迭代对象：打造专属的迭代体验

除了 JavaScript 内置的可迭代对象之外，你还可以自己创建可迭代对象。这需要实现一个 Symbol.iterator 方法，该方法返回一个迭代器对象。迭代器对象需要实现一个 next() 方法，该方法返回一个包含 value 和 done 属性的对象。 value 属性表示当前迭代的值，done 属性表示迭代是否完成。

听起来有点复杂，但其实并不难。让我们来看一个例子：

const myIterable = {
  data: [1, 2, 3],
  [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 };
        }
      }
    };
  }
};

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

在这个例子中，我们定义了一个名为 myIterable 的对象，它包含一个 data 属性和一个 Symbol.iterator 方法。 Symbol.iterator 方法返回一个迭代器对象，该迭代器对象包含一个 next() 方法。 next() 方法会依次返回 data 数组中的元素，直到数组遍历完毕。

通过自定义可迭代对象，你可以控制迭代的行为，实现更加灵活的迭代逻辑。这就像你可以根据自己的喜好，定制旅行路线，探索更加个性化的风景。

总结：拥抱迭代，拥抱 for...of

for...of 循环是 JavaScript 中一个非常强大和实用的特性。它提供了一种简洁优雅的方式，让我们能够轻松地遍历各种可迭代对象。掌握 for...of 循环，可以提高代码的可读性和可维护性，让你的代码更加优雅和高效。

所以，下次当你需要遍历一个数组、字符串、Map、Set 或者其他可迭代对象时，不妨尝试一下 for...of 循环。相信你会爱上它的简洁和优雅，就像爱上一次说走就走的旅行一样。

希望这篇文章能帮助你更好地理解 for...of 循环，并将其应用到你的实际项目中。祝你编程愉快！迭代快乐！

for…of：一场说走就走的迭代旅行

发表回复 取消回复

发表回复取消回复