关于for...in和for...of的思考：遍历类数组的集合可以用强大的for...of，对象还是乖乖的用for...in

数据集合进行遍历，Array/Object/以及ES6新属性Map/Set，甚至String类型都是可遍历的。

笨方法一：

for(var index=0;index

笨方法二

$.each(arr,function(index,value){
   console.log("索引"+index+"值"+value)
})

笨方法三:语法虽然简单了点，但是不能用break语句跳出循环且不能再这个封闭的函数内ruturn语句

arr.forEach(function(value){
       console.log(value)
})

如果使用for...in呢,但是会产生几点问题：

for(var index in arr){
    console.log(myArray[index])
}

1.数组的索引值index是String类型“0”“1”“”2“”等等，而不是Number类型，当你进行算术运算时（“2”+1=21），这就不是我们想要的结果了。所以运算前需要转换类型，这很不方便

2.循环体不仅会遍历数组的元素，甚至连expando属性也遍历出来了。举个例子，如果你的myArray数组中有一个叫做name属性，遍历时就将index=="name"也遍历出来，这样就多了一次执行。这些属性在数组的原型链上是可直接访问到的（会访问到原型链的属性）

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
alert(x); // '0', '1', '2', 'name'
}

3、最让人无语的是，在某些情况下，这段代码在遍历数组元素时顺序是任意的。

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

 

 

为了解决这个问题，ES6提出了for...of方法

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
alert(x); // 'A', 'B', 'C'
}

第一眼看可能在构建上与for...in并无太大的区别，但是却有这几点好处：
1.简洁直接

2.避免了for-in所有缺陷

3.与forEach()不一样，它支持break,continue和return

 

 

 

for-in 循环用于遍历对象

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

 

当然，for...of可不只是遍历数组而设计的，基本上所有的类数组集合都能适用当然（最好不要是对象）

var a = ['A', 'B', 'C'];
var s = new Set(a);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
a.name='123';
for (var x of a) { // 遍历Array
console.log(x);//A,B,C
}
for (var x of s) { // 遍历Set
console.log(x);//A,B,C
}
for (var x of m) { // 遍历Map
console.log(x[0] + '=' + x[1]);//1=x,2=y,3=z
}
for(var x of 'abc'){//遍历String
console.log(x);//a,b,c
}

总结，遍历类数组的集合可以用强大的for...of，对象还是乖乖的用for...in吧。

感谢分享https://www.cnblogs.com/polk-blogs/p/7469868.html0