JS-数组方法filter和map
一、生成两个数组
var numArr = [1,8,78,115,10,80];
var tlbb = [ {userId:1,name:"乔峰",age:40,sex:1},
{userId:2,name:"段誉",age:28,sex:1},
{userId:6,name:"虚竹",age:35,sex:1},
{userId:8,name:"叶二娘",age:45,sex:2},
{userId:4,name:"西夏国公主",age:30,sex:2},
];
说明下面举例filter()和map()函数的功能,
事实上filter()和map()的逻辑都可以使用for或forEach实现,毕竟遍历每一行数据后想怎么处理都行。
但是但是,filter()和map()的使用可以效率更高,代码量更少,出错率更少。
二、filter() 过滤器。
(1)filter() 过滤器方法:顾名思义通过过滤得到一个新的数组
(2)当filter() 返回结果是true时,会将这个数组元素返回,组成新数组元素中的一个。
(3) return返回值: 仅仅接收真假值,例如true/false; 1/0 ; return true/1; return false/0;
(4)return返回值不是真假值,则filter()可能返回空数组[]
//过滤后得到大于50元素
var newArray = numArr.filter(item =>{
return item > 50;
});
//newArray = [78, 115, 80]
//数组元素是JOSN对象
//过滤后得到天龙八部八部中是女性角色,且小于40岁的任务
var newArray2 = tlbb.filter(item =>{
if(item.sex == 2 && item.age < 40)
return true;
return false;
});
//newArray2 = [{userId: 4, name: "西夏国公主", age: 30, sex: 2}]
三、map() 对数组中的每个元素进行计算,得到一个新数组。
(1)对数组中的每个元素进行计算,得到一个新数组。
(2)可以对数组中的对象的进行新增,删除
(3)return返回值:其实可以是任何对象,也可以不做返回。
//过滤后得到+1元素
var newArray3 = numArr.map(item =>{
item = item + 1;
return item;
});
//newArray3 = [2, 9, 79, 116, 11, 81]
数组元素是JOSN对象
//过滤后得到天龙八部八部中是女性角色,且小于40岁的任务
var newArray4 = tlbb.filter(item =>{
item.name = "天龙八部_" + item.name
item.sexName = item.sex == 1 ? "男":"女"; //新增sexName
delete item.sex; //删除sex
return item;
});
//newArray4 = [{userId: 1, name: "天龙八部_乔峰", age: 40, sexName: "男"},
// {userId: 2, name: "天龙八部_段誉", age: 28, sexName: "男"},
// {userId: 6, name: "天龙八部_虚竹", age: 35, sexName: "男"},
// {userId: 8, name: "天龙八部_叶二娘", age: 45, sexName: "女"},
// {userId: 4, name: "天龙八部_西夏国公主", age: 30, sexName: "女"}
// ]
//返回固定的值
var newArray5 = numArr.map(item =>{
return 1;
});
//newArray5 = [1, 1, 1, 1, 1, 1]
//无返回值
var newArray6 = numArr.map(item =>{
item = item + 1;
});
//newArray6 = [undefined, undefined, undefined, undefined, undefined, undefined]
四、使用回调函数
filter()和map()等都支持回调函数
回调函数接收三个参,且可以省略
1.item 遍历的单个数组元素,正常情况下此参数不省略
2.index 索引
3.array 全量数组本身
//过滤后得到+1元素
var newArray3 = numArr.map((item, index, array) =>{
item = item + 1;
return item;
});
//使用回调函数
function mapCallBack(item, index, array){
item = item + 10;
return item;
}
var newArray3 = numArr.map(mapCallBack);
//newArray3 = [2, 9, 79, 116, 11, 81]