Javascript 简明教程

JavaScript - The Iterables Object

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

In JavaScript, iterables are objects that can be iterated through using the for…​of loop. They can also be iterated over using other methods like forEach(), map(), etc.

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

Basically, you can traverse through each element of the iterable in JavaScript.

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

Here are some examples of the common iterables.

  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 的键值对。

In this section, we will iterate through the array elements, string characters, set elements, and key-value pairs of the map using the for…​of loop.

Example: Iterate over an array

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

In the below code, we have defined an array and used the for…​of loop to iterate through the array.

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

The code prints each element of the array in the output.

<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 循环来遍历每个字符串字符。

In the below code, we used the for…​of loop to iterate through each string character.

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

The code prints the comma seprated string characters in the output.

<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 的每个元素并输出。

In this example, we have created a set containing multiple elements. After that, we traverse through each element of the set and print in the output.

<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 中获取一个键值对。

In the example below, we have defined the map containing 3 key-value pairs. In each iteration of the for…​of loop, we get a single key-value pair from the 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() 方法来遍历可迭代对象。

In this section, we have used the forEach() method to iterate through the iterable.

Example

在以下示例中，我们使用 forEach() 方法与数组配合在该数组上进行迭代，并在输出中打印数组的每个元素。

In the example below, we used the forEach() method with an array to iterate the array and print each element of the array in the output.

<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() 方法遍历可迭代项。

In this section, we have used the map() method to iterate through the iterable.

Example

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

In the example below, the map() method is used with the array. In the callback function of the map() method, we print the array elements.

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

However, you can traverse the array, string, etc., using the loops like a for loop, while loop, etc. JavaScript also allows us to define custom iterators to traverse the iterable.