js遍歷之for forEach in of

即便是最簡單的循環，其中也深藏學問

ECMAScript5(es5)有三種for循環

• 簡單for
• for in
• forEach

ECMAScript6(es6)新增

• for of

簡單for

for是循環的基礎語法，也是最經常使用的循環結構。沒有兼容性問題，效率上：for > forEach > map >for in

forEach

forEach由es5提出,屬於數組的迭代方法

概述： 方法讓數組的每一項都執行一次給定的函數。

語法： array.forEach(callback[currentValue,index,array,thisArg]);

參數：

• currentValue：當前遍歷項。
• index：當前項目的下標
• array：當前數組自己
• thisArg：修改內部值的指向。

特色：

forEach 方法爲數組中含有有效值的每一項執行一次 callback 函數，那些已刪除（使用 delete 方法等狀況）或者從未賦值的項將被跳過（不包括那些值爲 undefined 或 null 的項）。
forEach 遍歷的範圍在第一次調用 callback 前就會肯定。調用forEach 後添加到數組中的項不會被 callback 訪問到。若是已經存在的值被改變，則傳遞給 callback 的值是 forEach 遍歷到他們那一刻的值。已刪除的項不會被遍歷到。

優勢：

foreach會跳過數組中的空位
相對簡單for來講更語義化

缺點：

不能中斷循環,也不支持 continue 和 break，只能經過 return 來控制循環，可是不能退出循環自己。

兼容性： 只支持IE9及以上
性能： forEach 的速度不如 for

for in

此循環有一個特殊的用途：能夠枚舉任何對象的命名屬性。實際上它是爲循環」enumerable「對象而設計的。

須要注意的是，for-in 循環遍歷的是對象的屬性，而不是數組的索引。因爲對象的屬性沒有順序，for in循環輸出的輸出的屬性名也是不可預測的

性能:

因爲每次迭代操做要搜索實例或原型屬性， for-in 循環的每次迭代都會產生更多開銷，所以執行速度比其餘循環類型慢。在一樣的循環迭代操做中，其它類型循環速度要比它快7倍之多。除非對數目不詳的對象屬性進行操做，不然咱們不推薦使用for in 循環。

Array 的真相

Array 在 Javascript 中是一個對象， Array 的索引是屬性名。事實上， Javascript 中的 「array」 有些誤導性， Javascript 中的 Array 並不像大部分其餘語言的數組。首先， Javascript 中的 Array 在內存上並不連續，其次， Array 的索引並非指偏移量。實際上， Array 的索引也不是 Number 類型，而是 String 類型的。咱們能夠正確使用如 arr[0] 的寫法的緣由是語言能夠自動將 Number 類型的 0 轉換成 String 類型的 "0" 。因此，在 Javascript 中歷來就沒有 Array 的索引，而只有相似 "0" 、 "1" 等等的屬性。有趣的是，每一個 Array 對象都有一個 length 的屬性，致使其表現地更像其餘語言的數組。但爲何在遍歷 Array 對象的時候沒有輸出 length 這一條屬性呢？那是由於 for-in 只能遍歷「可枚舉的屬性」， length 屬於不可枚舉屬性，實際上， Array 對象還有許多其餘不可枚舉的屬性。

es6的for of

for of是由es6提出的，目的是做爲遍歷全部數據結構的統一方法。

咱們先來回顧一下此前js的遍歷方法：

• foreach是爲便利數組而設計的，不能正確響應break、continue和return語句
• for in被設計用來枚舉對象的屬性的，遍歷對象的屬性
• for in用在數組上，除了遍歷數組元素之外,還會遍歷自定義屬性，甚至原型鏈上的屬性，另外，遍歷順序是隨機的

那麼for of 有什麼不同呢？

特色：

• 語法同for in同樣簡潔，但避開了for in的缺陷
• 能正確響應break、continue和return語句
• 跟for in不同，數組的遍歷器接口只返回具備數字索引的屬性
• for in讀取的是對象的鍵名，for of讀取的是鍵值
• 提供遍歷全部數據結構的統一方法。for of不只能夠遍歷數組，還能夠遍歷Set、Map結構，某些相似數組的對象（如：argument對象、DOM NodeList對象），Generator對象，以及字符串。

如：
let arr = ['a' ,'b', 'c', 'd'];
let itr = arr[Symbol.iterator];

arr.forEach(function(val, index, arr){
    console.log(val); // a b c d
    console.log(index); // 0 1 2 3
});

for(let i of itr){
    console.log(i);  // a b c d
}

for(let i of arr){
    console.log(i);  // a b c d
}

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

只要具備Iterator接口的數據結構，均可以使用for of循環遍歷它的成員。關於Iterator，若是還不清楚的能夠先去了解一下，這裏就不贅述了。這裏須要注意一下，因爲for of讀取的是鍵值，若是想經過for of獲取鍵名，能夠藉助數組實例的entries和keys方法。