JavaScript中filter实现多条件筛选需用布尔运算符连接判断逻辑，支持&&（且）、||（或）及动态条件控制，注意null安全、大小写统一和数值严格比较。

JavaScript 中用 filter 实现多条件组合筛选，核心是把多个判断逻辑写进回调函数里，用布尔运算符（&&、||、!）连接条件，返回 true 的元素会被保留。

基础写法：多个条件用 && 连接（同时满足）

适用于“必须同时符合 A、B、C”的场景。每个条件单独写，逻辑清晰，也方便后续动态控制。

例如筛选年龄在 25–35 之间、且城市为“北京”、且有工作的用户：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

const users = [
  { name: '张三', age: 28, city: '北京', job: '前端' },
  { name: '李四', age: 36, city: '北京', job: '设计师' },
  { name: '王五', age: 30, city: '上海', job: '前端' },
  { name: '赵六', age: 29, city: '北京', job: null }
];

const result = users.filter(u => 
  u.age >= 25 && 
  u.age <= 35 && 
  u.city === '北京' && 
  u.job
);
// → [{ name: '张三', age: 28, city: '北京', job: '前端' }]

灵活写法：把条件提取成变量或函数（便于复用和调试）

当条件变多或需要复用时，把每个判断拆成独立函数，再在 filter 中组合调用，可读性和可维护性更好。

立即学习“Java免费学习笔记（深入）”；

• 定义校验函数，比如 isAdult(u)、isFromBeijing(u)、hasJob(u)
• 在 filter 中直接组合：isAdult(u) && isFromBeijing(u) && hasJob(u)
• 也可用数组 + every 统一管理条件：conditions.every(fn => fn(u))

const conditions = [
  u => u.age >= 25 && u.age <= 35,
  u => u.city === '北京',
  u => !!u.job
];

const result = users.filter(u => conditions.every(fn => fn(u)));

支持“或”逻辑和动态条件（如搜索框+下拉筛选）

用户界面中常需“关键词模糊匹配 或 分类精确匹配”，或根据表单是否填写来决定是否启用某条件。

• 用 || 表达“满足任一即可”，比如 u.name.includes(keyword) || u.job?.includes(keyword)
• 对可能为空的筛选项，用“存在即校验，不存在则跳过”：例如 !searchCity || u.city === searchCity
• 完整示例：filter 前先收集参数，再构建条件表达式

const keyword = '前';
const city = '北京';
const minAge = null; // 用户没填，不参与筛选

const result = users.filter(u => 
  (keyword ? (u.name.includes(keyword) || u.job?.includes(keyword)) : true) &&
  (!city || u.city === city) &&
  (!minAge || u.age >= minAge)
);

注意点：避免常见陷阱

• null/undefined 安全：访问嵌套属性前先判空，比如 u.profile?.tags?.includes('vip')，或用可选链 + 空值合并
• 字符串比较注意大小写：必要时统一转小写，u.name.toLowerCase().includes(keyword.toLowerCase())
• 数值比较别用 ==：用 === 或显式转换，避免 '25' >= 20 这类隐式转换错误
• 性能敏感时避免重复计算：复杂逻辑可提前算好中间值，或用 map 预处理字段