js遍歷終極大法--再也不用苦逼的for迴圈了

zy簡單男孩發表於2021-08-11
JS

while迴圈

while後面跟迴圈條件和執行語句，只要滿足條件，就會一直執行裡面的執行

var i = 0
while(i<10){
 console.log(i)
 i++ 
}

do...while迴圈

與while相似，但是他會先執行一次，再做判斷條件

var i=0
do{
 console,log(i)
 i++
}while(i<10)

苦逼for迴圈

這個不用解釋吧

var arr = [0,1,2,3]
arr.forEach((item,index)=>{
 console.log(`下標${index}的數為${item}`)
})

for...in迴圈

一般用來遍歷物件的屬性，遍歷陣列的話拿到的是下標

var obj = {name:'snail',age:18}
for(var key in obj){
 console.log(key)
}

for...of迴圈

相對可以，直接拿到遍歷值

var str = 'snail'
for(var item of str){
 console.log(item)
}

Jquery的遍歷大法

1、選擇器+遍歷

$('div').each(function (i){

   i就是索引值

   this 表示獲取遍歷每一個dom物件

});

2、選擇器+遍歷

$('div').each(function (index,domEle){

   index就是索引值

  domEle 表示獲取遍歷每一個dom物件

});

3、更適用的遍歷方法

1）先獲取某個集合物件

2）遍歷集合物件的每一個元素

var d=$("div");

$.each(d,function (index,domEle){

  d是要遍歷的集合

  index就是索引值

  domEle 表示獲取遍歷每一個dom對

});

高階推薦 函式程式設計

map遍歷大法

map方法將陣列的所有成員依次傳入引數函式，然後把每一次的執行結果組成一個新陣列返回。

該函式呼叫時，map方法向它傳入三個引數：當前成員、當前位置和陣列本身。

注意：是返回一個新陣列，而不會改變原陣列。

var arr = [0,1,2,3]
arr.map((item)=>{
 return item*2
})

filter()過濾迴圈

顧名思義就是過濾掉不要的資料

filter方法用於過濾陣列成員，滿足條件的成員組成一個新陣列返回。

它的引數是一個函式，所有陣列成員依次執行該函式，返回結果為true的成員組成一個新陣列返回。該方法不會改變原陣列。

var arr = [0,4,2,3,5]
arr.filter((item)=>{
 return (item>3)
})

some(),every()遍歷

統計陣列是否滿足某個條件，這兩個方法返回一個布林值，表示判斷陣列成員是否符合某種條件。

它們接受一個函式作為引數，所有陣列成員依次執行該函式。該函式接受三個引數：當前成員、當前位置和整個陣列，然後返回一個布林值。

some方法是隻要一個成員的返回值是true，則整個some方法的返回值就是true，否則返回false。

every方法則相反，所有成員的返回值都是true，整個every方法才返回true，否則返回false。兩相比較，some()只要有一個是true，便返回true；而every()只要有一個是false，便返回false.

這兩個方法在實際開發中，大有可用之處。比如在判定使用者是否勾選了不可操作的資料，或者是否勾選了一條可以操作的資料可以使用這兩個方法遍歷迴圈陣列。

reduce()遍歷--相對於不好理解

reduce方法第一個引數是一個函式。該函式接受以下四個引數。

　　1.Accumulator(累計器)

　　2.Current Value(當前值)

　　3.Current Index(當前索引)

　　4.Source Array(源陣列)

函式的返回值分配給累計器，該返回值在陣列的每個迭代中被記住，並最後成為最終的單個結果值。

這四個引數之中，只有前兩個是必須的，後兩個則是可選的。

參考文章：腓腓無憂  

相關文章