如何获取reduce()方法转换后的指定分类数组

你当前代码的核心错误是reduce方法的初始值类型和目标数据结构不匹配：

• 你需要的是「分类名作为key、对应分类商品数组作为value」的映射结构，却给reduce传了空数组[]作为初始值
• JS中数组本质是特殊对象，确实可以挂载字符串key的自定义属性，但这种写法会导致数组length统计异常、JSON序列化丢失自定义属性、forEach/map等原生数组遍历方法读不到挂载的分类数据，属于不推荐的取巧写法。

方案1：使用对象作为分组结果（最贴合你按key取数组的需求） #

直接把reduce初始值替换为空对象{}，生成标准的键值对映射结构，取值完全符合你的预期：

const newProductsDetail = [/* 你的原始商品数组 */]
const groupedProducts = newProductsDetail.reduce((acc, curr) => {
  const { categoryName } = curr
  if (!acc[categoryName]) {
    acc[categoryName] = []
  }
  acc[categoryName].push(curr)
  return acc
}, {}) // 初始值从[]改为{}

取值方式非常直接，传入分类名即可拿到对应数组：

// 例如获取「家用电器」分类下的所有商品
const homeApplianceList = groupedProducts["家用电器"]

方案2：输出纯数组结构（适合后续直接遍历渲染分类板块） #

如果你希望最终结果是标准数组，不需要按键名查值，可以调整reduce逻辑，每个数组元素存储分类名和对应商品列表：

const categoryList = newProductsDetail.reduce((acc, curr) => {
  const { categoryName } = curr
  const targetCategory = acc.find(item => item.categoryName === categoryName)
  if (targetCategory) {
    targetCategory.list.push(curr)
  } else {
    acc.push({
      categoryName,
      list: [curr]
    })
  }
  return acc
}, [])

这种结构的取值需要先匹配分类名：

// 获取「食品生鲜」分类下的商品数组
const foodList = categoryList.find(item => item.categoryName === "食品生鲜")?.list

注意：不要继续使用给数组挂载自定义属性的写法，该写法在数据序列化、数组方法调用时大概率出现非预期bug。

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