如何合并数组中的不同对象？JavaScript代码场景求助

解决方法：合并数组内的两个对象（不同键也完全支持） #

其实你可能误解了Object.assign()和扩展运算符...的能力——它们完全可以合并拥有不同键名的对象，只会在键名重复时覆盖旧值，不同键的属性都会被完整保留。你的问题应该是在map函数里的返回值处理有误，没有正确把两个对象合并成单个对象，而是返回了包含两个对象的数组。

下面是两种可行的实现方式，直接修改你的map函数即可：

方法1：使用扩展运算符（推荐，语法更简洁）

把原来返回数组的逻辑改成返回合并后的对象：

const variants = post.variations.nodes.map(function (variantItem) {
  // 合并attributes节点和featuredImage节点的所有属性，保留localFile嵌套结构
  return {
    ...variantItem.attributes.nodes[0],
    ...variantItem.featuredImage.node
  };
});

方法2：使用Object.assign()

如果更习惯这种写法，效果和扩展运算符完全一致：

const variants = post.variations.nodes.map(function (variantItem) {
  // 第一个空对象是为了避免修改原对象，后续参数按顺序传入要合并的对象
  return Object.assign(
    {},
    variantItem.attributes.nodes[0],
    variantItem.featuredImage.node
  );
});

合并结果示例

用你提供的测试数据来看，输入的子数组是：

[
  {"name":"color","value":"red","id":"colorID"},
  {"altText":"","uri":"someURL","id":"someID","localFile":{"childImageSharp":{"fluid":{"fluidData":"someString","fluidData2":1.567}}}}
]

合并后会得到：

{
  "name": "color",
  "value": "red",
  "id": "someID", // 注意：两个对象都有id键，后面的对象（featuredImage）会覆盖前面的
  "altText": "",
  "uri": "someURL",
  "localFile": {
    "childImageSharp": {
      "fluid": {
        "fluidData": "someString",
        "fluidData2": 1.567
      }
    }
  }
}

⚠️ 额外提示：如果两个对象存在相同键名（比如这里的id），后面的对象属性会覆盖前面的，这是合并操作的默认行为。如果需要保留两个id，可以手动重命名其中一个，比如：

return {
  ...variantItem.attributes.nodes[0],
  imageId: variantItem.featuredImage.node.id, // 把图片的id重命名为imageId
  ...variantItem.featuredImage.node,
  id: variantItem.attributes.nodes[0].id // 强制保留原attributes的id
};

内容的提问来源于stack exchange，提问作者Martin Conde