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