04 ”Episode fxxkit “—.—JS遍历for..in/of Iterator

本节探究遍历方法for..in 和for..of区别。

一、for..in和for..of循环遍历的区别

var a = ['A','B','C'];
a.wave='Hello';
for(var x in a) { 
    alert(x);// '0', '1', '2', 'wave'  这里注意是wave
}
alert(a,length);//这里返回的是3
for (var y of a ){
    alert(y); // A B C
}

简单的说：for..in只能获得对象的键名，不能获得键值，而for..of可以获得键值。需要注意的是，for..of 其实循环调用遍历器接口，数组的遍历器接口只返回具有数字索引的属性（一种理解是只循环遍历原数组）。

另外，数组的键名是数字。

基于ES6引进Map和Set，下面简单介绍Map和Set方法。

二、Map

是成员是对象。（联想记忆key和value）

var m= new map[['mike',90],['lily',88],['bob',89]]; m.get('mike'); //90
var m =new Map();//空Map
m.set('Adam',67);// 添加新的key-value
m.set('Bob',59);
m.has('Adam');// 是否存在key 'Adam': true
m.get('Adam');// 67
m.delete('Adam');//删除key 'Adam'
m.get('Adam');// undefined

三、Set

Set是key的集合，不存储value，重复的key将会直接过滤删除。另外，Set没有索引。
通过add（key）方法添加 元素到Set中。delete（key）方法删除元素

var s = new Set([1,2,3]);
s; //Set {1,2,3}
s.delete(3);
s; //Set {1,2}
s.add(5);
s;//Set{1,2,5}
s.add(5);
s;// Set{1,2,5}

四、Iterator

现在有对象、数组、Map、Set四种数据集合，需要一种统一的接口机制，处理不同的数据结构——Iterator。

Iterator主要有三个功能：
1.提供接口。
2.使数据结构成员可以按某种次序排列。
3.主要供for..of使用。

Iterator遍历其实是指针机制，调用指针对象的next方法，返回包含value(当前成员的值)和done（布尔值）两个属性的对象。在ES6中，对象没有Iterator接口，数组、某些类似数组的对象（字符串、DOM NodeList对象、arguments对象）、Set和Map结构原生具备Iterator接口。

五、for.. of 进行遍历

var a = ['A','B', 'C'];  
var s =new Set(['A','B', 'C']);  
var m =new Map([[1,'x'], [2,'y'], [3,'z']]);  
for (var x of a) {// 遍历Array  
    alert(x);  
}  
for (var x of s) {// 遍历Set  
    alert(x);  
}  
for (var x of m) {// 遍历Map  
    alert(x[0] +'=' + x[1]);  
}  

可以看出对Set的遍历返回的是一个值，而Map是返回一个数组，由Map的键名和键值组成。

六、forEach

更便捷的是使用iterable中的forEach方法进行遍历，下面是Array的遍历

var a = ['A','B','C'];
a.forEach(function(element,index,array) {
// element: 指向当前元素的值
// index: 指向当前索引
// array: 指向Array对象本身
    alert(element); // 依次显示 A B C
    alert(index); // 依次显示 0 1 2
    alert(array); // 每次显示ABC 重复三次
});

Set没有索引：

var s =new Set(['A','B','C']);
s.forEach(function(element,sameElement, set) {
    alert(element);
});

Map依次的是value,key ,map

var m =new
Map([[1,'x'], [2,'y'],[3,'z']]);m.
m.forEach(function(value, key, map) {
    alert(value);
    alert(m);//显示的是[object Map]alert(map);//显示的是[object Map]
    alert(Map);// 显示的是function Map(){[native code]} ???
    alert(map);//显示的是[object Map]
    alert(Map);// 显示的是function Map(){[native code]} **???没搞懂**
});

简写可以如下：

var a = ['A','B','C'];
a.forEach(function(element)
{
    alert(element);
});

七、总结

1.for..in只能获得对象的键名，for..of可以获得键值。
2.for..of只返回具有索引的属性。
3.Map,Set是原生具有遍历器接口的，直接可以用for..of遍历。
4.for..of对Set的遍历返回的是一个值，而Map是返回一个数组，由Map的键名和键值组成。
5,for..in循环的缺点：
I）数组的键名是数字，但是for…in循环是以字符串作为键名“0”、“1”、“2”等等。
II）for…in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
III）某些情况下，for…in循环会以任意顺序遍历键名。

总之，for..in循环主要是为遍历对象而设计，不适用于遍历数组。

八、补充

1.for..in进行遍历的时候，列举对象的显示成员（自定义成员），没有输出obj的toString，valueOf等内置属性（或称内置成员，隐藏属性和预定义属性）。如下例中并没有输出jason，而是输出了name和getName

var obj = { 
    name:"jason",
    getName:function(){return this.name}
};
for(var a in obj) {
    alert(a);
}//输出name,getName

2.for..of可以与break continue和return配合适用。如：

for (var n of arr) {
  if (n > 100)
  break;
  console(n);
}  // 输出小于100的数