js数组操作:map、forEach和filter有什么区别?

forEach、map和filter是前端常用的数组处理方法,那么他们之间有什么区别呢?平常使用少的朋友可能就不太明白了。

接下来通过一个例子说明他们之间的区别,有这样一组数据:

 let tmp =[
    {userId:1,userName:"AAA",createDate:'2015-01-01 12:12:11'},
    {userId:2,userName:"BBBB",createDate:'2021-01-01 12:12:11'},
    {userId:3,userName:"ASGGG",createDate:'2026-01-01 12:12:11'},
    {userId:4,userName:"CCCCCCCCC",createDate:'2025-01-01 12:12:11'}
  ];

有这么几个需求:

1、取出的对象只包含其中userName,并且加上“用户_”前缀。

2、取出List<String>数据,字段是userName。

3、取出userName包含字母A的数据。

forEach

用于遍历数组,可以自行在里面写自己的一些逻辑。

对于第1、2两点,下面是错误写法:

 let newTmp = tmp.forEach((item)=>{
   return {userName:item.userName}
 });
  let newTmp2 = tmp.forEach((item)=>{
   return item.userName
 });

这样是不行的!

正确的写法:

let newArr =[];//需求1
  tmp.forEach((item)=>{
    newArr.push({userName:'用户_'+item.userName})
 });
 
 let newArr =[];//需求2
  tmp.forEach((item)=>{
    newArr.push(item.userName)
 });

第3点:

 let newArr =[];
  tmp.forEach((item)=>{
    if (item.userName.includes("A")){
      newArr.push(item.userName)
    }
 });

map

也是遍历数组,通常用来返回处理后的内容。

从forEach实现可以看到,要想处理成一个新的数组比较麻烦了,需要新定义一个数组,然后往里面push。

那么接下来,我将用map实现三个需求。

//需求1
 let newArr =tmp.map((item)=>{return {userName:'用户_'+item.userName}});
 //需求2
 let newArr =tmp.map((item)=>{return item.userName});

那么需求3是不是也可以直接这样用呢,答案是不行,因此才需要filter的存在。

错误写法:

 let newArr =tmp.map((item)=>{
    if (item.userName.includes("A")){
      return {userName:item.userName}
    }
 });

结果会出现,满足条件的两个返回之外,其他的也会返回undefined。

图片

我们暂且认为map是无法实现需求3的了

filter诞生了。。

filter

filter来实现需求3,只返回userName包含字母A的记录。

 let newArr =tmp.filter((item)=>item.userName.includes("A"));

总结

目前看下来forEach是最灵活的,map是用来加工数据的,但是对条数不能更改,filter是用来过滤数据的,每个方法分工不同,你学废了吗?

来源:编程周记

THE END