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