JavaScript的Iterator认识

HollisChuang 发布于2019-08-21 16:54 / 670人阅读

摘要：也就是说，遍历器对象本质上，就是一个指针对象。其中，属性是当前成员的值，属性是一个布尔值，表示遍历是否结束。属性本身是一个函数，就是当前数据结构默认的遍历器生成函数。执行这个属性，会返回一个遍历器对象。

遍历器（Iterator）

遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。
Iterator 的作用有三个：

为各种数据结构，提供一个统一的、简便的访问接口；

使得数据结构的成员能够按某种次序排列；

ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。

遍历过程：

创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。

第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。

第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。

不断调用指针对象的next方法，直到它指向数据结构的结束位置。

每一次调用next方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。

Iterator 接口的实现

一种数据结构只要部署了 Iterator 接口，也就是由next方法，返回的是value和 done属性，我们就称这种数据结构是”可遍历的“（iterable）。
ES6 规定，默认的 Iterator 接口部署在数据结构的Symbol.iterator属性，或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable）。Symbol.iterator属性本身是一个函数，就是当前数据结构默认的遍历器生成函数。执行这个函数，就会返回一个遍历器。至于属性名Symbol.iterator，它是一个表达式，返回Symbol对象的iterator属性，这是一个预定义好的、类型为 Symbol 的特殊值，所以要放在方括号内（参见 Symbol 一章）。

const obj = {
  [Symbol.iterator] : function () {  
    //Symbol.iterator是指Symbol对象的iterator属性，所以使用其作为obj的属性名需要使用[]抱起来，
    return {
      next: function () {
        return {
          value: 1,
          done: true
        };
      }
    };
  }
};

上面代码中，对象obj是可遍历的（iterable），因为具有Symbol.iterator属性。执行这个属性，会返回一个遍历器对象。该对象的根本特征就是具有next方法。每次调用next方法，都会返回一个代表当前成员的信息对象，具有value和done两个属性。
原生具备 Iterator 接口的数据结构如下：

Array

Map

Set

String

TypedArray

函数的 arguments 对象

NodeList 对象

阅读阮老师的es6的随手笔记：http://es6.ruanyifeng.com/#do...，本文只是记录下学习过程，会比只看来的好点

GPU云服务器云服务器对大数据的认识 python的认识对云计算的认识对人工智能的认识

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88878.html

从观察者模式到迭代器模式系统讲解 RxJS Observable（一）

摘要：是的缩写，起源于，是一个基于可观测数据流结合观察者模式和迭代器模式的一种异步编程的应用库。是基于观察者模式和迭代器模式以函数式编程思维来实现的。学习之前我们需要先了解观察者模式和迭代器模式，还要对流的概念有所认识。 RxJS 是 Reactive Extensions for JavaScript 的缩写，起源于 Reactive Extensions，是一个基于可观测数据流 Stre...

notebin 2019-08-23 18:02 评论0 收藏0
【JS基础】从JavaScript中的for...of说起(上) - iterator 和 gene

摘要：当这个迭代器的方法被首次后续调用时，其内的语句会执行到第一个后续出现的位置为止，后紧跟迭代器要返回的值。在这个回调函数里，我们使用第一个请求返回的，再次发起一个请求。写在前面本文首发于公众号：符合预期的CoyPan 后续文章：【JS基础】从JavaScript中的for...of说起(下) - async和await 先来看一段很常见的代码： const arr = [1, 2, ...

wslongchen 2019-08-23 16:48 评论0 收藏0
es6 generator函数

摘要：返回的遍历器对象可以依次遍历函数内部的每一个状态。示例内部捕获外部捕获内部捕获外部捕获上面代码遍历器对象连续抛出两个错误，第一个被函数体内的捕获。上面代码中，首先执行函数，获取遍历器对象，然后使用方法第二行，执行异步任务的第一阶段。参考来源《ecmascript6 入门》generator部分认识generator函数形式上，generator函数有两个特点：一是functio...

voidking 2019-08-20 15:18 评论0 收藏0
详解NodeList 和 HTMLCollection 和 Array

摘要：展开的属性后发现，继承于一个对象，而这个对象又继承于对象。这证实了我们对的猜想。是比较新的模型，相比更加完善，不光有元素，还有节点和。关于，和的关系，就是长得像，有个别相似的功能，但是是完全不一样的东西。 Array，NodeList， HTMLCollection这三个概念和它们之间的关系有很多做了几年前端的同学都搞不清楚，经常遇到但是又感觉很陌生，剪不断理还乱的感觉。今天咱们就来理...

xietao3 2019-08-22 18:32 评论0 收藏0