如何在JavaScript数组中提取各产品的最低价条目

核心思路 #

• 按产品唯一标识（如名称、SKU）分组，将同款产品归为同一组
• 遍历每组，筛选出价格最低的条目
• 将筛选结果转为数组，更新React状态或直接使用

具体实现代码 #

假设你的产品数组通过useState定义，结构如下：

const [products, setProducts] = useState([
  { id: 1, name: 'OPPO', price: 2999, specs: '8+128G' },
  { id: 2, name: 'OPPO', price: 2799, specs: '6+128G' },
  { id: 3, name: 'Iphone XS MAX PRO 512GB', price: 8999, color: '黑色' },
  { id: 4, name: 'Iphone XS MAX PRO 512GB', price: 8799, color: '白色' },
]);

实现筛选逻辑的函数：

const getLowestPriceProducts = () => {
  // 1. 按产品名称分组
  const groupedProducts = products.reduce((acc, product) => {
    const key = product.name;
    acc[key] = acc[key] || [];
    acc[key].push(product);
    return acc;
  }, {});

  // 2. 每组筛选最低价条目
  const lowestPriceList = Object.values(groupedProducts).map(group => {
    return group.reduce((prev, curr) => {
      // 若价格为字符串类型，需先转数字：parseFloat(prev.price) < parseFloat(curr.price)
      return prev.price < curr.price ? prev : curr;
    });
  });

  // 3. 更新状态（按需使用，也可直接返回结果）
  setProducts(lowestPriceList);
  return lowestPriceList;
};

补充说明 #

• 若判断同款的标识不是name，可替换为业务中唯一的字段（如productId）
• 若价格是带单位的字符串（如"2999元"），需先去除单位再转数字比较
• 可在组件挂载时（useEffect）调用该函数，或在产品数组更新后触发筛选

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