奕玖科技 > 新闻中心 > 技术文章

ES6新特性 map() filter() find()使用方法总结

来源: 奕玖科技 瘦死的猪 | 2023/1/3 15:12:45

在我们过滤数组的时候,如果熟练使用以上3种方法,会让js程序更加的简洁我们先用ES6之前传统的方法来返回id值为1的数组,示例代码如下

Let a=[{id:0},{id:1},{id:2}]

首先根据上面的代码,我们可以使用for循环,如果id等于1那么久赋值给相应的变量。

let b;
for (let i in a){
  if (a[i].id===1){
    b=a[i]
  }
}

Map()方法使用指南

现在我们使用map来返回这个数组。

let b
a.map(v=> {
  if (v.id===1){
    b= v
  }
});

map()方法会返回一个新的数组,数组中的元素为函数处理后的值。它具体语法如下

array.map(function(currentValue,index,arr),thisValue)

我们可以打印一下看效果

a.map((currentValue,index,arr)=> {
  console.log(currentValue,index,arr)
});

可以看到,currentValue为当前元素值如({id:0}),index为当前元素的索引如(0),arr为当前的元素对象即a本身。thisValue是一个可选参数

如果上面我们不使用变量来接收id为1的值,看看效果如何

let b=a.map(v=> v.id===1); //返回 false true false
let b=a.map(v=> {
  if (v.id===1){
    return  v
  }
}); //返回[undefined,{"id": 1},undefined]
]

通过上面的例子我们看到为什么会出现undefined呢?上面说了map方法会返回处理后的值。比如第二个,它只指定了v.id===1的值的返回值,而其他没有。所以才会出现undefined。记住,以下两点.

1、map()方法是按照从上到下的顺序执行。

2、map()方法不会改变原始数组。

3、map()只返回处理过后的值。如改造一下上面的示例

let b=a.map(v=>v.id+1); 数组每个元素的id值将加1

4、map()方法不会检查空数组。

filter()的使用方法

还是根据文章开头,来查找id等于1的值,现在我们使用filter()方法

let b=a.filter(v=>v.id===1)//打印b后返回值为[{"id": 1}]

可以看到,filter()方法比map方法处理的效果更好,直接就可以赋值了啊。filter的语法如下

array.filter(function(currentValue,index,arr), thisValue)

可以看到,它跟map的语法是一致的。不同于map不改变元素的数组,filter它将返回一个新的数组,并且过滤掉不符合条件的其他元素。比如上面的代码就过滤掉id不等于1的值。下面是一个比较实用的方法,使用filter除去重复的数组。

let a=[1,1,1,2,2,2,3,3,3,3]
let b=a.filter(
    (e,i,s)=>{
      return s.indexOf(e) === i;
    }
) //打印后获得结果[1, 2, 3]

find()使用方法

最后面我们使用find()方法来实现id等于1的数据获取,代码如下

let b=a.find(v=>v.id===1)//返回结果{id:1}

我们可以看到find不返回数组,只返回符合条件的值。当我们不需要返回数组,只需要获得符合条件的元素时,明显使用find()更合理。fide()的语法跟map和filter是一样的。

array.find(function(currentValue, index, arr),thisValue)

find()返回第一个符合条件的元素,如下示例

let a=[0,1,1,1,1,2,3,2,5]
let b=a.find(v=>v===2); //它返回索引为5的数值(a[5]),其他的不返回,如果没有符合条件的值返回undefined

最后总结

可以看到,map find filter在语法上它们是一致的,map返回修改后的原始数组,只是数组里的值是被函数修改后的。filter它返回一个新的数组,并且过滤掉函数里不匹配的元素。而find仅仅只返回函数里首条符合记录的值。它们都是用于操作数组的,只是每个方法操作的方法不一致而已。

栏目导航
相关文章
文章标签
关于我们
公司简介
企业文化
资质荣誉
服务项目
高端网站定制
微信小程序开发
SEO排名推广
新闻动态
行业新闻
技术学院
常见问题
联系我们
联系我们
人才招聘
联系方式
Q Q:24722
微信:24722
电话:13207941926
地址:江西省抚州市赣东大道融旺国际3栋
Copyright©2008-2022 抚州市奕玖科技有限公司 备案号:赣ICP备2022010182号-1