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这种数据结构