JavaScript中如何使用扩展运算符更新数组对象内的嵌套属性

问题根因 #

• 你操作的目标是数组内的第一个对象元素，直接对array做对象展开{...array}会把数组转为以索引为键的普通对象，完全没有命中要修改的目标元素
• street/road是address对象下的二级属性，直接在外层对象设置[props]: value只会新增一级属性，不会修改嵌套字段

正确实现代码 #

let array = [{
  name: "lol",
  age: "15",
  address: {
    street: "ABC street",
    road: "123"
  }
}]

const onChange = (props, value) => {
  // 浅拷贝数组，避免修改原数组
  const newArray = [...array]
  // 浅拷贝要修改的目标元素（这里默认修改数组第一个元素，有多元素需求可自行传入索引参数）
  const target = {...newArray[0]}
  
  if (Reflect.has(target, props)) {
    // 匹配到一级属性直接修改
    target[props] = value
  } else if (Reflect.has(target.address, props)) {
    // 匹配到address下的嵌套属性，先展开原有address再覆盖对应字段
    target.address = {
      ...target.address,
      [props]: value
    }
  }

  newArray[0] = target
  console.log(newArray)
  return newArray
}

onChange("street", 10)
// 执行后newArray[0].address.street更新为10，无新增一级属性
onChange("name", "test")
// 一级属性name正常更新为test

逻辑说明 #

• 所有修改都基于浅拷贝生成新对象/数组，符合React等框架的immutable数据更新要求，不会触发意料外的副作用
• 自动适配一级属性和address下的二级属性修改，不需要额外传参区分属性层级
• 嵌套属性更新时必须展开原有address对象，否则会丢失address内未修改的其他字段

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