ReactJS多条件（最多7项）数据过滤的优化实现问询

需求说明 #

需实现支持1至7个不同条件组合的搜索功能，可过滤字段包括手机号、邮箱、姓名（名和姓）、国家、州、ID，所有条件允许任意组合使用。

目标数据结构 #

{
    id: "123456",
    firstName: "john",
    lastName: "doe",
    middleName: "Leon",
    phone: "3216549878",
    dob: "10/12/1984",
    prefix: "Mr",
    suffix: "",
    gender: "male",
    ageClass: "adult",
    email: "john.doe@gmail.com",
    citizenship: "US",
    country: "US",
    state: "GA",
}

问题与优化尝试 #

最初通过260行嵌套if语句实现功能，但代码可读性极差。后续参考他人方案修改出以下简化代码：

优化后代码 #

const filterParams = {
    firstName: fname,
    lastName: lname,
    phone: phone,
    email: email,
    country: country,
    state: state,
};

const search = (objArray, filterParams) => {
    return objArray.filter((obj) => {
        return Object.keys(filterParams).every((key) =>
            obj[key].toLowerCase().includes(filterParams[key].toLowerCase())
        );
    });
};

可进一步优化的点 #

• 空值处理：若filterParams中的某个字段值为空（如用户未输入对应条件），应跳过该字段的过滤，避免无意义的匹配
• ID字段适配：ID通常为精准匹配或大小写不敏感（视业务需求），无需强制转小写处理
• 姓名组合搜索：若支持按全名搜索，可额外拼接firstName和lastName进行匹配

内容的提问来源于stack exchange，提问作者Chris Williamson