JavaScript中遍歷的十種方法總結(jié)
1.while循環(huán)
while后面跟循環(huán)條件和執(zhí)行語句,只要滿足條件,就會(huì)一直執(zhí)行里面的執(zhí)行
var i = 0 while(i<10){ console.log(i) i++ }
2.do...while循環(huán)
與while相似,但是他會(huì)先執(zhí)行一次,再做判斷條件
var i=0 do{ console,log(i) i++ }while(i<10)
3.for循環(huán)
var arr = [0,1,2,3] for(let i = 0;i < arr.length;i++){ console.log(i) }
4.forEach循環(huán)
var arr = [0,1,2,3] arr.forEach((item,index)=>{ console.log(`下標(biāo)${index}的數(shù)為${item}`) })
5.for...in循環(huán)
一般用來遍歷對(duì)象的屬性,遍歷數(shù)組的話拿到的是下標(biāo)
var obj = {name:'snail',age:18} for(var key in obj){ console.log(key) }
6.for...of循環(huán)
可以遍歷拿到每一個(gè)元素
var str = 'snail' for(var item of str){ console.log(item) }
7.map映射
map方法將數(shù)組的所有成員依次傳入?yún)?shù)函數(shù),然后把每一次的執(zhí)行結(jié)果組成一個(gè)新數(shù)組返回。
該函數(shù)調(diào)用時(shí),map方法向它傳入三個(gè)參數(shù):當(dāng)前成員、當(dāng)前位置和數(shù)組本身。
注意:是返回一個(gè)新數(shù)組,而不會(huì)改變?cè)瓟?shù)組。
var arr = [0,1,2,3] arr.map((item)=>{ return item*2 })
8.filter()過濾循環(huán)
filter方法用于過濾數(shù)組成員,滿足條件的成員組成一個(gè)新數(shù)組返回。
它的參數(shù)是一個(gè)函數(shù),所有數(shù)組成員依次執(zhí)行該函數(shù),返回結(jié)果為true的成員組成一個(gè)新數(shù)組返回。該方法不會(huì)改變?cè)瓟?shù)組。
var arr = [0,4,2,3,5] arr.filter((item)=>{ return (item>3) })
9.some(),every()遍歷
統(tǒng)計(jì)數(shù)組是否滿足某個(gè)條件,這兩個(gè)方法返回一個(gè)布爾值,表示判斷數(shù)組成員是否符合某種條件。
它們接受一個(gè)函數(shù)作為參數(shù),所有數(shù)組成員依次執(zhí)行該函數(shù)。該函數(shù)接受三個(gè)參數(shù):當(dāng)前成員、當(dāng)前位置和整個(gè)數(shù)組,然后返回一個(gè)布爾值。
some方法是只要一個(gè)成員的返回值是true,則整個(gè)some方法的返回值就是true,否則返回false。
every方法則相反,所有成員的返回值都是true,整個(gè)every方法才返回true,否則返回false。兩相比較,some()只要有一個(gè)是true,便返回true;而every()只要有一個(gè)是false,便返回false.
這兩個(gè)方法在實(shí)際開發(fā)中,大有可用之處。比如在判定用戶是否勾選了不可操作的數(shù)據(jù),或者是否勾選了一條可以操作的數(shù)據(jù)可以使用這兩個(gè)方法遍歷循環(huán)數(shù)組。
10.reduce()遍歷
reduce方法第一個(gè)參數(shù)是一個(gè)函數(shù)。該函數(shù)接受以下四個(gè)參數(shù)。
1.Accumulator(累計(jì)器)
2.Current Value(當(dāng)前值)
3.Current Index(當(dāng)前索引)
4.Source Array(源數(shù)組)
函數(shù)的返回值分配給累計(jì)器,該返回值在數(shù)組的每個(gè)迭代中被記住,并最后成為最終的單個(gè)結(jié)果值。
這四個(gè)參數(shù)之中,只有前兩個(gè)是必須的,后兩個(gè)則是可選的。
到此這篇關(guān)于JavaScript中遍歷的十種方法的文章就介紹到這了,更多相關(guān)JavaScript遍歷方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
淺析ThreeJs中如何實(shí)現(xiàn)動(dòng)畫效果
在 ThreeJs 中,動(dòng)畫是創(chuàng)建動(dòng)態(tài) 3D 場(chǎng)景的重要組成部分,本文將介紹如何使用 ThreeJs 實(shí)現(xiàn)基礎(chǔ)的動(dòng)畫效果,需要的小伙伴可以參考一下2024-10-10javascript延時(shí)加載之defer測(cè)試
偶爾發(fā)現(xiàn) js 中有個(gè)延時(shí)加載的標(biāo)簽 defer,還在疑惑這么好用的東西為什么沒有流行起來,本人今天把它拾起來用了一下,發(fā)現(xiàn)只在ie7,8,9和360安全濟(jì)覽器下可以,知道為什么不用它了吧2012-12-12基于JavaScript實(shí)現(xiàn)微信搶紅包功能
本文通過實(shí)例代碼給大家介紹了基于JavaScript實(shí)現(xiàn)微信搶紅包功能,金額隨機(jī),額度在0.01和(剩余平均值*2)之間,具體的實(shí)例代碼大家參考下本文2017-07-07完美解決input[type=number]無法顯示非數(shù)字字符的問題
下面小編就為大家?guī)硪黄昝澜鉀Qinput[type=number]無法顯示非數(shù)字字符的問題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02js插件實(shí)現(xiàn)圖片滑動(dòng)驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了js插件實(shí)現(xiàn)圖片滑動(dòng)驗(yàn)證碼,滑動(dòng)模塊,實(shí)現(xiàn)驗(yàn)證功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10cocos2dx+lua實(shí)現(xiàn)橡皮擦功能
這篇文章主要為大家詳細(xì)介紹了cocos2dx+lua實(shí)現(xiàn)橡皮擦功能,類似刮刮樂效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12