js--陣列的filter()過濾方法的使用

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

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

相關文章