JavaScript - 使用者定義迭代器

在 JavaScript 中，可迭代物件是一個其物件原型中具有 Symbol.iterator() 方法的物件。一些可迭代物件的示例包括陣列、集合、對映、字串等。Symbol.iterator() 方法返回一個包含 next() 方法的物件，該物件稱為迭代器。在這裡，next() 方法在每次呼叫時返回可迭代物件的元素。

next() 方法

迭代器物件的 next() 方法返回一個包含下面兩個鍵值對的物件。

value - value 鍵包含元素作為值。
done - done 鍵包含布林值。如果可迭代物件的所有迭代都已完成，則它包含 true。否則，它包含 false。

示例

在下面的示例中，我們建立了陣列並將陣列迭代器儲存在變數 'iter' 中。之後，我們使用迭代器物件的 next() 方法獲取下一個值。

輸出顯示 next() 方法返回包含 'value' 和 'done' 屬性的物件。最後一次迭代返回僅包含 'done' 屬性的物件。

<html>
<head>
   <title> JavaScript - Iterators </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");
      const nums = [10, 72, 45];
      const iter = nums[Symbol.iterator]();
      output.innerHTML += JSON.stringify(iter.next()) + "<br>";
      output.innerHTML += JSON.stringify(iter.next()) + "<br>";
      output.innerHTML += JSON.stringify(iter.next()) + "<br>";
      output.innerHTML += JSON.stringify(iter.next()) + "<br>";
   </script>
</body>
</html>

輸出

{"value":10,"done":false}
{"value":72,"done":false}
{"value":45,"done":false}
{"done":true}

使用者定義迭代器

在以上部分，我們瞭解了迭代器在 JavaScript 中的工作原理。Symbol.iterator() 方法返回包含 next() 方法的物件，並且每當我們執行 next() 方法時，它都會返回一個物件。

因此，以同樣的方式，我們可以實現使用者定義的迭代器。

示例

在下面的示例中，我們使用函式建立了自定義迭代器。該函式返回包含 next() 方法的物件。如果 n 小於陣列長度，則 next() 方法返回包含陣列元素和布林值 false 的物件（來自第 n 個索引）。如果 n 大於或等於陣列長度，則它返回僅包含 'done' 屬性和布林值 'true' 的物件。

之後，我們使用 iter.next() 語法獲取下一個陣列元素。

<html>
<head>
   <title> JavaScript - User defined iterators </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");
      function customIterator(chars) {
         // To track index
         let n = 0;
         return {
            // next() method
            next() {
               if (n < chars.length) {
                  return {
                     value: chars[n++],
                     done: false
                  }
               }
               return {
                  done: true
               }
            }
         }
      }
      const chars = ['A', 'C', 'E'];
      const iter = customIterator(chars);
      output.innerHTML += JSON.stringify(iter.next()) + "<br>";
      output.innerHTML += JSON.stringify(iter.next()) + "<br>";
      output.innerHTML += JSON.stringify(iter.next()) + "<br>";
      output.innerHTML += JSON.stringify(iter.next()) + "<br>";
      output.innerHTML += JSON.stringify(iter.next()) + "<br>";
   </script>
</body>
</html>

輸出

{"value":"A","done":false}
{"value":"C","done":false}
{"value":"E","done":false}
{"done":true}
{"done":true}

以上程式碼使用函式來定義迭代器。因此，您不能將 for…of 迴圈與迭代器一起使用。讓我們在下面的示例中學習如何使用物件定義迭代器。

示例

在下面的示例中，我們將一個函式作為 'Symbol.iterator' 鍵的值新增。該函式返回 next() 方法。next() 方法返回奇數。如果奇數的值為 9，則它透過返回 {done: true} 物件來結束迭代。

在這裡，我們使用物件建立了迭代器。因此，您可以使用 for…of 迴圈。迴圈將自動執行迭代器的 next() 方法並返回 next() 方法返回的物件的 'value' 屬性的值。

<html>
<head>
   <title> JavaScript - User defined iterators </title>
</head>
<body>
   <p id = "output"> </p>
    <script>
       const output = document.getElementById("output");
       // Empty object
       oddNum = {};
       // Add iterator 
       oddNum[Symbol.iterator] = function () {
          let p = -1;
          done = false;
          return {
             next() {
                p += 2;
                if (p == 9) return { done: true }
                return { value: p, done: done };
             }
          };
       }
       for (const odd of oddNum) {
          output.innerHTML += odd + "<br>";
       }
   </script>
</body>
</html>

輸出

當需要自定義可迭代物件的遍歷時，您應該建立使用者定義的迭代器。例如，遍歷交替的陣列元素、從迭代器中獲取偶數或奇數等。

列印頁面