關(guān)于JS循環(huán)遍歷

eternalshallow 發(fā)布于2019-08-21 11:38 / 1492人閱讀

摘要：關(guān)于循環(huán)遍歷寫下這篇文章的目的，主要是想總結(jié)一下關(guān)于對(duì)于集合對(duì)象遍歷的方式方法，以及在實(shí)際應(yīng)用場(chǎng)景中怎樣去使用它們。的作用主要是去遍歷對(duì)象的可枚舉屬性。例如索引，數(shù)值打印結(jié)果為當(dāng)?shù)诙?xiàng)不滿足條件式跳出循環(huán)，返回。

關(guān)于JS循環(huán)遍歷

寫下這篇文章的目的，主要是想總結(jié)一下關(guān)于JS對(duì)于集合對(duì)象遍歷的方式方法，以及在實(shí)際應(yīng)用場(chǎng)景中怎樣去使用它們。本文會(huì)主要介紹：while,for,forEach,every,some,filter,reduce,map,indexOf...

while/do while

while、do while主要的功能是，當(dāng)滿足while后邊所跟的條件時(shí)，來執(zhí)行相關(guān)業(yè)務(wù)。這兩個(gè)的區(qū)別是，while會(huì)先判斷是否滿足條件，然后再去執(zhí)行花括號(hào)里面的任務(wù)，而do while則是先執(zhí)行一次花括號(hào)中的任務(wù)，再去執(zhí)行while條件，判斷下次還是否再去執(zhí)行do里面的操作。也就是說 do while至少會(huì)執(zhí)行一次操作，生產(chǎn)中這個(gè)就可能用的比較少了，因?yàn)樗c接下來要講的for循環(huán)相比，個(gè)人覺得可讀性上差了一點(diǎn)。

while(條件){
執(zhí)行...
}
------------
do{
執(zhí)行...
}
while(條件)

for

for (語句 1; 語句 2; 語句 3)
  {
  被執(zhí)行的代碼塊
  }

語句 1 在循環(huán)（代碼塊）開始前執(zhí)行

語句 2 定義運(yùn)行循環(huán)（代碼塊）的條件

語句 3 在循環(huán)（代碼塊）已被執(zhí)行之后執(zhí)行

這個(gè)就不贅述了，也比較好理解，主要聊一下for...in/for...of這兩個(gè)東西。

for...in

for...in的作用主要是去遍歷對(duì)象的可枚舉屬性。即

 var foo = {
                name: "bar",
                sex: "male"
            }
            Object.defineProperty(foo, "age", { value : 18})
            for(var a in foo){
                console.log(`可枚舉屬性：${a}`)
            }
            console.log(`age屬性：${foo.age}`)

因?yàn)镺bject.defineProperty，建立的屬性，默認(rèn)不可枚舉，因此在瀏覽器中打印的結(jié)果為：

在JS當(dāng)中，數(shù)組也算作對(duì)象，但一般不推薦把for...in用在數(shù)組遍歷上面，如果for...in普通數(shù)組的話，a返回?cái)?shù)組的索引。

for...of

for...of是ES6新增的方法，主要作用是用來遍歷具有iterator接口的數(shù)據(jù)集合，除了ES5的Array，還有ES6新增的Map,Set等，但是for...of不能去遍歷普通的對(duì)象（普通對(duì)象不具備iterator接口），如果想去遍歷普通對(duì)象，可以使用generator函數(shù)去給普通對(duì)象先生成iterator接口。for...of的好處是可以使用break跳出循環(huán)。

every/some

返回一個(gè)布爾值。當(dāng)我們需要判定數(shù)組中的元素是否滿足某些條件時(shí)，可以使用every/some。這兩個(gè)的區(qū)別是，every會(huì)去判斷判斷數(shù)組中的每一項(xiàng)，而some則是當(dāng)某一項(xiàng)滿足條件時(shí)返回。例如：

let foo=[5,1,3,7,4].every(function (item,index) {
                console.log(`索引：${index}，數(shù)值：${item}`)
                return item>2
            })
            console.log(foo)

打印結(jié)果為：

當(dāng)?shù)诙?xiàng)不滿足條件式跳出循環(huán)，返回false。

let foo=[5,1,3,7,4].some(function (item,index) {
                console.log(`索引：${index}，數(shù)值：${item}`)
                return item>2
            })
            console.log(foo)

打印結(jié)果為：

當(dāng)數(shù)組的某項(xiàng)滿足條件時(shí)跳出循環(huán)，返回true.
在按照約定條件篩選數(shù)組時(shí)，every/some是非常方便的方法。

filter

篩選出一個(gè)滿足相關(guān)條件的新數(shù)組。

let foo=[5,1,3,7,4].filter(function (item,index) {
                console.log(`索引：${index}，數(shù)值：${item}`)
                return item>2
            })
            console.log(foo)

將滿足返回值條件的item組成一個(gè)新的數(shù)組。過濾器，顧名思義，比較好理解。在按照約定條件篩選數(shù)組元素時(shí)，filter比較方便。

map

let foo=[5,1,3,7,4].map(function (item,index) {
                console.log(`索引：${index}，數(shù)值：${item}`)
                return item+2
            })
            console.log(foo)

返回一個(gè)將每個(gè)元素進(jìn)行“二次加工”的新數(shù)組，map與filter都是返回一個(gè)新的數(shù)組，區(qū)別則是filter是將原數(shù)組，通過相關(guān)條件篩選出合法的item，來組成一個(gè)新的數(shù)組，而map則是將每個(gè)item通過再加工來返回一個(gè)新的數(shù)組。

reduce

將數(shù)組元素做“疊加”處理，返回一個(gè)值。

let foo=[5,1,3,7,4].reduce(function (pre,cur) {
                console.log(`索引：${pre}，數(shù)值：${cur}`)
                return pre+cur
            })
            console.log(foo)

打印結(jié)果為：

pre為累加值，cur為當(dāng)前值。reduce函數(shù)值得注意的是，reduce(fn,init)第二個(gè)參數(shù)，可以傳一個(gè)初始值，如果代碼改成這樣：

let foo=[5,1,3,7,4].reduce(function (pre,cur) {
                console.log(`索引：${pre}，數(shù)值：${cur}`)
                return pre+cur
            },"")
            console.log(foo)

則為：

indexOf

返回指定字符串首次出現(xiàn)的位置

 let foo=["57","17","37","7","4"].indexOf("7")
            console.log(foo)

這個(gè)函數(shù)比較常用的應(yīng)用場(chǎng)景是，在做if判斷時(shí)，可以代替||，&&等關(guān)系符。比如：

可以代替
if（value=="next"||value=="pre"）的這種寫法，當(dāng)判斷元素較多時(shí)，這種寫法比較劃算。

總結(jié)

個(gè)人非常喜歡filter/map/reduce，但是看到身邊的同學(xué)一言不合就foreach,替這三個(gè)函數(shù)心疼幾秒。。。不過低版本瀏覽器也確實(shí)不支持這些函數(shù)。。。根據(jù)自己需要去選擇合適的遍歷方式可以大大提升效率。哦耶

云服務(wù)器 GPU云服務(wù)器 js 循環(huán)遍歷json數(shù)據(jù) js循環(huán)遍歷json數(shù)據(jù) 循環(huán)遍歷字典 python遍歷循環(huán)

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

eternalshallow

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

如何提交百度新聞源?百度新聞源申請(qǐng)方法步驟

閱讀 1486·2021-09-28 09:44
程序員年紀(jì)大了以后都去了哪里

閱讀 2562·2021-09-28 09:36
NXP RT1064學(xué)習(xí)筆記（一）— 開發(fā)環(huán)境

閱讀 1249·2021-09-08 09:35
css總結(jié)

閱讀 2010·2019-08-29 13:50
如何使用Flexbox和CSS Grid，實(shí)現(xiàn)高效布局

閱讀 850·2019-08-29 13:29
史上前端面試最全問答（附答案）

閱讀 1164·2019-08-29 13:15
前端面試題2017（篇幅長(zhǎng)，附答案）

閱讀 1756·2019-08-29 13:00
巧用命令行工具UCloud CLI，輕量操作API管理云資源

閱讀 3033·2019-08-26 16:16

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

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

關(guān)于JS循環(huán)遍歷

相關(guān)文章

**jS:關(guān)于對(duì)象遍歷和數(shù)組遍歷的那些事**

**JS內(nèi)置對(duì)象-關(guān)于String字符串對(duì)象的2個(gè)小實(shí)驗(yàn)**

js遍歷之for forEach in of

**vue.js關(guān)于循環(huán)出來多個(gè)input并讓每個(gè)input后的修改按鈕控制其值**

JavaScript專題之jQuery通用遍歷方法each的實(shí)現(xiàn)

發(fā)表評(píng)論

0條評(píng)論

eternalshallow

男|高級(jí)講師

TA的文章

如何提交百度新聞源?百度新聞源申請(qǐng)方法步驟

程序員年紀(jì)大了以后都去了哪里

NXP RT1064學(xué)習(xí)筆記（一）— 開發(fā)環(huán)境

css總結(jié)

如何使用Flexbox和CSS Grid，實(shí)現(xiàn)高效布局

史上前端面試最全問答（附答案）

前端面試題2017（篇幅長(zhǎng)，附答案）

巧用命令行工具UCloud CLI，輕量操作API管理云資源

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

關(guān)于JS循環(huán)遍歷

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！