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

Sunshine_Jian

已于 2022-01-20 14:09:32 修改

阅读量1w

点赞数 15

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2021-11-03 15:35:30 首次发布

本文链接：https://blog.youkuaiyun.com/Sunshine_Jian/article/details/121122148

版权

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的数据过滤方法，可以根据一个或多个输入条件从数据集中筛选出符合条件的记录。通过具体示例展示了如何应用该方法进行高效的数据筛选。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：有多个输入框，输入一个及以上的条件，实现数据过滤。

let data = [ {
        name: '名侦探柯南',
        price: 13,
        num:108,
        hot:0,
        status:1
    }, {
        name: '大侦探皮卡丘',
        price: 13,
        num:151,
        hot:1,
        status:0
    }, {
        name: '绿皮书',
        price: 13,
        num:72,
        hot:1,
        status:1
    } ]

//@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() )
            } )
     } )
}

//无条件
var condition={name:'',hot:''};
var aa = filter(condition,data);
console.log(aa);// [{"name":"名侦探柯南","price":13,"num":108,"hot":0,"status":1},{"name":"大侦探皮卡丘","price":13,"num":151,"hot":1,"status":0},{"name":"绿皮书","price":13,"num":72,"hot":1,"status":1}]
 
//单条件
var condition={name:'侦探'};
var bb = filter(condition,data);
console.log(bb);// [{"name":"名侦探柯南","price":13,"num":108,"hot":0,"status":1},{"name":"大侦探皮卡丘","price":13,"num":151,"hot":1,"status":0}]

//多条件
var condition={name:'侦探',hot:'1'};
var cc = filter(condition,data);
console.log(cc);//[{"name":"大侦探皮卡丘","price":13,"num":151,"hot":1,"status":0}]