1 遍歷陣列通常用for迴圈

ES5的話也可以使用forEach，ES5具有遍歷陣列功能的還有map、filter、some、every、reduce、reduceRight等，只不過他們的返回結果不一樣。但是使用foreach遍歷陣列的話，使用break不能中斷迴圈，使用return也不能返回到外層函式。

Array.prototype.method=function(){
　　console.log(this.length);
}
var myArray=[1,2,4,5,6,7]
myArray.name="陣列"
for (var index in myArray) {
  console.log(myArray[index]);
}
 

2 for in遍歷陣列的毛病

1.index索引為字串型數字，不能直接進行幾何運算
2.遍歷順序有可能不是按照實際陣列的內部順序
3.使用for in會遍歷陣列所有的可列舉屬性，包括原型。例如上慄的原型方法method和name屬性
所以for in更適合遍歷物件，不要使用for in遍歷陣列。

那麼除了使用for迴圈，如何更簡單的正確的遍歷陣列達到我們的期望呢（即不遍歷method和name），ES6中的for of更勝一籌.

Array.prototype.method=function(){
　　console.log(this.length);
}
var myArray=[1,2,4,5,6,7]
myArray.name="陣列";
for (var value of myArray) {
  console.log(value);
}
 

記住，for in遍歷的是陣列的索引（即鍵名），而for of遍歷的是陣列元素值。

for of遍歷的只是陣列內的元素，而不包括陣列的原型屬性method和索引name

3 遍歷物件

遍歷物件 通常用for in來遍歷物件的鍵名

Object.prototype.method=function(){
　　console.log(this);
}
var myObject={
　　a:1,
　　b:2,
　　c:3
}
for (var key in myObject) {
  console.log(key);
}

for in 可以遍歷到myObject的原型方法method,如果不想遍歷原型方法和屬性的話，可以在迴圈內部判斷一下,hasOwnPropery方法可以判斷某屬性是否是該物件的例項屬性

for (var key in myObject) {
　　if（myObject.hasOwnProperty(key)){
　　　　console.log(key);
　　}
}

同樣可以通過ES5的Object.keys(myObject)獲取物件的例項屬性組成的陣列，不包括原型方法和屬性

Object.prototype.method=function(){
　　console.log(this);
}
var myObject={
　　a:1,
　　b:2,
　　c:3
}

總結

• for..of適用遍歷數/陣列物件/字串/map/set等擁有迭代器物件的集合.但是不能遍歷物件,因為沒有迭代器物件.與forEach()不同的是，它可以正確響應break、continue和return語句
• for-of迴圈不支援普通物件，但如果你想迭代一個物件的屬性，你可以用for-in迴圈（這也是它的本職工作）或內建的Object.keys()方法：

for (var key of Object.keys(someObject)) {
  console.log(key + ": " + someObject[key]);
}

• 遍歷map物件時適合用解構,例如;

for (var [key, value] of phoneBookMap) {
   console.log(key + "'s phone number is: " + value);
}

• 當你為物件新增myObject.toString()方法後，就可以將物件轉化為字串，同樣地，當你向任意物件新增myObjectSymbol.iterator方法，就可以遍歷這個物件了。
  舉個例子，假設你正在使用jQuery，儘管你非常鍾情於裡面的.each()方法，但你還是想讓jQuery物件也支援for-of迴圈，你可以這樣做：

jQuery.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

所有擁有Symbol.iterator的物件被稱為可迭代的。在接下來的文章中你會發現，可迭代物件的概念幾乎貫穿於整門語言之中，不僅是for-of迴圈，還有Map和Set建構函式、解構賦值，以及新的展開操作符。

• for...of的步驟
  or-of迴圈首先呼叫集合的Symbol.iterator方法，緊接著返回一個新的迭代器物件。迭代器物件可以是任意具有.next()方法的物件；for-of迴圈將重複呼叫這個方法，每次迴圈呼叫一次。舉個例子，這段程式碼是我能想出來的最簡單的迭代器：

var zeroesForeverIterator = {
 [Symbol.iterator]: function () {
   return this;
  },
  next: function () {
  return {done: false, value: 0};
 }
};

作者：Haiya_32ef
連結：https://www.jianshu.com/p/c43f418d6bf0
來源：簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。