JavaScript - 可迭代对象

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

基本上，您可以遍历 JavaScript 中可迭代对象的每个元素。

以下是一些常见可迭代对象的示例。

数组
字符串
Map
Set
参数
NodeList
TypedArray
生成器

使用 for...of 循环迭代

在本节中，我们将使用 for...of 循环迭代数组元素、字符串字符、集合元素以及 Map 的键值对。

示例：迭代数组

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

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

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

输出

Iterating the array:
Hello, Hi, 10, 20, 30,

示例：迭代字符串

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

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

<html>
<body>    
   <div id = "demo">Iterating a string: </div>
   <script>
      const output = document.getElementById("demo");
      let str = "Hello";
      // Iterating a string
      for (let char of str) {
         output.innerHTML += char + ", ";
      }
   </script>
</body>
</html>

输出

Iterating a string: H, e, l, l, o,

示例：迭代集合

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

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

输出

Iterating the Set: 10, 20, 30, 40, 50,

示例：迭代 Map

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

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

输出

Iterating the Map:
1,one
2,two
3,three

使用 forEach() 方法迭代

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

示例

在下面的示例中，我们使用 forEach() 方法和一个数组来迭代数组，并在输出中打印数组的每个元素。

<html>
<body>
	<div> Using the forEach() method: </div>
   <div id="demo"></div>
   <script>
	   const output = document.getElementById("demo");
      const array = [true, false, 50, 40, "Hi"];
      // Iterating array
      array.forEach((ele) => {
         output.innerHTML += ele + ", ";
      })
    </script>
</body>
</html>

输出

Using the forEach() method:
true, false, 50, 40, Hi,

使用 map() 方法迭代

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

示例

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

<html>
<body>
   <p id = "demo">Using the map() method: </p>
   <script>
	   const output = document.getElementById("demo");
      const array = [true, false, 50, 40, "Hi"];
      // Iterating array
      array.map((ele) => {
         output.innerHTML += ele + ", ";
      })
   </script>
</body>
</html>

输出

Using the map() method: true, false, 50, 40, Hi,

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

打印页面