JavaScript for...of迴圈

JavaScript 中的for...of迴圈用於遍歷可迭代物件的元素。在每次迭代中，它都會返回可迭代物件的其中一個元素。可迭代物件包括陣列、字串、Map、Set和生成器。

與使用for...in迴圈相比，JavaScript for...of迴圈是迭代可迭代物件的一種更高效的方法。for...of迴圈迭代屬性值，而for...in迴圈用於迭代物件的鍵（屬性名）。

語法

JavaScript 中'for...of'迴圈的語法如下：

for (ele of iterable) {
    // loop body
}

引數

ele − 可迭代物件的當前元素。
of − JavaScript 運算子。
iterable − 可迭代物件，例如物件、陣列、字串等。

示例

示例：帶陣列的for...of迴圈

在下面的示例中，陣列包含各種字串。之後，我們使用for...of迴圈遍歷每個陣列元素。在輸出中，我們可以看到它列印了每個陣列元素。

<html>
<head>
    <title> JavaScript - for...of loop </title>
</head>
<body>
    <p id="output"> </p>
    <script>
        const output = document.getElementById("output");
        const arr = ["JavaScript", "Python", "C", "C++", "HTML", "CSS"];
        for (let ele of arr) {
            output.innerHTML += ele + "<br>";
        }
    </script>
</body>
</html>

輸出

JavaScript
Python
C
C++
HTML
CSS

示例：帶字串的for...of迴圈

在JavaScript中，字串也是可迭代的，因為我們可以遍歷字串的每個字元。在下面的程式碼中，for...of迴圈用於遍歷字串的每個字元。

<html>
<head>
    <title> JavaScript - for...of loop </title>
</head>
<body>
    <p id="output"> </p>
    <script>
        const output = document.getElementById("output");
        let str = "JavaScript";
        for (let char of str) {
            output.innerHTML += char + ", ";
        }
    </script>
</body>
</html>

輸出

J, a, v, a, S, c, r, i, p, t,

示例：帶Set的for...of迴圈

在JavaScript中，Set包含唯一元素。在這裡，我們將包含數字的陣列作為Set()建構函式的引數來建立一個Set。之後，我們使用for...of迴圈遍歷Set。

<html>
<head>
   <title> JavaScript - for...of loop </title>
</head>
<body>
   <p id="output"> </p>
   <script>
      const output = document.getElementById("output");
      const nums = new Set([10, 20, 30, 30, 30, 40, 50, 60]);
      for (let num of nums) {
         output.innerHTML += num + ", ";
      }
   </script>
</body>
</html>

輸出

10, 20, 30, 40, 50, 60,

示例：帶Map的for...of迴圈

Map在JavaScript中包含鍵值對，類似於物件。在這裡，我們建立了一個Map，並在Map中插入了3個鍵值對。當我們使用for...of迴圈遍歷Map元素時，在每次迭代中，我們可以獲取到程式碼如下所示的鍵和值。

<html>
<body>
   <p id="output"> </p>
   <script>
      const output = document.getElementById("output");
      const map = new Map();
      map.set("one", 1);
      map.set("second", 2);
      map.set("third", 3)
      for (let [k, v] of map) {
         output.innerHTML += k + " -> " + v + "<br/>";
      }
   </script>
</body>
</html>

輸出

one -> 1
second -> 2
third -> 3

但是，你也可以使用for...in迴圈來遍歷可迭代物件，例如陣列、字串、Map、Set等。

列印頁面