JavaScript如何修改嵌套对象数组中指定元素的count属性值

现有代码的问题 #

你的代码核心问题是完全破坏了原数组的外层结构：

• 你对外层分组数组执行map操作时，直接将原分组对象（包含category、id、data三个属性）替换为了element.data.map(...)的返回值，最终得到的结果是一个仅包含商品数据的二维数组，丢失了原有的分组信息，和预期结构完全不符。
• 另外如果你需要修改原dup数组，需要将函数返回的新数组重新赋值给dup变量，否则原数组不会发生变更。

正确实现 #

实现逻辑是：遍历外层分组时保留所有分组属性，仅修改分组下的data字段；再遍历data中的商品，匹配到对应id时更新count即可：

function getNewCartItems() {
  return dup.map(category => {
    // 保留当前分组的全部原有属性，仅更新data字段
    return {
      ...category,
      data: category.data.map(item => {
        return item.id === action.item.id ? {...item, count: item.count + 1} : item
      })
    }
  })
}

// 如果需要修改原dup数组，调用时执行赋值即可
// dup = getNewCartItems()

如果存在不同分类下商品id重复的情况，可以额外加上分组id的匹配逻辑，避免误改其他分类下的同名id商品。

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