简介
在本实验中，我们将探讨在 JavaScript 中深度合并两个对象的概念。我们将创建一个函数，该函数可以接受两个对象，并以一种允许我们使用自定义函数处理两个对象中都存在的键的方式合并它们。在本实验结束时，你将能够使用自定义函数合并复杂对象并组合它们的值。
如何在 JavaScript 中深度合并对象
要在 JavaScript 中深度合并两个对象，你可以使用 deepMerge 函数。该函数接受两个对象和一个函数作为参数。这个函数用于处理两个对象中都存在的键。
以下是 deepMerge 函数的工作原理：
- 使用
Object.keys()获取两个对象的键，从它们创建一个Set，并使用展开运算符 (...) 创建一个包含所有唯一键的数组。 - 使用
Array.prototype.reduce()将每个唯一键添加到对象中，使用fn来合并两个给定对象的值。
以下是 deepMerge 函数的代码：
const deepMerge = (a, b, fn) =>
[...new Set([...Object.keys(a), ...Object.keys(b)])].reduce(
(acc, key) => ({ ...acc, [key]: fn(key, a[key], b[key]) }),
{}
);
要使用 deepMerge 函数，用两个对象和一个函数调用它。以下是一个示例：
deepMerge(
{ a: true, b: { c: [1, 2, 3] } },
{ a: false, b: { d: [1, 2, 3] } },
(key, a, b) => (key === "a" ? a && b : Object.assign({}, a, b))
);
// { a: false, b: { c: [ 1, 2, 3 ], d: [ 1, 2, 3 ] } }
在这个示例中，deepMerge 函数用于合并两个对象。结果对象包含了两个对象合并后的值。
总结
恭喜你！你已经完成了“深度合并对象”实验。你可以在 LabEx 中练习更多实验来提升你的技能。