JavaScript 可迭代对象

JavaScript 中的可迭代对象是可以使用 for...of 循环进行遍历的对象。它们也可以使用其他方法如 forEach(), map() 等进行遍历。

基本上，你可以通过 JavaScript 遍历可迭代对象的每一个元素。

以下是一些常见的可迭代对象的例子：

数组（Array）
字符串（String）
映射表（Map）
集合（Set）
参数对象（Arguments）
节点列表（NodeList）
类数组（TypedArrays）
生成器（Generators）

使用 `for...of` 循环进行遍历

在本节中，我们将使用 for...of 循环来遍历数组元素、字符串字符、集合元素以及映射表的键值对。

示例：遍历数组

在下面的代码中，我们定义了一个数组，并使用 for...of 循环遍历数组。

代码会在输出中打印数组的每一个元素。

<html>
<body>
   <div>遍历数组:</div>
   <div id="demo"></div>
   <script>
      const output = document.getElementById("demo");
      const array = ["Hello", "Hi", 10, 20, 30];
      // 遍历数组
      for (let ele of array) {
         output.innerHTML += ele + ", ";
      }
   </script>
</body>
</html>

输出：

遍历数组:
Hello, Hi, 10, 20, 30,

示例：遍历字符串

在下面的代码中，我们使用 for...of 循环遍历每个字符串字符。

代码会在输出中打印逗号分隔的字符串字符。

<html>
<body>
   <div id="demo">遍历字符串:</div>
   <script>
      const output = document.getElementById("demo");
      let str = "Hello";
      // 遍历字符串
      for (let char of str) {
         output.innerHTML += char + ", ";
      }
   </script>
</body>
</html>

输出：

遍历字符串: H, e, l, l, o,

示例：遍历集合

在这个例子中，我们创建了一个包含多个元素的集合。之后，我们遍历集合的每一个元素并在输出中打印。

<html>
<body>
   <p id="demo">遍历集合:</p>
   <script>
      const output = document.getElementById("demo");
      const set = new Set([10, 20, 30, 40, 40, 50, 50]);
      // 遍历集合
      for (let ele of set) {
         output.innerHTML += ele + ", ";
      }
   </script>
</body>
</html>

输出：

遍历集合: 10, 20, 30, 40, 50,

示例：遍历映射表

在下面的例子中，我们定义了一个包含三个键值对的映射表。在 for...of 循环的每一次迭代中，我们从映射表中获取一个键值对。

<html>
<body>
   <div id="demo">遍历映射表:<br></div>
   <script>
      const output = document.getElementById("demo");
      const map = new Map([
         ["1", "one"],
         ["2", "two"],
         ["3", "three"],
      ]);
      // 遍历映射表
      for (let ele of map) {
         output.innerHTML += ele + "<br>";
      }
   </script>
</body>
</html>

输出：

遍历映射表:
1,one
2,two
3,three

使用 `forEach()` 方法进行遍历

在本节中，我们使用 forEach() 方法来遍历可迭代对象。

示例

在下面的例子中，我们使用 forEach() 方法遍历数组并在输出中打印数组的每一个元素。

<html>
<body>
   <div>使用 `forEach()` 方法:</div>
   <div id="demo"></div>
   <script>
      const output = document.getElementById("demo");
      const array = [true, false, 50, 40, "Hi"];
      // 遍历数组
      array.forEach((ele) => {
         output.innerHTML += ele + ", ";
      });
   </script>
</body>
</html>

输出：

使用 `forEach()` 方法:
true, false, 50, 40, Hi,

使用 `map()` 方法进行遍历

在本节中，我们使用 map() 方法来遍历可迭代对象。

示例

在下面的例子中，我们使用 map() 方法与数组一起。在 map() 方法的回调函数中，我们打印数组元素。

<html>
<body>
   <p id="demo">使用 `map()` 方法:</p>
   <script>
      const output = document.getElementById("demo");
      const array = [true, false, 50, 40, "Hi"];
      // 遍历数组
      array.map((ele) => {
         output.innerHTML += ele + ", ";
      });
   </script>
</body>
</html>

输出：

使用 `map()` 方法: true, false, 50, 40, Hi,

然而，你也可以使用像 for 循环、while 循环等循环来遍历数组、字符串等。JavaScript 还允许我们定义自定义迭代器来遍历可迭代对象。