js实现前端的数据筛选

4,571 阅读1分钟

近期用js实现了一个前端的筛选,主要实现的功能,单选框下拉选择,js过滤筛选出符合条件的数据,记录一下。 思路:

1.获取所有数据

2.筛选条件

3.筛选目标范围

单条件数据筛选(选出name是zhang的)

<!--筛选arr中name是zhang的-->
```let arr = [
    {name: 'zhang', age: 8, gender: '男'},
    {name: 'wang', age: 9, gender: '女'},
    {name: 'li', age: 10, gender: '男'}
]
function filterArr () {
    return arr.filter(item => { item.name == 'zhang'})
}```

多条件并列筛选(选出name为zhang&&性别为女的)

let filter = ['name', 'gender']; //存放筛选条件
let showArr = []; // 符合条件的数据
let selectArr = filter.length == 1 ? [...arr] : [...showArr]; // 筛选范围
filter.forEach(item => {
    swich(item) {
        case 'name':
            showArr = selectArr.filter(item => { item.name == 'zhang'});
            break;
        case 'gender':
            showArr = selectArr.filter(item => {item.gender == '女'})
    }
})

我收藏的数组关于筛选的文章