JavaScript过滤数组并比较时如何跳过null、undefined等空值

核心逻辑：先定义空值判定规则，过滤时仅对选中参数中非空的选项做匹配校验，未选择的空值项直接跳过校验。

步骤1：定义空值判定辅助函数 #

可根据业务需求灵活调整空值判定规则，默认覆盖null、undefined、空数组三类空值：

const isValidFilterValue = (value) => {
  // 跳过null、undefined
  if (value === null || value === undefined) return false
  // 跳过空数组
  if (Array.isArray(value) && value.length === 0) return false
  // 如需跳过空字符串可新增规则：if (typeof value === 'string' && value.trim() === '') return false
  // 如需把0判定为空值可新增规则：if (value === 0) return false
  return true
}

步骤2：实现动态过滤逻辑 #

不需要手动枚举所有属性写判断条件，自动遍历所有过滤项，空值直接跳过：

const availableProducts = products.filter(product => {
  return Object.entries(selectedOptions).every(([filterKey, filterValue]) => {
    // 当前过滤项为空值，直接跳过校验
    if (!isValidFilterValue(filterValue)) return true
    // 非空值则校验产品属性和选中值是否匹配
    return product[filterKey] === filterValue
  })
})

方案验证 #

针对你给出的示例数据，运行上述代码后，会匹配到horsepowers=50且doors=3的产品（id为2的Jungle），gear_type和wheels因为是空值不会参与校验，结果完全符合预期。

方案优势 #

• 不需要手动写死每个属性的校验逻辑，后续新增过滤字段无需修改过滤代码，自动适配
• 空值判定规则可灵活扩展，调整isValidFilterValue即可覆盖所有业务需要忽略的无效值
• 逻辑通用，可直接复用在所有同类多条件筛选场景

内容的提问来源于stack exchange，提问作者Mads Hjorth