Javascript 简明教程

JavaScript - The Iterables Object

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

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

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

  1. Array

  2. String

  3. Map

  4. Set

  5. Arguments

  6. NodeList

  7. TypedArrays

  8. Generators

Iterate using the for…​of loop

在本节中，我们将使用 for…of 循环遍历数组元素、字符串字符、set 元素以及 map 的键值对。

Example: Iterate over an array

在下面的代码中，我们定义了一个数组，并使用 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,

Example: Iterate over a string

在下面的代码中，我们使用 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,

Example: Iterate over a set

在这个示例中，我们创建了一个包含多个元素的 set。然后，我们遍历 set 的每个元素并输出。

<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,

Example: Iterate over a 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

Iterate using the forEach() method

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

Example

在以下示例中，我们使用 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,

Iterate using the map() method

本节中，我们使用 map() 方法遍历可迭代项。

Example

在以下示例中，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 还可以让我们定义自定义迭代器来遍历可迭代项。