创建一个纯函数来合并对象

Question

假设我有变量“state”和“newState”。我想创建一个纯函数，它返回使用“newState”的属性（和子属性）更新的“状态”。这是一个例子：

const state = {id:1, name:'aName', description: 'aDescription'};

const newState = {id:1, name:'newName', subItems: {id:3, type:'whatever'}};

函数将返回：

{id:1, name:'newName', subItems: {id:3, type:'whatever'}}

我可以使用其余参数，但我不知道如何追加而不是覆盖。我不能只循环属性，因为我希望函数是纯的（redux reducer）。

有人有什么想法吗？

Answer 1

您可以使用spread syntax:

ECMAScript 提案（第 4 阶段）的 Rest/Spread 属性将扩展属性添加到对象字面量。它将自己的可枚举属性从提供的对象复制到新对象。

...或Object.assign，第一个参数是一个空对象：

Object.assign() 方法用于将所有可枚举自身属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

const state = {id:1, name:'aName', description: 'aDescription'};
const newState = {id:1, name:'newName', subItems: {id:3, type:'whatever'}};

// Example with spread syntax:
const result1 = { ...state, ...newState };

// Example with Object.assign:
// @NOTE: Providing an empty `{}` as the 1st argument,
// ensures you don't mutate `state`.
const result2 = Object.assign({}, state, newState);

console.log(result1);
console.log(result2);

旁注：

• 扩展@user633183 的评论，两种方式都会产生浅 合并。它们只深入 1 级。如果您希望进行 deep 合并，我建议您查看this answer。

• 在撰写本文时，Object.assign 具有比对象字面量上的扩展语法更好的跨浏览器支持，如您所见 here。如果您正确使用Babel 或任何其他转译器，这应该不是问题，但值得一提。

• 我们通常不将函数称为不可变的（实际上它们可以是不可变的，因为它们本身就是值，但这可能不是您在问题上下文中的意思）。值可以是不可变的，函数可以是纯的；这意味着它们不会引起副作用，例如改变它们的论点。

Answer 2

Object.assign 可能有助于更新state：

const state = {id:1, name:'aName', description: 'aDescription'};

const newState = {id:1, name:'newName', subItems: {id:3, type:'whatever'}};

Object.assign(state,newState)//<-- updates state

console.log(state)

正如 NicholasKyriakides 指出的那样，要创建一个新对象，您应该在开头添加 {}。