相关 es6 文章:

1. 简介

2. 块级作用域

3. const命令

4. 解构赋值

5. 数组（一）

6. 数组（二）

7. 函数（一）

8. 函数（二）

9. 函数（三）

10. 对象

11. Symbol

12. Set结构

13. Map结构

概念

Iterator -遍历器。

javascript 中表示‘集合’的数据结构有 数组 对象 Set Map, Iterator 为它们提供了统一访问接口，即遍历器（对象），方便遍历。

部署

ES6 中 Iterator 部署在 Symbol.iterator 属性中，它返回一个方法，执行该方法就会得到遍历器对象。

数组（类数组） Set Map 这三种结构都默认部署了 Symbol.iterator 。

遍历器的使用 （next）

遍历器对象可以使用 .next() 方法获取值，返回一个对象：值和done（是否完成）。

// 让我们使用遍历器完成数组的遍历

var arr=[1,2,3];

var iter=arr[Symbol.iterator]();

iter.next(); //{value: 1, done: false}

iter.next(); //{value: 2, done: false}

iter.next(); //{value: 3, done: false}

iter.next(); //{value: undefined, done: true}

注：遍历器对象还有 return() 和 throw() 方法，一般用不到，不再详述。

。。等等，什么鬼？遍历个数组这么麻烦！？当然有简单的

使用 for of 遍历

以下数据结构都默认部署了 Symbol.iterator：

1. Map Set

2. Array

3. ArrayLike (String arguments NodeList)

使用 for..of... 循环遍历部署了 Interator 接口的数据结构

//举几个常见的栗子

//set

var s=new Set(['a','b','c']);

for(var i of s){

　console.log(i);//a b c

}

//map

var m=new Map([['a',1],['b',2]]);

for(var [k,v] of m){

　console.log(k);//a b

　console.log(v);//1 2

}

//数组

var arr=[1,2,3];

for(var i of arr){

　console.log(i);//1 2 3

}

//类数组的遍历（自己转的类数组不含遍历器的不行）

var p=document.getElementsByTagName('p');

for(var i in p){

　...

}

注：字符串是一个类数组对象，也有 Iterator 接口；

。。桥豆麻袋，栗子中没有对象啊，没错，默认不能使用 for of ！

那么问题来了，说好的大统一呢？

实际上一来对象的遍历使用 for in即可，并不需要for of，其次只要给对象加上遍历器对象就使用 for of 了（不详述）

Iterator 接口调用的默认调用

1. 解构赋值

解构赋值实际上调用了 Iterator 接口

let s=new Set(['a','b','c']);

let [x,y]=s;

x; //"a"

y; //"b"

2. 扩展运算符

实际上，只要是有 Iterator 接口就可以使用扩展运算符

let str='abc';

[...str] //["a", "b", "c"]

心塞，默默的晒图

文章到这里结束，下篇 ? Generator

【关注一下不迷路~】

【html】【css】【html】【css】【javascript】【html】【javascript】【css】【javascript】【css】