React中如何筛选数组内符合特定条件的商品数据

技术场景 #

从购物车获取orderForm数组，数据结构如下：

[
  {
    attachmentOfferings: [],
    attachments: [],
    availability: "available",
    bundleItems: [],
    id: "38811",
    listPrice: 34900,
    productCategories: {
      84: "Panties",
      157: "shorts"
    }
  },
  {
    attachmentOfferings: [],
    attachments: [],
    availability: "available",
    bundleItems: [],
    id: "33611",
    listPrice: 39900,
    productCategories: {
      85: "Tops",
      157: "long"
    }
  }
]

现有代码及结果 #

当前已通过以下代码获取去重后的productCategories：

const mediaTypes = orderForm.items
  .map(dataItem => dataItem.productCategories)
  .filter((mediaType, index, array) => array.indexOf(mediaType) === index);

得到结果：

[
    {
        "84": "Panties",
        "157": "shorts"
    },
    {
        "84": "Panties",
        "158": "Briefs"
    },
    {
        "85": "Tops",
        "187": "long"
    }
]

问题 #

如何筛选出仅属于“Panties”分类且listPrice低于699的商品？

解决方案 #

可以使用Array.filter()结合对象值判断来实现：

// 筛选属于Panties分类且价格低于69900（对应699元）的商品
const filteredItems = orderForm.items.filter(item => {
  // 检查商品分类中是否包含Panties
  const belongsToPanties = Object.values(item.productCategories).includes('Panties');
  // 检查价格是否符合要求
  const priceIsValid = item.listPrice < 69900;
  // 同时满足两个条件才保留
  return belongsToPanties && priceIsValid;
});

说明 #

• Object.values(item.productCategories)将分类对象的所有值转为数组，方便用includes()判断是否包含目标分类
• 价格判断部分，根据示例中listPrice的数值格式（34900对应349元），阈值设为69900；如果你的价格单位是元，直接改为item.listPrice < 699即可
• filter()方法会返回所有符合条件的商品对象，直接使用这个结果即可

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