JavaScript如何将对象数组转为嵌套对象及??=语法报错如何解决

报错原因 #

你遇到的编译报错是因为逻辑空赋值运算符??=属于ES2021新增语法，你当前项目的Babel转译配置没有包含对应语法的支持，因此webpack无法识别该语法。

兼容旧环境的最优实现 #

你写的两种实现逻辑都是正确的，只需要把??=替换为普通的属性存在性判断即可适配现有环境，不需要额外修改配置。

reduce版本（更推荐的函数式写法） #

const result = items.reduce((acc, curr) => {
  if (!acc[curr.mod]) {
    acc[curr.mod] = {}
  }
  acc[curr.mod][curr.part] = curr.price
  return acc
}, {})

forEach版本 #

const structure = {}
items.forEach(item => {
  if (!structure[item.mod]) {
    structure[item.mod] = {}
  }
  structure[item.mod][item.part] = item.price
})

补充说明：map方法的设计目的是将原数组的每一项做映射转换，返回等长的新数组，不适合用来做聚合为单个对象的场景，因此你之前尝试用map无法构建嵌套结构是正常的。

保留??=语法的配置方案 #

如果想要继续使用新语法，需要给Babel添加对应转译插件：

1. 安装依赖：

npm install --save-dev @babel/plugin-proposal-logical-assignment-operators

2. 在项目Babel配置文件的plugins数组中添加插件：

{
  "plugins": ["@babel/plugin-proposal-logical-assignment-operators"]
}

3. 重启开发服务即可生效。

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