如何按索引合并数组中的每个对象？

Question

如何合并两个相同长度的对象数组？

\n\n

var array1 = [\n  {name: "lang", value: "English"}, \n  {name: "age", value: "18"}\n];\nvar array2 = [\n  {code: "EN", text: "English language"}, \n  {code: "DE", value: "German", text: "German language"}\n];\n

\n\n

目标是创建以下数组：

\n\n

var array3 = [\n  {name: "lang", value: "English", code: "EN", text: "English language"}, \n  {name: "age", code: "DE", value: "German", text: "German language"}\n];\n

\n\n

这个想法是创建一个新数组，其中array1是基数和array2如果它们共享相同的键，则覆盖值，否则添加到基数组中。合并应该按照对象在每个数组中出现的顺序顺序进行。

\n\n

在这个例子中，数组包含两个对象，但对于我的实际情况，我有几十个对象。

\n\n

这就是我\xe2\x80\x99一直在尝试做的事情，但这仅合并第一组对象：

\n\n

var array3 = Object.assign(array1[0], array2[0]);\n

\n\n

我如何循环它或映射它？

\n

Answer 1

一个简单的map对象扩展语法就可以做到这一点。\n也可以使用对象扩展来代替Object.assign。\n分配给一个新的空对象以避免改变现有对象。

\n

\r\n

\r\n

var array1 = [\n    { name: "lang", value: "English" }, \n    { name: "age", value: "18" }\n  ];\nvar array2 = [\n    { code: "EN", text: "English language" }, \n    { code: "DE", value: "German", text: "German language" }\n  ];\n\nvar array3 = array1.map((obj, index) => ({\n    ...obj,\n    ...array2[index]\n  }));\nvar array3Alternative = array1.map((obj, index) => Object.assign({}, obj, array2[index]));\n\nconsole.log(array3);

\r\n

\r\n

\r\n

\n

Object.assign请注意，扩展模式和\xe2\x80\x99s 参数的顺序很重要：后面的属性会覆盖前面的属性。

\n

您还可以添加更多属性，例如默认属性：Object.assign({ code: "XX", value: "Default" }, obj, array2[index])或({ code: "XX", value: "Default", ...obj, ...array2[index] })。

\n

如果您想改变中的对象array1，以便将 中 的属性array2添加到 中array1，只需删除中 。\n然后，如果您\xe2\x80\x99不希望创建结果变量，建议将{},更改为a喜欢。Object.assign({}, obj, array2[index])mapforEacharray3

\n

如果您有未知数量的数组，如下所示：

\n

const arrays = [\n    array1,\n    array2,\n    array3,\n    // \xe2\x80\xa6\n  ];\n

\n

那么你可以使用这种方法：

\n

const mergedArray = Array.from({\n  length: arrays[0].length\n}, (_, index) => Object.assign({}, ...arrays.map(({[index]: obj}) => obj))));\n

\n

通过以下示例查看实际效果：

\n

\r\n

\r\n

const arrays = [\n    [\n      { a: 3, b: 5 },\n      { a: 7, b: 2 },\n      { a: 1 }\n    ],\n    [\n      { b: 8, c: 42 },\n      { a: 1, b: 12, c: 44 },\n      { b: 0 }\n    ],\n    [\n      { d: 14, e: 15 },\n      { d: 7 },\n      { a: 10 }\n    ]\n  ];\n\nconsole.log(Array.from({\n  length: arrays[0].length\n}, (_, index) => Object.assign({}, ...arrays.map(({[index]: obj}) => obj))));

\r\n

\r\n

\r\n

\n

请注意，这也适用于不同长度的数组。\n访问不存在的数组索引的结果值是undefined扩展语法，并Object.assign通过忽略它来处理它。\n只需确保从最长的数组开始，因此结果是 \xe2\x80\x99t 缺少任何对象。\n对于具有未知数量数组的代码片段来说，这更容易（即使它\xe2\x80\x99 总是两个）。\n而不是 ，arrays[0].length您只需要使用Math.max(...arrays.map(({ length }) => length)).

\n