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的用法很多,关键在于工作学习中遇到的场景中如何去使用操作。
总结
以上就是本文的全部内容,希望给读者带来些许的帮助和进步,方便的话点个关注,小白的成长之路会持续更新一些工作中常见的问题和技术点。