如何将price_range筛选器默认最小值设为商品集合内最低价

• 已实现双输入框形态的价格区间筛选组件，组件效果参考：
• 当前配置逻辑：筛选器价格上限默认取对应商品集合内的最高商品售价，价格下限默认固定为0
• 需求目标：获取商品集合内的最低商品售价，将其设置为price_range筛选器的默认最小值

具体实现步骤 #

第一步：从商品集合中计算有效最低价格 #

拿到当前筛选维度下的全量商品数据集后，遍历提取所有有效商品价格，计算最小值即可，核心逻辑参考如下JS代码（其他语言逻辑一致，替换对应语法即可）：

// 入参goodsList为当前维度下的全量商品列表，price字段为商品实际售价
const priceList = goodsList
  .map(item => Number(item.price))
  // 过滤无效价格：非数字、0元赠品/非卖品、异常负价格
  .filter(price => !isNaN(price) && price > 0)

// 计算有效价格的最值，无有效商品时兜底为0
const minPrice = priceList.length ? Math.min(...priceList) : 0
const maxPrice = priceList.length ? Math.max(...priceList) : 0

第二步：绑定为筛选器默认值 #

将计算得到的minPrice直接绑定为price_range筛选器最小输入框的初始值，替换原来写死的0默认值即可。

注意事项 #

• 如果商品集合是动态变化的（比如切换商品分类、切换搜索关键词、叠加其他筛选条件），每次商品列表更新后都要重新执行最值计算，同步更新价格筛选的上下限，避免出现筛选区间和当前商品集不匹配的问题
• 价格计算时要处理浮点数精度问题，如果商品价格保留2位小数，计算完成后可以用Number(minPrice.toFixed(2))做格式处理，避免出现9.999999998这类异常显示值
• 给输入框加校验规则：用户手动输入的最小值不能小于当前商品集最低售价，最大值不能大于当前商品集最高售价，且输入的最小值不能大于最大值，避免无效筛选

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