js–数组的filter()过滤方法的使用

  • 前言

你还在通过for循环遍历数组吗?你还在遍历之后一项一项的通过if判断过滤你需要的数据吗?你还在写着一大堆代码实现一个简单的过滤数据功能吗?那么,今天他来了。他就是这里要介绍的es6中数组filter()过滤方法的使用,理解比较浅显,希望在工作和学习中遇到的时候方便查找。

  • 正文

    • 语法及定义

定义:filter()方法:创建一个包含通过测试的数组元素的新数组。

上面这句话有几个需要注意的地方,首先,操作对象是数组,还要注意filter()方法针对的是非空数组的检测过滤,其次是创建新数组,也就是说filter()方法会产生新数组,同时不会改变原数组,最后新数组中的元素是通过测试的原数组的元素,也就是说要有测试规则,定义测试规则会想到map()方法也是这样,就是给filter()传入一个回调函数而已吗。说白了就是,针对非空数组中的每一项,判断一个是否通过测试规则,通过的话就添加到新数组中。

根据上面的理解,先用自己的方法模仿下造个轮子呗!这里测试规则为大于5的数

//定义原始数组
var arr=[1,2,3,5,6,7]
//定义过滤规则
var rules=function(a){
if(a>5){
return true
}else{
return false
}
}
function myfilter(array,rules) {
if (array.length===0) {//判断传入的原数组不能为空
console.log("原数组不能为空")
} else {
let newArr=[]
for (let index = 0; index < array.length; index++) {
if(rules(arr[index])){
newArr.push(arr[index])
}
}
return newArr
}
}
var myarr=myfilter(arr,rules)
console.log(myarr)//输出[6,7]

语法:array.filter(function(currentValue,index,arr),thisValue)

参数一:一个回调函数,和map方法的回调函数一样,改回调有三个参数,第一个当前元素的值,必填参数,后面两个根据实际选填,分别代表当前袁术在原数组中对应的索引和原始数组 。

参数二:可选,对象作为该执行回调时使用,传递给函数,用作this的值,如果省略了thisValue,this的值变为undefined

    • 使用

1.学会了filter()的使用,就可以直接使用es6中的轮子了,首先实现过滤出数组中大于5的数

  var arr=[1,2,3,,5,6,7]
var myarr=arr.filter(v=>v>5)
console.log(myarr);//输出[6,7]

2.通过filter判断数组中是否存在某个值

   var arr=[1,2,3,,5,6,7]
console.log(arr.filter(v=>v==5).length==0?"不存在":"存在")//输出存在

3.去掉空数组空字符串、undefined、null

var arr=["",undefined,null,1,2,3]
var myarr=arr.filter(v=>v)
console.log(myarr)//输出[1,2,3]

4.数组去重

var arr = [1, 2, 2, 3, 4, 5, 5,6,,7];
var myarr = arr.filter((item, index,self)=>self.indexOf(item)===index)
console.log(myarr); //[1,2,3,4,5,6,7]

其他用法,比如实际开发中需要过滤掉返回list中某一项下面多个属性按条件的筛选等等。。总之,filter的用法很多,关键在于工作学习中遇到的场景中如何去使用操作。

以上就是本文的全部内容,希望给读者带来些许的帮助和进步,方便的话点个关注,小白的成长之路会持续更新一些工作中常见的问题和技术点。

博客园精华区
我还没有学会写个人说明!
上一篇

谷歌Doodle聚焦最后一头雄性北方白犀牛“苏丹”

下一篇

Mozilla Firefox已经准备好默认启用AVIF图像处理支持

你也可能喜欢

评论已经被关闭。

插入图片