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的用法很多，關鍵在於工作學習中遇到的場景中如何去使用操作。

總結

以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長之路會持續更新一些工作中常見的問題和技術點。