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

Question

假设我有变量“state”和“newState”。我想创建一个纯函数，返回用“newState”的属性(和子属性)更新的“state”。这是一个例子:

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 :

The Rest/Spread Properties for ECMAScript proposal (stage 4) adds spread properties to object literals. It copies own enumerable properties from a provided object onto a new object.

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

The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.

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 级。如果您希望进行深度 合并，我建议您查看 this answer .

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

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