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

总结

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