js數組遍歷（for in ,for of ,map,foreach,filter）的區別

 

一.for in 和for of 的區別

1.for in 遍歷數組時，索引實際上是字符串類型的數字，不能進行運算，我們來輸出一下：

 

　　　 let arr = [1,3,5,4]

    for (let index in arr) {
        console.log(typeof index)  
    }

結果：

2.遍歷的順序有可能不是數組內部的順序（這個我沒有試出來，如果找到例子，以后我再更新）

3.for in 會遍歷數組內所有可枚舉的屬性，包括原型上的屬性和方法

    let arr = [1,3,5,4]
    arr.name = "數組"
    for (let index in arr) {
        console.log(arr[index])  
    }

結果：

所以，for in更適合遍歷對象，盡量不要使用for in 遍歷數組

使用for in 遍歷對象時，index為該對象的鍵，Object[index]能取到每個鍵對應的值，來看下面的例子：

    let obj = {
        name:"張三",
        age:21,
        work:"前端"
    }
    
    for (let index in obj) {
        console.log("key為---",index,"val為---",obj[index])
    }

結果：

2.foreach

foreach會從頭到尾對數組里的每個元素遍歷一遍 ，他不會生成新數組，也不改變原數組，回調函數接收三個值，分別是 數組的元素，索引和當前數組

    let arr = ["a","b","c","d"]
    arr.forEach((el,index,array) => {
        if(el == "b" ) return
        console.log(el,index,array)
    })

結果：

在上邊的例子中我加了一個判斷，如果滿足元素等於b,return出去，按理說遍歷時滿足這個條件后邊就不遍歷了，但是foreach不會，他會接着向下進行

 

3.map

和foreach類似，map也會把數組的每一項都遍歷一遍，他會返回一個新數組，但是原數組保持不變，值得注意的是，map不會對空數組進行檢測

 

let arr = [1,2,3,4,5]
let  b =  arr.map((el,val,array) => {
   return el > 2
})
console.log(b)

 

 結果：

 

4.filter

filter為過濾的意思，也就是說它會把滿足條件的元素拿出來形成一個新的數組

    let arr = [1,2,3,4,5,6,7,8,9]
    let result = arr.filter(el => {
        return el % 2 == 0
    })
    console.log(result)

結果：

 

 

巧妙的運用filter去除數組中重復的元素：

 

let phone = ['蘋果','錘子','三星','華為','錘子','蘋果','小米','錘子']

let result = phone.filter((el,index,arr) => {

　　return arr.indexOf(el) == index

})

console.log(result)

結果：