js 前端數據多條件篩選過濾

最近在用vue做一個後臺管理項目，因爲vue2.0刪除了內置的過濾器，無法再像1.0版本或者angularJs那樣直接使用內置的過濾器實現數據的多條件篩選過濾。因此自己寫了一個方法來實現這種功能。

//假設後端通過接口給我們的數據如下：
let data = [ {
        name: 'Andy',
        age: 13
    }, {
        name: 'Jack',
        age: 14
    }, {
        name: 'Lucy',
        age: 12
    } ]
//在實際項目中，我們需要根據篩選框中的條件來實現數據的過濾,下面爲過濾方法：
//@param condition 過濾條件
//@param data 需要過濾的數據
let filter=(condition,data)=>{
    return data.filter( item => {
        return Object.keys( condition ).every( key => {
           return String( item[ key ] ).toLowerCase().includes( 
                   String( condition[ key ] ).trim().toLowerCase() )
            } )
     } )
}
//假設選擇的條件爲name中帶字母a的元素
var condition={name:'a'}
filter(condition,data) //[ {name: 'Andy',age: 13},{name: 'Jack',age: 14}]
 
//假設選擇的條件爲name中帶字母a，而且age爲13的元素
var condition={name:'a',age:13}
filter(condition,data) //[ {name: 'Andy',age: 13}]
 
 

以上代碼中，使用了以下的api

1、filter()：數組的過濾器方法

2、Object.keys()：es6提供的方法，用來獲取對象鍵值對的鍵的集合

3、every()：數組的every方法，因爲檢查數組內的所有元素是否都滿足 某一條件，如果都滿足返回true,.如果有一項元素不滿足就返回false。

4、includes():es7中提供的新方法，用於檢測某字符串中是否包含給定的值，如果有返回true，沒有返回false,數組中也有該方法。

作者：sunshine_hz
來源：CSDN
原文：https://blog.csdn.net/qq_35437531/article/details/82867216