5、Iterator和for...of循环—ES6学习笔记

5、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 接口

const arr = [1, 2, 3];const set = new Set(['a', 'b', 'c']);const map = new Map([['a', 1]]);const itArr = arr[Symbol.iterator]();const itSet = set[Symbol.iterator]();const itMap = map[Symbol.iterator]();// 现在我分别取打印一下itArr,itSet,itMapconsole.log(itArr);console.log(itSet);console.log(itMap);

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

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

console.log(itSet.next());console.log(itSet.next());console.log(itSet.next());console.log(itSet.next());

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

const obj = {};console.log(obj[Symbol.iterator]);

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

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

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

解构赋值扩展运算符

let [x, y] = set; console.log(x, y); // a b

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

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

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

举个例子

let str = 'zhang';// 这里我们再写上一个数组str,let arrStr = [...str];// 我们可以将它打印出来console.log(arrStr);// 我们看见打印出了zhang这个字符串每一项组成的数组

接下来我们再举一个例子， ES6数组去重

const arr2 = [{}, 1, 'a', 1, 'a', 'b', []];// Set这种数据结构它是一个集合,集合是不允许出现重复的值的,所以我们就可以使用set这种数据结构为数组去重// 直接console.log(new Set());// 然后把arr2当做参数传入进去,之后把这个整体用数组包一下// 在使用一些扩展运算符console.log([...new Set(arr2)]); //这时我们发现就打印出了去重之后的数组

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

4 for…of循环 凡事具备iterator接口的数据结构都可以进行for…of循环 我先以数组为例，了解一下for…of循环的基本语法

const ofArr = [1, 2, 3, 4];for(let i of ofArr){ console.log(i); // 打印数组中的每一项

我们在举一个例子

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

for(let [key, value] of m){ console.log(key, value);//这样就打印出了每个key以及每个key的value值

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。