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 還允許我們定義自定義迭代器來遍歷可迭代物件。

列印頁面