Iterator

最新推荐文章于 2021-08-03 19:57:52 发布

jwz934738949

最新推荐文章于 2021-08-03 19:57:52 发布

阅读量90

点赞数

分类专栏： ES6与ES7

本文链接：https://blog.csdn.net/jwz934738949/article/details/118462540

版权

ES6与ES7 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文深入探讨了JavaScript中的迭代器接口及其作用，解释了其工作原理，包括如何创建自定义迭代器以及如何使用for...of进行遍历。示例展示了如何通过迭代器遍历数组，并强调了迭代器在数据结构统一访问接口中的重要性。此外，还讨论了如何为数据结构部署iterator接口，以便支持for...of循环。

摘要由CSDN通过智能技术生成

概念

iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制

作用

为各种数据结构，提供一个统一的、简便的访问接口
使得数据结构的成员能够按某种次序排列
Iterator接口主要供for of消费

工作原理

创建一个指针对象，指向数据结构的起始位置
第一次调用next方法，指针自动指向数据结构的第一个位置
接下来不断调用next方法，指针自动后移，直到指向最后一个成员
每调用一次next方法，都会返回一个对象。对象包含value与done两个属性，value为指针所指向成员的值，而done为一个布尔值，代表是否已经到达数据结构的最后
遍历结束之后的对象中，value为undefined，done为false
自定义Iterator

      // 自定义Iterator遍历器
      function myIterator(arr) {
        // 定义指针
        let nextIndex = 0;
        return {
          next: function () {
            return nextIndex < arr.length
              ? { value: arr[nextIndex++], done: false }
              : { value: undefined, done: true };
          },
        };
      }

      let arr = [1, 3, 14, 35, -22.0];
      let iteratorObj = myIterator(arr);
      console.log(iteratorObj.next());
      console.log(iteratorObj.next());
      console.log(iteratorObj.next());
      console.log(iteratorObj.next());
      console.log(iteratorObj.next());
      console.log(iteratorObj.next());

for of遍历

使用for of进行遍历时，可以将iterator接口赋给数据结构，这样该数据结构可以正常使用for of进行遍历
数组、字符串、arguments、set容器、map容器默认含有iterator接口，可以直接使用for of进行遍历
使用Symbol.iterator来对数据结构进行iterator接口的部署，之后该数据结构便拥有了iterator接口的特性，可以使用for of来进行遍历
默认使用三点运算符与结构赋值时，也可以使用iterator接口进行遍历

      // 使用三点运算符
      let arr1 = [2, 3, 4];
      let arr = [1, ...arr1, 5];
      console.log(arr);

      // 使用结构赋值
      let [a, b] = arr1;
      console.log(a, b);