js遍歷之for forEach in of

yeyan1996 發(fā)布于2019-08-20 17:38 / 495人閱讀

摘要：語(yǔ)法參數(shù)當(dāng)前遍歷項(xiàng)。遍歷的范圍在第一次調(diào)用前就會(huì)確定。已刪除的項(xiàng)不會(huì)被遍歷到。的是由提出的，目的是作為遍歷所有數(shù)據(jù)結(jié)構(gòu)的統(tǒng)一方法。不僅可以遍歷數(shù)組，還可以遍歷結(jié)構(gòu)，某些類似數(shù)組的對(duì)象如對(duì)象對(duì)象，對(duì)象，以及字符串。

即使是最簡(jiǎn)單的循環(huán)，其中也深藏學(xué)問

ECMAScript5(es5)有三種for循環(huán)

簡(jiǎn)單for

for in

forEach

ECMAScript6(es6)新增

for of

簡(jiǎn)單for

for是循環(huán)的基礎(chǔ)語(yǔ)法，也是最常用的循環(huán)結(jié)構(gòu)。沒有兼容性問題，效率上：for > forEach > map >for in

forEach

forEach由es5提出,屬于數(shù)組的迭代方法

概述： 方法讓數(shù)組的每一項(xiàng)都執(zhí)行一次給定的函數(shù)。

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

參數(shù)：

currentValue：當(dāng)前遍歷項(xiàng)。

index：當(dāng)前項(xiàng)目的下標(biāo)

array：當(dāng)前數(shù)組本身

thisArg：修改內(nèi)部值的指向。

特點(diǎn)：

forEach 方法為數(shù)組中含有有效值的每一項(xiàng)執(zhí)行一次 callback 函數(shù)，那些已刪除（使用 delete 方法等情況）或者從未賦值的項(xiàng)將被跳過（不包括那些值為 undefined 或 null 的項(xiàng)）。
forEach 遍歷的范圍在第一次調(diào)用 callback 前就會(huì)確定。調(diào)用forEach 后添加到數(shù)組中的項(xiàng)不會(huì)被 callback 訪問到。如果已經(jīng)存在的值被改變，則傳遞給 callback 的值是 forEach 遍歷到他們那一刻的值。已刪除的項(xiàng)不會(huì)被遍歷到。

優(yōu)點(diǎn)：

foreach會(huì)跳過數(shù)組中的空位
相對(duì)簡(jiǎn)單for來說更語(yǔ)義化

缺點(diǎn)：

不能中斷循環(huán),也不支持 continue 和 break，只能通過 return 來控制循環(huán)，但是不能退出循環(huán)本身。

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

for in

此循環(huán)有一個(gè)特殊的用途：可以枚舉任何對(duì)象的命名屬性。實(shí)際上它是為循環(huán)”enumerable“對(duì)象而設(shè)計(jì)的。

需要注意的是，for-in 循環(huán)遍歷的是對(duì)象的屬性，而不是數(shù)組的索引。由于對(duì)象的屬性沒有順序，for in循環(huán)輸出的輸出的屬性名也是不可預(yù)測(cè)的

性能:

由于每次迭代操作要搜索實(shí)例或原型屬性， for-in 循環(huán)的每次迭代都會(huì)產(chǎn)生更多開銷，因此執(zhí)行速度比其他循環(huán)類型慢。在同樣的循環(huán)迭代操作中，其它類型循環(huán)速度要比它快7倍之多。除非對(duì)數(shù)目不詳?shù)膶?duì)象屬性進(jìn)行操作，否則我們不推薦使用for in 循環(huán)。

Array 的真相

Array 在 Javascript 中是一個(gè)對(duì)象， Array 的索引是屬性名。事實(shí)上， Javascript 中的 “array” 有些誤導(dǎo)性， Javascript 中的 Array 并不像大部分其他語(yǔ)言的數(shù)組。首先， Javascript 中的 Array 在內(nèi)存上并不連續(xù)，其次， Array 的索引并不是指偏移量。實(shí)際上， Array 的索引也不是 Number 類型，而是 String 類型的。我們可以正確使用如 arr[0] 的寫法的原因是語(yǔ)言可以自動(dòng)將 Number 類型的 0 轉(zhuǎn)換成 String 類型的 "0" 。所以，在 Javascript 中從來就沒有 Array 的索引，而只有類似 "0" 、 "1" 等等的屬性。有趣的是，每個(gè) Array 對(duì)象都有一個(gè) length 的屬性，導(dǎo)致其表現(xiàn)地更像其他語(yǔ)言的數(shù)組。但為什么在遍歷 Array 對(duì)象的時(shí)候沒有輸出 length 這一條屬性呢？那是因?yàn)?for-in 只能遍歷“可枚舉的屬性”， length 屬于不可枚舉屬性，實(shí)際上， Array 對(duì)象還有許多其他不可枚舉的屬性。

es6的for of

for of是由es6提出的，目的是作為遍歷所有數(shù)據(jù)結(jié)構(gòu)的統(tǒng)一方法。

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

foreach是為便利數(shù)組而設(shè)計(jì)的，不能正確響應(yīng)break、continue和return語(yǔ)句

for in被設(shè)計(jì)用來枚舉對(duì)象的屬性的，遍歷對(duì)象的屬性

for in用在數(shù)組上，除了遍歷數(shù)組元素以外,還會(huì)遍歷自定義屬性，甚至原型鏈上的屬性，另外，遍歷順序是隨機(jī)的

那么for of 有什么不一樣呢？

特點(diǎn)：

語(yǔ)法同for in一樣簡(jiǎn)潔，但避開了for in的缺陷

能正確響應(yīng)break、continue和return語(yǔ)句

跟for in不一樣，數(shù)組的遍歷器接口只返回具有數(shù)字索引的屬性

for in讀取的是對(duì)象的鍵名，for of讀取的是鍵值

提供遍歷所有數(shù)據(jù)結(jié)構(gòu)的統(tǒng)一方法。for of不僅可以遍歷數(shù)組，還可以遍歷Set、Map結(jié)構(gòu)，某些類似數(shù)組的對(duì)象（如：argument對(duì)象、DOM NodeList對(duì)象），Generator對(duì)象，以及字符串。

如：
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接口的數(shù)據(jù)結(jié)構(gòu)，都可以使用for of循環(huán)遍歷它的成員。關(guān)于Iterator，如果還不清楚的可以先去了解一下，這里就不贅述了。這里需要注意一下，由于for of讀取的是鍵值，如果想通過for of獲取鍵名，可以借助數(shù)組實(shí)例的entries和keys方法。