JavaScript 中怎么对接口返回的商品列表数据进行多条件筛选-js教程-PHP中文网

javascript商品列表多条件筛选核心是用filter()配合动态生成的条件函数数组，通过every()统一校验分类、品牌、价格区间、关键词、有货等条件，并做防抖、大小写归一化等优化。

javascript 中怎么对接口返回的商品列表数据进行多条件筛选

JavaScript 中对接口返回的商品列表做多条件筛选，核心是用 filter() 方法配合多个条件的逻辑组合，关键在于把用户输入的筛选项（如分类、价格区间、关键词等）动态转为判断函数。

明确筛选字段和数据结构

先确认接口返回的商品数据格式，比如：

[
  { id: 1, name: "iPhone 15", category: "手机", price: 5999, brand: "Apple", stock: 12 },
  { id: 2, name: "Mate 60", category: "手机", price: 4999, brand: "Huawei", stock: 8 },
  { id: 3, name: "MacBook Air", category: "电脑", price: 8999, brand: "Apple", stock: 5 }
]

常见筛选维度包括：分类（category）、品牌（brand）、价格区间（price）、关键词搜索（name）、是否有货（stock > 0）等。每个条件应有对应的用户输入控件（下拉框、输入框、滑块等）。

构建动态筛选函数

不要为每个条件写独立 if 判断，而是把所有启用的条件收集为一个函数数组，再用 every() 统一验证：

OpenJDK 24

下载

监听表单变化，实时收集当前有效筛选值（空字符串、undefined、null 视为不启用该条件）
对每个条件生成一个校验函数，例如价格区间：item => item.price >= min && item.price
把所有启用的校验函数存入数组，用 goods.filter(item => filters.every(fn => fn(item)))

示例代码片段：

function applyFilters(goods, filters) {
  const conditions = [];

  if (filters.category) {
    conditions.push(item => item.category === filters.category);
  }
  if (filters.brand) {
    conditions.push(item => item.brand === filters.brand);
  }
  if (filters.minPrice != null || filters.maxPrice != null) {
    const min = filters.minPrice ?? 0;
    const max = filters.maxPrice ?? Infinity;
    conditions.push(item => item.price >= min && item.price  item.name.toLowerCase().includes(kw));
  }
  if (filters.inStock) {
    conditions.push(item => item.stock > 0);
  }

  return conditions.length ? goods.filter(item => conditions.every(fn => fn(item))) : goods;
}