一塊兒比較遍歷數組的方法 map forEach find fiter

 

來來來先上一個數組：

const pets = [
  { type: 'Dog', name: 'Max'},
  { type: 'Cat', name: 'Karl'},
  { type: 'Dog', name: 'Tommy'},
]
let pet;
複製代碼

仔細一個這個數組的每一項都是對象

• map  操做

pet = pets.map((item)=>{
  if (item.type ==='Dog' && item.name === 'Tommy') {
    return item
  }
})
console.log(pet)複製代碼

輸出結果以下圖：

• forEach 操做

pet = pets.forEach((item)=>{
  if (item.type ==='Dog' && item.name === 'Tommy') {
    return item
  }
})
console.log(pet)複製代碼

輸出結果以下圖：

• filter 操做

pet = pets.filter(item =>{return  item.type ==='Dog' && item.name === 'Tommy'});
console.log(pet)複製代碼

輸出結果以下圖：

• find 操做：

pet = pets.find(item =>{return  item.type ==='Dog' && item.name === 'Tommy'});
console.log(pet)複製代碼

輸出結果以下圖：

各類方法輸出結果咱們都看到了，來來來咱們總結一波：

1. map遍歷每一項時並不會知足條件就中止執行，返回一個新的數組，遍歷時知足條件的會被push進去，不知足的則push undefined因此新數組的長度和老數組的長度同樣

2. forEach遍歷返回的是undefined 他就是簡單的遍歷

3. filter遍歷會返回一個新的數組，可是是僅僅知足條件的會被push進去

4. find遍歷則返回的是知足條件的那一項

這僅僅是針對返回值的比較，還有其餘方面的不一樣

還有他們都不會改變原數組哦

因此根據你本身的需求，來選擇！！！！