關于JS循環遍歷

eternalshallow 發布于2019-08-21 11:38 / 1471人閱讀

摘要：關于循環遍歷寫下這篇文章的目的，主要是想總結一下關于對于集合對象遍歷的方式方法，以及在實際應用場景中怎樣去使用它們。的作用主要是去遍歷對象的可枚舉屬性。例如索引，數值打印結果為當第二項不滿足條件式跳出循環，返回。

關于JS循環遍歷

寫下這篇文章的目的，主要是想總結一下關于JS對于集合對象遍歷的方式方法，以及在實際應用場景中怎樣去使用它們。本文會主要介紹：while,for,forEach,every,some,filter,reduce,map,indexOf...

while/do while

while、do while主要的功能是，當滿足while后邊所跟的條件時，來執行相關業務。這兩個的區別是，while會先判斷是否滿足條件，然后再去執行花括號里面的任務，而do while則是先執行一次花括號中的任務，再去執行while條件，判斷下次還是否再去執行do里面的操作。也就是說 do while至少會執行一次操作，生產中這個就可能用的比較少了，因為他與接下來要講的for循環相比，個人覺得可讀性上差了一點。

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

for

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

語句 1 在循環（代碼塊）開始前執行

語句 2 定義運行循環（代碼塊）的條件

語句 3 在循環（代碼塊）已被執行之后執行

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

for...in

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

 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}`)

因為Object.defineProperty，建立的屬性，默認不可枚舉，因此在瀏覽器中打印的結果為：

在JS當中，數組也算作對象，但一般不推薦把for...in用在數組遍歷上面，如果for...in普通數組的話，a返回數組的索引。

for...of

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

every/some

返回一個布爾值。當我們需要判定數組中的元素是否滿足某些條件時，可以使用every/some。這兩個的區別是，every會去判斷判斷數組中的每一項，而some則是當某一項滿足條件時返回。例如：

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

打印結果為：

當第二項不滿足條件式跳出循環，返回false。

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

打印結果為：

當數組的某項滿足條件時跳出循環，返回true.
在按照約定條件篩選數組時，every/some是非常方便的方法。

filter

篩選出一個滿足相關條件的新數組。

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

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

map

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

返回一個將每個元素進行“二次加工”的新數組，map與filter都是返回一個新的數組，區別則是filter是將原數組，通過相關條件篩選出合法的item，來組成一個新的數組，而map則是將每個item通過再加工來返回一個新的數組。

reduce

將數組元素做“疊加”處理，返回一個值。

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

打印結果為：

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

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

則為：

indexOf

返回指定字符串首次出現的位置

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

這個函數比較常用的應用場景是，在做if判斷時，可以代替||，&&等關系符。比如：

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

總結

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

云服務器 GPU云服務器 js 循環遍歷json數據 js循環遍歷json數據循環遍歷字典 python遍歷循環

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86963.html

jS:關于對象遍歷和數組遍歷的那些事

摘要：如圖遍歷數組遍歷數組元素并以某種方式處理每個元素是一個常見的操作。如圖不過，里的功能比較強大，可以遍歷而且返回值是的則被省略掉總結遍歷對象，遍歷出來的是鍵名，而不是鍵值，參數必須是對象。可能是由于職業的關系，下班之后完全不想Open PC，但很多知識點有必要自己做個小小總結。本人之前對原生Array和Object完全沒概念。遍歷對象的方法： Object.keys(Object)...

qingshanli1988 2019-08-20 18:16 評論0 收藏0
JS內置對象-關于String字符串對象的2個小實驗

摘要：希望索引值之間用隔開，而最后的索引值后面無。優化代碼這個判斷用于防止最后一個索引值后面還有結果查看其實用來跳出循環一直覺得不太規范。。。小實驗是顯示次數其實就是那個索引值啦，這次顯示的是字符哦涉及到字符，就要用到方法。第一篇技術文章寫些簡單點的~在大三上web前端開發課程時，雖然能用JavaScript制作一些簡單的頁面動態效果，但其實很多JS知識并未掌握，所以自己又通過視頻再復習一...

Imfan 2019-08-22 10:43 評論0 收藏0
js遍歷之for forEach in of

摘要：語法參數當前遍歷項。遍歷的范圍在第一次調用前就會確定。已刪除的項不會被遍歷到。的是由提出的，目的是作為遍歷所有數據結構的統一方法。不僅可以遍歷數組，還可以遍歷結構，某些類似數組的對象如對象對象，對象，以及字符串。即使是最簡單的循環，其中也深藏學問 ECMAScript5(es5)有三種for循環簡單for for in forEach ECMAScript6(es6)新增 fo...

yeyan1996 2019-08-20 17:38 評論0 收藏0
vue.js關于循環出來多個input并讓每個input后的修改按鈕控制其值

摘要：從后端返回的數據中，有時候你會遇到一堆的，然后每個后面都跟有一個按鈕，就像這種情況其中有兩個問題，在一個框里面輸入值，然后所有的值都都會顯示你輸入的結果每個輸入框點擊能控制所有的而不只是它前面的那一個其實解決也不復雜，主要是運用到了循環以及從后端返回的數據中，有時候你會遇到一堆的input，然后每個input后面都跟有一個按鈕，就像這種情況showImg(https://segmen...

xiangchaobin 2019-08-22 11:16 評論0 收藏0
JavaScript專題之jQuery通用遍歷方法each的實現

摘要：語法為回調函數擁有兩個參數第一個為對象的成員或數組的索引，第二個為對應變量或內容。但是對于的函數，如果需要退出循環可使回調函數返回，其它返回值將被忽略。 JavaScript 專題系列第十一篇，講解 jQuery 通用遍歷方法 each 的實現 each介紹 jQuery 的 each 方法，作為一個通用遍歷方法，可用于遍歷對象和數組。語法為： jQuery.each(object,...

blankyao 2019-08-20 18:30 評論0 收藏0