ES6 Iterator 和 for...of 循环

古城微笑少年丶 2021-09-15 07:04 258阅读 0赞

一. for...of 循环

1.for...of

（1）.基本使用

const arr = ['red', 'green', 'blue'];   
    for(let v of arr) {  
        console.log(v); // red green blue  
    }

(2).注意这几点：  
A.这是目前遍历数组最简洁和直接的语法；  
B.它避免了for-in的所有缺陷；  
C.与forEach()不一样，它支持break，continue和return。  
for-in循环用于遍历对象属性。

for-of循环用于遍历数据——比如数组中单值。

(3).其它集合也支持for-of

for-of循环不仅仅是为遍历数组而设计的。基本上所有类数组对象都适用，比如DOM NodeListS。

也能用在字符串上，它将字符串当做一个Unicode字符序列：

for (var chr of "abc"){
      console.log(chr); //依次弹出a,b,c
    }

A.Set集合

var engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]);
    for (var e of engines) {
      console.log(e);
    }
    // Gecko
    // Trident
    // Webkit

B.Map集合:它里面的数据由键值对组成，所以你需要使用destructuring将“键”和“值”解构为两个独立的变量：

for (var \[key, value\] of phoneBookMap) \{   
    console.log(key + "'s phone number is: " + value);

如下面例子：

var es6 = new Map();
    es6.set("edition", 6);
    es6.set("committee", "TC39");
    es6.set("standard", "ECMA-262");
    for (var [name, value] of es6) {
      console.log(name + ": " + value);
    }
    // edition: 6
    // committee: TC39
    // standard: ECMA-262

C.数组

数组原生具备iterator接口（即默认部署了Symbol.iterator属性），for...of循环本质上就是调用这个接口产生的遍历器，可以用下面的代码证明。

上面代码中，空对象obj部署了数组arr的Symbol.iterator属性，结果obj的for...of循环，产生了与arr完全一样的结果。

2.与for..in 比较

for...in由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组也是一个对象，数组中的每个元素的索引被视为属性名称，所以我们可以看到使用for...in循环Array数组时，拿到的其实是每个元素的索引。

var  a=['A','B','C'];
    a.name='hell0';
    
    // 遍历数组
    for(var x in a){
     console.log(x)//输出 0 1 2 3 name
    }
    for(var x of a){
     console.log(x)//输出 A B C
    }
    console.log("a数组:"+a)//a数组:A,B,C

如上所示，当我们为a多手动添加一个属性name的时候，for...in循环会把name属性也包括在内，而Array的length属性却不包括在内。

for...of循环则不存在上述的问题，它只循环集合本身的元素。这就是为什么引入for...of循环。

总而言之，for-in语法是被设计来遍历普通的“键值对”对象的，不适合用在数组上。

二.Iterator

1.概念

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

2.作用：  
①为各种数据结构，提供一个统一的、简便的访问接口  
②使得数据结构的成员能够按某种次序排列  
③ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费  
3.Iterator的遍历过程：  
（1）创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。  
（2）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。  
（3）第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。

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

2.默认 Iterator接口

**Iterator 接口的目的， 就是为所有数据结构， 提供了一种统一的访问机制**， 即for...of循环（ 详见下文）。 当使用for...of循环遍历某种数据结构时，该循环会自动去寻找 Iterator 接口。

ES6 规定， **默认的 Iterator 接口部署在数据结构的Symbol.iterator属性**， 或者说， **一个数据结构只要具有Symbol.iterator属性， 就可以认为是“ 可遍历的”（ iterable）。 调用Symbol.iterator方法， 就会得到当前数据结构默认的遍历器生成函数。 Symbol.iterator本身是一个表达式， 返回 Symbol 对象的iterator属性， 这是一个预定义好的、 类型为 Symbol 的特殊值**， 所以要放在方括号内（ 请参考 Symbol 一章）。

在 ES6 中， 有三类数据结构原生具备 Iterator 接口： 数组、 某些类似数组的对象、 Set 和 Map 结构。可以覆盖原生的`Symbol.iterator`方法，达到修改遍历器行为的目的。

三.参考

1.【[探秘ES6】系列专栏（二）：迭代器和for-of循环][ES6_for-of]

2.[沅一峰 Iterator 和 for...of 循环][Iterator _ for...of]

[ES6_for-of]: https://www.csdn.net/article/2015-06-15/2824965-es6-in-depth-iterators-and-the-for-of-loop
[Iterator _ for...of]: http://es6.ruanyifeng.com/#docs/iterator