JavaScript 數(shù)組遍歷

zhangke3016 發(fā)布于2019-08-21 10:56 / 1768人閱讀

摘要：缺陷是不能使用，但可以用來(lái)，適用于鏈?zhǔn)綀?chǎng)景，如，適用于全部元素的遍歷，缺陷是不知道迭代器，新特性，大家可以慢慢玩

原文鏈接

《JavaScript 數(shù)組遍歷》

參考

For-each over an array in JavaScript?
Why is "for(var item in list)" with arrays considered bad practice in JavaScript?
forEach and runtime cost

開(kāi)始遍歷

多種選擇：

for

for-in

forEach 以及相關(guān)的（ES5+）

for-of（ES6+）

使用迭代器（ES6+）

先聲明并初始化一個(gè)數(shù)組吧：let a = ["a", "b", "c"];

使用 for 循環(huán)

for (let i = a.length; i--; ) {
    console.log(a[i]);
}

使用 for-in （不推薦）

for (let i in a) {
    console.log(a[i]);
}

forEach 以及相關(guān)的

a.forEach((e, i, a) => console.log(`element:${e}, index:${i}, array:${a}`));

a.map(n => console.log(n));

使用 for-of

for (let val of a) {
    console.log(val);
}

使用迭代器

for (let entry, itr = a[Symbol.iterator](); !(entry = itr.next()).done; ) {
    console.log(entry.value);
}

比較上述遍歷方式

for 這是最常見(jiàn)的遍歷方式，瀏覽器都支持

for-in 不推薦，兩個(gè)原因：不能保證遍歷的順序是預(yù)期的；遍歷可能會(huì)帶出原型鏈上的屬性

forEach() 非常好用的遍歷方式，ES5+，如果擔(dān)心運(yùn)行時(shí)資源消耗的問(wèn)題，可以看看 forEach and runtime cost。缺陷是不能使用 break，但可以用 try-catch 來(lái) hack

map() ES5+，適用于“鏈?zhǔn)健眻?chǎng)景，如 a.map(i => i + i).sort();

for-of ES6+，適用于全部元素的遍歷，缺陷是不知道 index

迭代器，ES6 新特性，大家可以慢慢玩

EOF

GPU云服務(wù)器云服務(wù)器數(shù)組遍歷遍歷數(shù)組遍歷篩選數(shù)組遍歷二維數(shù)組

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

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

相關(guān)文章

JavaScript循環(huán)遍歷你會(huì)用哪些？

摘要：總結(jié)中的循環(huán)遍歷定義一個(gè)數(shù)組和對(duì)象經(jīng)常用來(lái)遍歷數(shù)組元素遍歷值為數(shù)組元素索引用來(lái)遍歷數(shù)組元素第一個(gè)參數(shù)為數(shù)組元素，第二個(gè)參數(shù)為數(shù)組元素索引，第三個(gè)參數(shù)為數(shù)組本身可選沒(méi)有返回值用來(lái)遍歷數(shù)組元素第一個(gè)參數(shù)為數(shù)組元素，第二個(gè)參數(shù)為數(shù)組元素索引，第三總結(jié)JavaScript中的循環(huán)遍歷定義一個(gè)數(shù)組和對(duì)象 const arr = [a, b, c, d, e, f]; const obj = ...

CHENGKANG 2019-08-23 12:10 評(píng)論0 收藏0
JavaScript遍歷對(duì)象和數(shù)組的方法總結(jié)

摘要：日常開(kāi)發(fā)中我們難免需要對(duì)數(shù)組和對(duì)象進(jìn)行遍歷，今天抽空來(lái)總結(jié)下遍歷數(shù)組和對(duì)象常用的方法。使用遍歷對(duì)象注只能遍歷出自身可枚舉的屬性，而不能遍歷出原型鏈上面的屬性。日常開(kāi)發(fā)中我們難免需要對(duì)數(shù)組和對(duì)象進(jìn)行遍歷，今天抽空來(lái)總結(jié)下遍歷數(shù)組和對(duì)象常用的方法。 Javascript遍歷數(shù)組總結(jié) 我們定義一個(gè)數(shù)組 var arr = [2,4,6]; 1.使用for循環(huán)遍歷 var lengt...

jiekechoo 2019-08-23 12:55 評(píng)論0 收藏0
JavaScript數(shù)組

摘要：與稀疏數(shù)組對(duì)立的為密集數(shù)組，密集數(shù)組的索引會(huì)被持續(xù)的創(chuàng)建，并且其元素的數(shù)量等于其長(zhǎng)度。創(chuàng)建一個(gè)長(zhǎng)度為的數(shù)組，并初始化了個(gè)元素使用構(gòu)造函數(shù)創(chuàng)建數(shù)組對(duì)象的時(shí)候，關(guān)鍵字是可以省略的。另外使用和刪除元素是影響數(shù)組的長(zhǎng)度的。說(shuō)明：本文只總結(jié)了JavaScript數(shù)組在web端的行為，不包括NodeJs端的行為。本文不涉及類(lèi)型化數(shù)組（TypedArray）的討論、總結(jié)。一、什么是數(shù)組數(shù)組的定...

HtmlCssJs 2019-08-23 10:23 評(píng)論0 收藏0
細(xì)說(shuō) Javascript 數(shù)組篇（一） : 數(shù)組的遍歷和 length 屬性

摘要：遍歷為了達(dá)到最佳性能來(lái)遍歷一個(gè)數(shù)組，最好的方式就是使用經(jīng)典的循環(huán)。盡管屬性是定義在數(shù)組本身的，但是在循環(huán)的每一次遍歷時(shí)仍然會(huì)有開(kāi)銷(xiāo)。給屬性賦值一個(gè)更小的數(shù)將會(huì)截?cái)鄶?shù)組，如果賦值一個(gè)更大的數(shù)則不會(huì)截?cái)鄶?shù)組。盡管數(shù)組在 Javascript 中是對(duì)象，但是不建議使用 for in 循環(huán)來(lái)遍歷數(shù)組，實(shí)際上，有很多理由來(lái)阻止我們對(duì)數(shù)組使用 for in 循環(huán)。因?yàn)?for in 循環(huán)將會(huì)枚...

TigerChain 2019-08-21 12:17 評(píng)論0 收藏0
JavaScript 中遍歷方法小結(jié)

摘要：遍歷方法小結(jié)常用的遍歷方法遍歷對(duì)數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)創(chuàng)建一個(gè)新數(shù)組，其結(jié)果是該數(shù)組中的每個(gè)元素都調(diào)用一個(gè)提供的函數(shù)后返回的結(jié)果遍歷大家都熟悉，所以重點(diǎn)講一下與的區(qū)別相同點(diǎn)回調(diào)函數(shù)參數(shù)相同，都自帶三個(gè)屬性均不會(huì)修改原數(shù)組第二參數(shù)的遍歷方法小結(jié) 常用的遍歷方法 for 遍歷 forEach（對(duì)數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)） map（創(chuàng)建一個(gè)新數(shù)組，其結(jié)果是該數(shù)組中的每個(gè)...

flyer_dev 2019-08-23 16:06 評(píng)論0 收藏0
JavaScript：遍歷

摘要：中可以實(shí)現(xiàn)遍歷的數(shù)據(jù)類(lèi)型主要是對(duì)象，其中包括普通對(duì)象與數(shù)組。遍歷器是一種接口，為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問(wèn)機(jī)制。實(shí)例五遍歷器對(duì)象實(shí)例五是的遍歷過(guò)程，通過(guò)手動(dòng)調(diào)用其對(duì)象的方法實(shí)現(xiàn)信息獲取。為每個(gè)數(shù)組元素執(zhí)行函數(shù)。前言 ??將依據(jù)自身痛點(diǎn)學(xué)習(xí)，計(jì)劃對(duì)原生JavaScript寫(xiě)一個(gè)系統(tǒng)，本文為第一篇，感興趣的同學(xué)可以關(guān)注個(gè)人公眾號(hào)：ZeroToOneMe，或者github博客，將持續(xù)...

ThinkSNS 2019-08-23 17:51 評(píng)論0 收藏0