成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

js遍歷之for forEach in of

yeyan1996 / 502人閱讀

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

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

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

簡單for

for in

forEach

ECMAScript6(es6)新增

for of

簡單for

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

forEach

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

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

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

參數(shù)：

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

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

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

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

特點：

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

優(yōu)點：

foreach會跳過數(shù)組中的空位
相對簡單for來說更語義化

缺點：

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

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

for in

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

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

性能:

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

Array 的真相

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

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

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

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

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

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

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

特點：

語法同for in一樣簡潔，但避開了for in的缺陷

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

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

for in讀取的是對象的鍵名，for of讀取的是鍵值

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83742.html

相關(guān)文章

  • js中的常見的循環(huán)迭代：for loop, forEach, for...in... for...

    摘要：下面就總結(jié)下中常見的幾種循環(huán)方法。因為循環(huán)將遍歷對象本身的所有可枚舉屬性，以及對象從其構(gòu)造函數(shù)原型中繼承的屬性。上也明確提示不應(yīng)該用于迭代一個，其中索引順序很重要。 引言 平時工作中循環(huán)的使用場景可以說是非常之多了，昨天改別人代碼時候有位同事非常喜歡用ES6等新特性，一個數(shù)組的遍歷全部都是用for...of...，然后業(yè)務(wù)需求要用到數(shù)組中的序號index值，就很尷尬了，我只能改回for...

    Leo_chen 評論0 收藏0

  • JavaScript30秒， 從入門到放棄之Array（六）

    摘要：從數(shù)組索引為開始刪除元素，直到對數(shù)組元素運用指定方法為為止。對兩個數(shù)組的元素分別調(diào)用指定方法后，返回以運行結(jié)果為判定基準(zhǔn)的并集，并集是原始數(shù)組元素的并集而不是運行結(jié)果的并集。 原文地址：JavaScript30秒， 從入門到放棄之Array（六）博客地址：JavaScript30秒， 從入門到放棄之Array（六） 水平有限，歡迎批評指正 tail Returns all elem...

    Freeman 評論0 收藏0

  • 給初學(xué)者：JavaScript 中數(shù)組操作注意點

    摘要：使用遍歷數(shù)組有三點問題遍歷順序不固定引擎不保證對象的遍歷順序。作為原生函數(shù)，和自身操作字符串的速度是很快的。由于沒有返回值返回，所以它的回調(diào)函數(shù)通常是包含副作用的，否則這個寫了毫無意義。接受一個回調(diào)函數(shù)，你可以提前，相當(dāng)于手寫循環(huán)中的。 不要用 for_in 遍歷數(shù)組 這是 JavaScript 初學(xué)者常見的誤區(qū)。for_in 用于遍歷對象中包括原型鏈上的所有可枚舉的（enumerab...

    tianyu 評論0 收藏0

  • JS中 map, filter, some, every, forEach, for in, for

    摘要：有返回值，返回一個符合條件的元素數(shù)組返回一個，判斷是否有元素符合條件，如果有一個元素符合條件，則循環(huán)會終止。返回一個遍歷器對象，用來遍歷鍵名鍵值組成的數(shù)組。這三個方法調(diào)用后生成的遍歷器對象，所遍歷的都是計算生成的數(shù)據(jù)結(jié)構(gòu)。 1.map 有返回值，返回一個新的數(shù)組，每個元素為調(diào)用func的結(jié)果。 let list = [1, 2, 3, 4, 5]; let other = list.m...

    yankeys 評論0 收藏0

  • JavaScript 的 4 種數(shù)組遍歷方法： for VS forEach() VS for/in

    摘要：對于，除非使用箭頭函數(shù)，它的回調(diào)函數(shù)的將會變化。使用測試下面的代碼，結(jié)果如下打印打印要點使用的規(guī)則要求所有回調(diào)函數(shù)必須使用箭頭函數(shù)。 譯者按： JS 騷操作。 原文：For vs forEach() vs for/in vs for/of in JavaScript 譯者: Fundebug 本文采用意譯，版權(quán)歸原作者所有 我們有多種方法來遍歷 JavaScript 的數(shù)組或者...

    joyqi 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<