JavaScript使用扩展运算符更新对象时如何访问嵌套子对象属性

错误写法原因 #

你写的['helloworldobj'['hello']]存在逻辑错误：实际是对字符串'helloworldobj'取'hello'下标，字符串不存在该下标，最终会得到undefined作为新对象的键，自然无法实现修改嵌套子属性的效果。

正确实现代码 #

要修改嵌套子对象的属性，你需要对子对象也做一次扩展运算，先保留原有子属性再覆盖需要修改的内容即可，示例如下：

let obj = {
   helloworld:'hello',
   helloworldobj:{
     hello:'hello',
     world: 'world',
   }
}

// 同时修改首层属性和嵌套子属性的正确写法
const updatedObj = {
  ...obj,
  helloworld: 'helloworld',
  helloworldobj: {
    ...obj.helloworldobj, // 展开原有子对象的所有属性
    hello: 'hello2' // 覆盖需要修改的子属性
  }
}

console.log(updatedObj)

注意事项 #

• 该写法是不可变更新，不会修改原始obj对象，符合函数式编程的数据修改规范
• 如果对象嵌套层级更深，每一层都需要对应做一次扩展运算；日常开发如果嫌嵌套写法繁琐，也可以使用工具类的属性设置方法，注意如果工具方法是可变实现，需要先对原始对象做深拷贝避免污染原数据。

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