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
    }
}