JS-数组方法filter和map

Bertha 。 2023-07-01 11:53 9阅读 0赞

## 一、生成两个数组 ##

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 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]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200319190400307.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1,size_16,color_FFFFFF,t_70