JS數組遍歷方法集合

就讓我們在逆戰中成長吧,加油武漢，加油自己

1.for循環

使用零時變量將長度存起來，當數組較大時優化效果才會比較明顯。

var ar1=[2,4,6,8]
for(var i=0;i<ar1.length;i++){
    console.log(i)
　　console.log(ar1[i])
}

2.foreach循環

遍歷數組中每個數，沒有返回值

使用break不能中斷循環，使用return也不能返回到外層函數

 

var ar1=[2,4,6,8]
ar1.foreach((item,index,arr){
    //第一個參數代表當前元素
    //第二個參數代表當前元素下標
    //第三個參數代表原數組
})
//數組中長度多少就循環多少次

3.for-of循環

運行循環獲得鍵值

var ar1=[2,4,6,8]
for(var i of ar1){
    console.log(i)
    //2,4,6,8
}

for-of可用使用break，continue 和 return 配合使用，跳出循環

for(var i of ar1){
    if(i==4){
        break
    }
    console.log(i)//2
}

對於普通對象直接遍歷的話是會報錯的 obj is not iterable

for-of循環不支持普通對象，但如果你想迭代一個對象的屬性，你可以用for-in循環（這也是它的本職工作）或內建的Object.keys()方法：

可以使用 Object.keys(obj) 方法將對象的鍵名生成一個數組，然后遍歷這個數組

var obj={
        "naem":"張三",
        "age":18
    }
    for(var i of Object.keys(obj)){
        console.log(i+":"+obj[i])
        //name:張三  age:18
    }

4.for-in

只能獲得對象的鍵名，不能獲得鍵值

var obj={
        "naem":"張三",
        "age":18
    }
for(var i in obj){
        console.log(i)
        //name
        //age
    }   

for...in 循環不僅遍歷數字鍵名，還會遍歷手動添加的其它鍵，甚至包括原型鏈上的鍵。for...of 則不會這樣

let arr = [1, 2, 3]
arr.set = 'hello'  // 手動添加的鍵
Array.prototype.name = 'word'  // 原型鏈上的鍵
 
for(var i in arr) {
  console.log(i)
//0
//1
//2
//set
//name
}

for-in是為遍歷對象而設計的，不適用於遍歷數組。(遍歷數組的缺點：數組的下標index值是數字，for-in遍歷的index值"0","1","2"等是字符串)

5.map

不會改變原數組，有返回值可用return，成為一個新數組（只是相當於把原數組克隆一份，把克隆的這一份的數組中的對應項改變了）

var ar1=[2,4,6,8,12]
var map1=ar1.map((item)=>{
    if(item==6){
        return item*2
    }
})
console.log(map1)
//[undefined, undefined, 12, undefined, undefined]

之所以會出現undefined，是因為map()方法創建了一個新數組，但新數組並不是在遍歷完array1后才被賦值的

下面這樣寫才是正確的

var map1=ar1.map((item)=>{
    if(item == 6){
        return item * 2
    }
    return item
})
console.log(map1)
//[2，4,12,8,12]

5.filter

不會對原數組進行修改 返回新數組

 

 var filt=ar1.filter((item,index)=>{
     //返回索引大於2的元素組成新的數組
    if(index>2){
        return item
    }
 })
 console.log(filt)
 //[8,12]

 

6.reduce

reduce()作為一個循環使用。接收四個參數：初始值（上一次返回值），當前元素值，當前元素下標，原數組。

var a=[4,5,6,7,8]
//item代表一次回調的值 初始值為0
//cart代表當前元素的值
//index當前下標
//arr原數組
var num=a.reduce((item,cart,index,arr)=>{
    return item+=cart
},0)
//初始值為0

console.log(num) //輸出為30

7.some

every()與some()方法都是JS中數組的迭代方法。

some()是對數組中每一項運行給定函數，如果該函數滿足任一項返回true，則返回flase

var a=[1,2,4,69,56,89]
var some1=a.some((item)=>{
return item > 50
})
console.log(some1)//true

8.every()

every()與some()方法都是JS中數組的迭代方法。

every()是對數組中每一項運行給定函數，如果該函數所有項返回true,則返回true。一旦有一項不滿足則返回flase

var a=[1,2,4,69,56,89]
var some1=a.every((item)=>{
return item > 50
})
console.log(some1)//flase