javascript中的for...in & for...of的使用

学习ES6之后，又学会了一种新的遍历方法。就是ES6中的for…of。

for in是遍历索引 key，是ES5标准。

for of是遍历元素值value，是S6标准。

在学习ES6之前，我一直使用for..in遍历对象以及数组。教程里说不建议用for…in循环数组，我一直不理解为什么。直到遇到了下面的例子：

Array.prototype.arrCustom = function(){};

let iterable = [1,2,3,4,5,6];
iterable.foo = ["hello"];
for(let i in iterable){
console.log(iterable[i]);//1,2,3,4,5,6,foo,ƒ (){}
}

使用for in 遍历数组，会存在几个问题:

1、index索引为字符串型数字，不能直接进行几何运算。

2、遍历顺序有可能不是按照实际数组的内部顺序。

3、使用for…in会遍历数组所有的可枚举属性，包括原型。所以上例的原型方法arrCustom和foo属性也会被打印。因此for in更适合遍历对象，最后不要使用for…in遍历数组。

当然除了使用for循环数组，ES6中的for of也是可以的。

Array.prototype.arrCustom = function(){};

let iterable = [1,2,3,4,5,6];
iterable.foo = ["hello"];
for(let i of iterable){
console.log(iterable[i]);//1,2,3,4,5,6
}

for in 遍历的事数组的索引，而for of遍历的是数组元素值。

for of 遍历的只是数组内的元素，而不包括数组的原型属性arrCustom和索引foo.

for in 可以遍历到对象的原型方法，如果不想遍历原型方法和属性的话，可以在循环内部判断一下，hasOwnProperty方法可以判断某属性是否是该对象的实例属性。

例如：

Object.prototype.method = function(){
console.log('method');
}

let myObj = {a: 'a',b: 'b',c: 'c'};
for(let i in myObj){
console.log(i);//a, b, c, method
}

for(let i in myObj){
if(myObj.hasOwnProperty(i)){
console.log(i); //a, b, c
}
}