javascript - 如何使用扩展语法创建或替换对嵌套对象的编辑？

Question

对于简单的传播，我们可以像这样创建或替换:

let a = {1: "one", 2: "two"}; 
let b= {...a, ...{2: "too", 3: "three"}}
console.log(b); //{1: "one", 2: "too", 3: "three"}

我想做的是类似的东西，但在嵌套对象上:

let a = {
   title: "hello world", 
   nestedObject: {
      1: "one", 
      2: "two", 
   }
}; 

let b= {...a, ...{nestedObject: {2: "too", 3: "three"}}};
console.log(b); //Replaces the nested object entirely. 

我真正想要的结果是:

{
   title: "hello world", 
   nestedObject: {
      1: "one", 
      2: "too",
      3: "three" 
   }
}; 

我将如何实现这一目标？

Answer 1

我在 Redux reducer 中经常使用这种模式。我是这样做的:

let a = {
   title: "hello world", 
   nestedObject: {
      1: "one", 
      2: "two", 
   }
}; 

let b = {
    ...a,
    nestedObject: {
        ...a.nestedObject, 
        2: "too",
        3: "three"
    }
};
console.log(b); //Replaces the nested object entirely. 

请注意，我现在使用 nestedObject 作为属性名称，并将其设置为一个以 ...a.nestedObject 开头的新对象。

所以，这意味着:

• 添加a
中的所有内容
• 用新对象覆盖 nestedObject(因为它出现在 ...a 之后)
• 在新对象中，添加来自 a.nestedObject 的所有内容
• 然后通过 ...a.nestedObject 之后的 Prop 在 nestedObject 中添加(并覆盖任何现有的) Prop

如果您正在寻找可以在任何级别自动覆盖任何属性的东西，可以使用一些轻型 NPM 包，例如 deep-assign .它与 assign 相同，但递归地工作。