一起比较遍历数组的方法 map forEach find fiter

426 阅读1分钟

 

来来来先上一个数组:
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遍历则返回的是满足条件的那一项

这仅仅是针对返回值的比较,还有其他方面的不同

还有他们都不会改变原数组哦

所以根据你自己的需求,来选择!!!!