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是用来过滤数据的，每个方法分工不同，你学废了吗？

来源：编程周记