专栏首页前端一会《你不知道的JavaScript》:迭代器Iterator的背景梳理

《你不知道的JavaScript》:迭代器Iterator的背景梳理

本篇复习下上篇用到的Symbol.iterator,它是ES6内置的十一个Symbol值之一。ES6中规定对象的Symbol.iterator属性指向该对象的默认迭代器方法,当对象进行for...of..遍历迭代时,会调用对象的Symbol.iterator方法,返回该对象的默认迭代器。

至于这个迭代器的形成原因,是因为到ES6,js已有Array、Object、Set和Map四种数据集合,用户还能自由组合它们来定义自己的数据结构,这样js就需要一种统一的接口机制来处理所有不同的数据结构。而迭代器(Iterator)就是这样一种机制。它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口,就可以完成遍历操作(依次处理该数据结构的所有成员)。

迭代器(Iterator)作用有三:

  • 为各种数据结构提供统一简便的访问接口
  • 使得数据结构的成员能够按照某种次序排列
  • ES6创造了新遍历命令for…of…,迭代器(Iterator)主要供for…of..消费

迭代器(Iterator)的遍历过程是这样的:

  • 创建一个指针对象,指向当前数据结构的起始位置。也就是说,遍历器对象本质上,就是一个指针对象
  • 第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员
  • 第二次调用指针对象的next方法,指针就指向数据结构的第二个成员
  • 不断调用指针对象的next方法,直到它指向数据结构的结束位置

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

总的来说,迭代器(Iterator)接口的目的,就是为所有数据结构提供一种统一的访问机制,这个访问机制其实就是for...of...。当使用for...of...循环遍历某种数据结构时,该循环会自动寻找Iterator接口。

所以一种数据结构只要部署了Iterator接口,我们就称这种数据结构是可遍历(iterable)的。

ES6规定,默认的迭代器(Iterator)接口部署在数据结构的Symbol.iterator属性上,或者一个数据结构只要具有Symbol.iterator属性,就可以认为是可遍历(iterable)的。

Symbol.iterator属性本身是一个函数,就是当前数据结构默认的迭代器生成函数。执行这个函数,就去返回一个迭代器。至于属性名Symbol.iterator,它是一个表达式,返回Symbol对象的iterator属性,这是一个预定义好的、类型为 Symbol 的特殊值,所以要放在方括号内。

ES6中原生具有迭代器(Iterator)接口的数据结构有:ArraySetMapStringTypedArray、函数中的arguments、NodeList对象,它们都具有Symbol.iterator属性。注意对象Object没有Symbol.iterator属性,也就是说没有部署迭代器接口。

下面是数组的迭代器接口使用示例:

var arr = [10, 2, 3, 4, 5];
var it = arr[Symbol.iterator]();    // 调用数组arr的迭代器接口方法,获取数组的迭代器对象
console.log(it.next().value);       // 10
console.log(it.next().value);       // 2
console.log(it.next().value);       // 3
console.log(it.next().value);       // 4

上面代码中,变量arr是一个数组,原生就具有遍历器接口,部署在arr的Symbol.iterator属性上面。所以,调用这个属性,就得到遍历器对象。

对于原生部署 Iterator 接口的数据结构,不用自己写遍历器生成函数,for…of循环会自动遍历它们。除此之外,其他数据结构(主要是对象)的 Iterator 接口,都需要自己在Symbol.iterator属性上面部署,这样才会被for…of循环遍历。

对象(Object)之所以没有默认部署 Iterator 接口,是因为对象的哪个属性先遍历,哪个属性后遍历是不确定的,需要开发者手动指定。本质上,遍历器是一种线性处理,对于任何非线性的数据结构,部署遍历器接口,就等于部署一种线性转换。

一个对象如果要具备可被for…of循环调用的 Iterator 接口,就必须在Symbol.iterator的属性上部署遍历器生成方法(原型链上的对象具有该方法也可)。

继续用前文示例中的something迭代器,已经忘记的可以翻下前文《你不知道的JavaScript》:生成器中的生产者和迭代器。something对象之所以被称为迭代器,是因为其接口中含有一个next()方法,这类迭代器对象(Iterator)有一个术语叫做可迭代(iterable)。

从ES6开始,从一个iterable中提取迭代器的方法是:iterable必须支持一个函数,其名称是专门的ES6符号值Symbol.iterator。调用这个函数时,它会返回一个迭代器。通常每次调用会返回一个全新的迭代器。回顾下自定义的something迭代器:

var something = (function(){
    var nextVal;
    return {
        [Symbol.iterator]: function(){ return this; },
        next: function(){
            // 执行next()时迭代的执行逻辑
            return {done: false, value: nextVal}
        }
    }
})()

上例中something对象中定义了一个方法[Symbol.iterator]: function(){ return this; },这个Symbol.iterator方法将something对象也构建成一个iterable。现在它既是iterable,也是迭代器,当把something传递给for..of循环时,可以工作。

js原生的迭代器还记得有哪些么:Array、Set、Map、String等。以数组为例:

var arr = [10, 2, 3 , 5, 6];
for(var v of arr){
    console.log(v);
}
// 10  2  3  5  6

上例中的arr是一个iterable。for..of循环会自动调用它的Symbol.iterator函数来构建一个迭代器。当然也可以手工调用这个Symbol.iterator函数,然后使用它返回的迭代器。

对于上例中arr数组的手工创建迭代器:

var arr = [10, 2, 3 , 5, 6];
var it = arr[Symbol.iterator]();    // 注意,这里要调用(Symbol.iterator)函数才会创建出一个迭代器
console.log(it.next().value);       // 10
console.log(it.next().value);       // 2
console.log(it.next().value);       // 3

-------------------------------- 热门文章 --------------------------------

设计模式>>>

javascript设计模式一: 单例模式

javascript设计模式二:策略模式

javascript设计模式三:代理模式

javascript设计模式四:迭代器模式

javascript设计模式五:原型模式

javascript设计模式六:发布-订阅模式(观察者模式)

javascript设计模式七:模板方法模式

javascript设计模式八:职责链模式

javascript设计模式九:中介者模式

javascript设计模式十:装饰者模式

本文分享自微信公众号 - 前端小二(frontendxiao2),作者:小二君

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-01-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 《你不知道的JavaScript》:作用域

    说的更细致点,作用域就是一套负责收集并维护所有声明的标识符(变量)组成的一系列查询,并实施一套非常严格的规则,确定当前执行的代码对这些标识符的访问权限。

    前端_AWhile
  • JS作用域和作用域链

    全局变量的作用域是全局性的,即在JavaScript代码中,该全局变量处处都有定义。

    前端_AWhile
  • JS中的面向对象设计原则

    程序的执行有几种套路:顺序执行、判断执行和循环执行。我认为的程序其实就是一个个或好或差的单元组成的大单元,计算机对这个大单元进行执行计算的过程。既然这个计算有过...

    前端_AWhile
  • 毕业设计:爬虫及数据分析

    指导老师跟我说,本科毕业设计不需要创新,但是工作量一定要够,我就知道又要搞事情了。

    用户2145057
  • vShield Manager5.5.4 防毒系统异常解决方案

            最近升级虚拟化平台,从ESXI5.0升级至ESXI6.0.0 Update1,中间经过了Windows vCenter5.1迁移至VCSA6.0...

    木子-Lee
  • 服务化配置的另一种可能

    项目背景 项目是给内部团队用的,也算是业务场景较为复杂的系统,这种系统较于互联网C端产品,用户量不大,QPS峰值不会太高,但业务会比较复杂,业务变动比较频繁。 ...

    春哥大魔王
  • Python中的NLP

    自然语言处理(NLP)是数据科学中最有趣的子领域之一,数据科学家越来越期望能够制定涉及利用非结构化文本数据的解决方案。尽管如此,许多应用数据科学家(来自STEM...

    February
  • Django来敲门[升级版]-0000-概述web概述课程介绍开发环境写在前面:

    web软件,是软件发展过程中最重要也是代表了将来软件应用的一种趋势。 对于web软件的开发来说,传统意义上的java语言、php语言、ruby语言都是web软...

    大牧莫邪
  • 用户体验是什么?为什么需要用内容、图片及外链来优化它

    为了赢得用户体验,这是一个重要的因素,搜索引擎优化,将有大量的内容在互联网上每天。营销组织也开始培养原创内容。随着短视频的发展,视频内容、图表、图像和视频开辟了...

    达沃斯分享
  • 数据结构之哈夫曼树和编码器的构造

    在最近的自学数据结构的过程中,为加深树的理解,码了一个二叉树编码器,请多多指教: ---- #include #define MAXBIT100 //最大子树...

    云时之间

扫码关注云+社区

领取腾讯云代金券