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]