js 前端数据多条件筛选过滤

2019-06-19 本文已影响27人全栈弄潮儿

// 假设后端通过接口给我们的数据如下：
const users = [{
    key: 0,
    userId: 1,
    userName: '诸葛亮',
    gender: '男',
    age: 26,
    tel: 15023712789,
    createTime: '2019-06-16'
},
{
    key: 1,
    userId: 2,
    userName: '妲己',
    gender: '女',
    age: 17,
    tel: 123456789,
    createTime: '2019-06-16'
},
{
    key: 2,
    userId: 3,
    userName: '赵云',
    gender: '男',
    age: 23,
    tel: 13523712789,
    createTime: '2019-06-16'
},
{
    key: 3,
    userId: 4,
    userName: '甄姬',
    gender: '女',
    age: 16,
    tel: 17723712789,
    createTime: '2019-06-16'
},
{
    key: 4,
    userId: 5,
    userName: '张飞',
    gender: '男',
    age: 25,
    tel: 19223712789,
    createTime: '2019-06-16'
},
{
    key: 5,
    userId: 6,
    userName: '蔡文姬',
    gender: '女',
    age: 18,
    tel: 15123712789,
    createTime: '2019-06-16'
},
{
    key: 6,
    userId: 7,
    userName: '阿轲',
    gender: '男',
    age: 23,
    tel: 111123712789,
    createTime: '2019-06-16'
},
{
    key: 7,
    userId: 8,
    userName: '嫦娥',
    gender: '女',
    age: 16,
    tel: 11923712789,
    createTime: '2019-06-16'
},
{
    key: 8,
    userId: 9,
    userName: '吕布',
    gender: '男',
    age: 23,
    tel: 11023712789,
    createTime: '2019-06-16'
},
{
    key: 9,
    userId: 10,
    userName: '芈月',
    gender: '女',
    age: 19,
    tel: 17923712789,
    createTime: '2019-06-16'
},
{
    key: 10,
    userId: 11,
    userName: '凯',
    gender: '男',
    age: 23,
    tel: 19923712789,
    createTime: '2019-06-16'
},
{
    key: 11,
    userId: 12,
    userName: '公孙离',
    gender: '女',
    age: 15,
    tel: 19023712789,
    createTime: '2019-06-16'
},
{
    key: 12,
    userId: 13,
    userName: '孙悟空',
    gender: '男',
    age: 23,
    tel: 18823712789,
    createTime: '2019-06-16'
}];

在实际项目中，我们需要根据筛选框中的条件来实现数据的过滤,下面为过滤方法：

//@param condition 过滤条件
//@param data 需要过滤的数据
const filter=(condition, data)=>{
return data.filter(item => {
return Object.keys(condition).every(key => {
return String(item[key]).toLowerCase().includes(
String(condition[key]).trim().toLowerCase() )
} )
} )
}
// 假设选择的条件如下
var condition={userName:'妲己'}
filter(condition, data) //[ { key: 1, userId: 2, userName: '妲己',gender: '女',age: 17, tel: 123456789, createTime: '2019-06-16'
}]

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

1、filter()：数组的过滤器方法

2、Object.keys()：es6提供的方法，用来获取对象键值对的键的集合

3、every()：数组的every方法，因为检查数组内的所有元素是否都满足某一条件，如果都满足返回true,.如果有一项元素不满足就返回false。

4、includes():es7中提供的新方法，用于检测某字符串中是否包含给定的值，如果有返回true，没有返回false,数组中也有该方法。