前言

你还在通过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的用法很多,关键在于工作学习中遇到的场景中如何去使用操作。

总结

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

版权声明:本文为zaishiyu原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/zaishiyu/p/14163853.html