首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Iterator和for……of循环—ES6第五节

微信公众号:新鹏指南

如有问题或建议,请公众号留言

最近更新:

基本概念:

在ES6中新增了Set和Map两种数据结构,再加上JS之前原有的数组和对象,这样就有了四种数据集合,平时还可以组合使用它们,定义自己的数据结构,比如数组的成员是Map,Map的成员是对象等。这样就需要一种统一的接口机制,来处理所有不同的数据结构。

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

Iterator遍历器的做用:

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

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

ES6新增了遍历命令for…of循环,Iterator接口主要供for…of消费。

1 手写 Iterator 接口

Iterator就是数据结构下面的某个方法,我们以数组举个例子

Iterator的遍历过程:

首先创建一个指针对象,指向当前数据结构的起始位置。也就是说,遍历器对象本质上,就是一个指针对象。接下来依次的调用next方法,去遍历数据结构的每一个成员,直到遍历完成为止。

每次调用next方法都会返回数据结构当前成员的信息.就是的说就是返回包含value和done两个属性的对象。

其中value是当前属性的值,而done属性是一个布尔值.表示遍历是否结束。在遍历过程中done始终是false,而在遍历结束之后,done就变成了true

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

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

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

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

了解了基本的遍历过程之后,在ES6中有些数据结构原生就具备了iterator,比如说数组,Set等,但是有些就没有,比如说对象,

所以说这时我们需要去区分一下,那些数据结构具备iterator接口.

在ES6中决定了如果说一个数据结构具备了Symbol.iterator 属性,那么这个数据结构就具备 Iterator 接口

2 凡是具有 Symbol.iterator 属性的数据结构都具有 Iterator 接口

下面我们举个例子,先声明三个常量,分别是一个数组和一个set和一个map,分别给它们初始化一些数据,之后我们用三个常量保存一下 Iterator 接口,并且执行一下这个函数

这个时候我们就发现了打印出了这三个数据结构的对象指针

接下来我们就可以使用next方法去遍历数据结构了

我们以set为例

这时我们发现打印出了a,b,c已经最后一次的undefined,以及done的值变成true,证明这次的变量完成了

为了形成对比,我们在声明一个对象obj

可以发现控制台打印出来的值是一个undefined,证明了对象这种数据结构,原生并不具备Iterator

Symbol是ES6中新增的一种数据类型,在这里我们只需要把它当作成一个普通的属性名就可以了

3 具备iterator接口的数据结构都可以进行如下操作

解构赋值

扩展运算符

证明set这种数据结构可以进行解构赋值

所以但凡是具备iterator接口的数据结构都可以进行解构赋值

除了结构赋值以外,还有一个扩展运算符,扩展运算符实际上就是…,他的作用就是将一个数据结构进行展开

举个例子

首先我们声明一个字符串,字符串是一个类数组,而且也具备iterator接口,所以就可以使用扩展运算符将其展开

接下来我们再举一个例子,

ES6数组去重

从上面的例子我们知道凡事具备iterator接口的数据结构,都可以使用扩展运算符

4 for…of循环

凡事具备iterator接口的数据结构都可以进行for…of循环

我先以数组为例,了解一下for…of循环的基本语法

我们在举一个例子

data既然是一个数组,我们还可以使用解构赋值的方式去遍历Map这种数据结构

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180312G0M93C00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券