for-in和for-of的区别

简介

for…in ,是在ES5中提出的，用于遍历对象中所有的键值;for…of则是ES6中提出，是可以遍历所有数据结构的统一方法。

for…in

for-in 语句是一种精准迭代的语句，可以用于枚举对象中的属性。

主要的缺点：

• 在对数组进行遍历时，数组的键名是数字，但在for-in语句中是以字符串作为键值的，如‘0’、‘1’、‘2’.
• for-in会遍历对象中的所有键值，如在数组中手动添加的其他键值。
• 对于for-in 中遍历的顺序是不一定的。

总之对于for-in 语句来说，最好是用来遍历对象，而不是数组。

for…of

一个数据结构只要部署了Symbol.iterator 属性，就被视为具有iterator接口，就可以通过for-of遍历它的成员。原生具有Iterator接口的数据类型如下

• Array
• Map
• Set
• String
• TypeArray
• 函数中的argument对象
• NodeList对象

数组

数组原生就具备iterator接口，可以直接使用for-of语句。

var arr = ['a','b','c'];
for(let a of arr){
    console.log(a);  // a b c
}

for(let a in arr){
    console.log(a);  // '0' '1' '2'
}

在上述例子中，在对数组进行遍历时，for-of 读取的是键值，for-in 读取的是键名。

for-of也可以读取数组的键名，如：

var arr = ['a','b','c'];
for(let a of arr.keys()){
    console.log(a);  // 0 1 2
}

而且与for-in读取键名不同的地方在于，for-of 只会读取数组中具有数字索引的键名，而 for-in 会读取数组中的除数字索引以外的键名，如：

var arr = ['a','b','c'];
arr.foo = 'hello';
for(let a of arr.keys()){
    console.log(a);  // 0 1 2
}

for(let a in arr){
    console.log(a);  // '0' '1' '2' 'foo' 
}

Set 和Map

Set 和 Map结构中原生就具有Iterator接口，可以直接使用for-of进行遍历。

var engines = new Set(["a", "b", "c"]);
for(const item of engines){
    console.log(item);   
}
 //  a 
 //  b
 //  c
 
var map = new Map();
map.set("key1",1);
map.set("key2",2);
map.set("key3",3);
for(const [key, value] of map){
    console.log(key + ": "+ value);  
}
// key1: 1
// key2: 2
// key3: 3

在遍历过程中，遍历的顺序是按照各个成员被添加就数据结构的顺序。在遍历Set时，返回的是一个值，而Map则是返回一个数组

类数组对象

类数组对象:只包含使用从零开始，且自然递增的整数做键名，并且定义了length表示元素个数的对象，我们就认为他是类数组对象！
如：字符串、DOM NodeList对象、argument对象。可以使用for-of进行遍历，再对字符串遍历时，是依次读取每一个字符。

对象

对于普通的对象，for-of是不能直接使用的，但for-in是可以适用于对象的遍历。
可以通过Objec.keys方法生成对象的键值数组，然后通过遍历这个数组，实现对对象的遍历。如：

for(const key of Object.key(obj)){
    ...
}

还有一种方法是通过Generator函数将对象重新包装一下。

for(const [key, value] of entries(obj)){
    ...
}

参考：

ES6标准入门
类数组对象解析