如何在JavaScript深层嵌套对象中动态插入属性且不覆盖原有内容

问题原因 #

• 第一种实现中Object.assign是浅合并，直接替换顶层date对应的整个对象，会把同日期下已有的其他表格数据全部覆盖
• 第二种实现用错了API：Object.defineProperty是用来配置对象属性的元信息（可写、可枚举等），不是用来给对象动态加属性的，且代码里的table是固定字符串键，不会读取参数值

正确实现代码 #

const insertTable = (date, table, slot, value = 'slotter') => {
  // 每层属性不存在时才初始化为空对象，已有属性直接复用避免覆盖
  tables[date] = tables[date] || {}
  tables[date][table] = tables[date][table] || {}
  tables[date][table][slot] = value
}

如果运行环境支持ES2020+的语法，可以用空值合并运算符写得更简洁：

const insertTable = (date, table, slot, value = 'slotter') => {
  tables[date] ??= {}
  tables[date][table] ??= {}
  tables[date][table][slot] = value
}

效果验证 #

调用你给出的测试用例后，tables对象最终结构如下，原有数据完全保留，新数据也正确插入：

{
  "2021-08-25": {
    "B0705": {
      "48": "heaven",
      "22": "slotter",
      "12": "slotter"
    },
    "B0704": {
      "48": "hell"
    },
    "B0706": {
      "33": "slotter"
    }
  },
  "2021-08-26": {
    "B0703": {
      "11": "slotter"
    }
  }
}

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