JavaScript 对象合并 | 编程教程

简介

在本实验中，我们将探索 JavaScript 中合并对象的过程。本实验将引导你逐步完成通过组合两个或更多对象来创建新对象的步骤。你将学习如何使用 Array.prototype.reduce() 和 Object.keys() 来遍历对象和键，以及使用 Object.prototype.hasOwnProperty() 和 Array.prototype.concat() 来合并现有键的值。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 100%。获得了学习者 100% 的好评率。

对象合并函数

要合并两个或更多对象，请按以下步骤操作：

打开终端/SSH 并输入 node 开始编码。
使用 Array.prototype.reduce() 以及 Object.keys() 遍历所有对象和键。
使用 Object.prototype.hasOwnProperty() 和 Array.prototype.concat() 为多个对象中存在的键追加值。
使用给定的代码片段通过组合两个或更多对象来创建一个新对象。

const merge = (...objs) =>
  [...objs].reduce(
    (acc, obj) =>
      Object.keys(obj).reduce((a, k) => {
        acc[k] = acc.hasOwnProperty(k)
          ? [].concat(acc[k]).concat(obj[k])
          : obj[k];
        return acc;
      }, {}),
    {}
  );

例如，考虑以下对象：

const object = {
  a: [{ x: 2 }, { y: 4 }],
  b: 1
};
const other = {
  a: { z: 3 },
  b: [2, 3],
  c: "foo"
};

当你使用 merge() 函数合并这两个对象时，会得到以下结果：

merge(object, other);
// { a: [ { x: 2 }, { y: 4 }, { z: 3 } ], b: [ 1, 2, 3 ], c: 'foo' }

总结

恭喜你！你已经完成了“合并对象”实验。你可以在 LabEx 中练习更多实验来提升你的技能。

使用 Reduce 和 Concat 合并 JavaScript 对象

简介

对象合并函数

总结