微信公众号:新鹏指南
如有问题或建议,请公众号留言
最近更新:
基本概念:
在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这种数据结构
领取专属 10元无门槛券
私享最新 技术干货