笙亿网络策划

JavaScript 用户自定义迭代器怎么实现？

约 8 分钟读完 38 阅
文章导读
上一个 测验 下一个 在 JavaScript 中，可迭代对象（iterable）是一个在其原型中具有 Symbol.iterator() 方法的对象。可迭代对象的示例包括 array、set、map、string 等。Symbol.iterator() 方法返回一个包含
📋 目录
  1. Ⅰ next() 方法
  2. Ⅱ 用户定义的迭代器
A A

JavaScript - 用户定义的迭代器

上一个
测验
下一个

在 JavaScript 中，可迭代对象（iterable）是一个在其原型中具有 Symbol.iterator() 方法的对象。可迭代对象的示例包括 array、set、map、string 等。Symbol.iterator() 方法返回一个包含 next() 方法的对象，该对象被称为 iterator。这里，next() 方法在每次调用时返回可迭代对象的元素。

next() 方法

iterator 对象的 next() 方法返回一个包含以下两个键值对的对象。

  • value − value 键包含元素作为其值。

  • done − done 键包含布尔值。如果可迭代对象的所有迭代已完成，则包含 true；否则，包含 false。

示例

在下面的示例中，我们创建了一个 array，并将 array 的 iterator 存储在 'iter' 变量中。然后，我们使用 iterator 对象的 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() 方法的对象。next() 方法在 n 小于数组长度时，从第 n 个索引返回包含数组元素和 false 布尔值的对象。如果 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) {
         // 用于跟踪索引
         let n = 0;
         return {
            // next() 方法
            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");
       // 空对象
       oddNum = {};
       // 添加迭代器 
       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>

输出

1
3
5
7

当需要在遍历 iterable 时进行自定义时，应该创建用户定义的迭代器。例如，遍历数组的交替元素，从迭代器中获取偶数或奇数等。