如何合并数组中拥有相同path键的嵌套对象的value值？

我想要返回一个数组，其中的对象包含数组内拥有相同path值的其他对象的value值。

原始updates数组 #

updates: [
  {
    path: "foo",
    value: {
      currency: "USD",
    },
  },
  {
    path: "foo",
    value: {
      amount: "10000",
    },
  },
  {
    path: "bar",
    value: {
      currency: "AED",
    },
  },
  {
    path: "bar",
    value: {
      amount: "10",
    },
  },
]

期望输出 #

updates: [
  {
    path: "foo",
    value: {
      currency: "USD",
      amount: "10000"
    },
  },
  {
    path: "bar",
    value: {
      currency: "AED",
      amount: "10"
    },
  },
]

我尝试用lodash实现：

var result = _(updates)
  .groupBy('path')
  .map(_.spread(_.assign))
  .value();

但没有得到嵌套对象的合并值，反而得到了：

[
  { action: 'set', path: 'fellowStipend', value: { amount: '10000' } },
  {
    action: 'set',
    path: 'professionalDevelopmentAllowance',
    value: { amount: '10' }
  }
]

解决方案 #

你用的_.assign是浅拷贝合并，遇到嵌套的value对象时，后面的对象会直接覆盖前面的，而非合并内部属性。可以改用_.merge实现深合并：

Lodash实现

var result = _(updates)
  .groupBy('path')
  .map(_.spread(_.merge))
  .value();

_.merge会递归合并对象的嵌套属性，能把相同path下的value对象属性全部合并。

原生JavaScript实现

如果不想依赖lodash，也可以用原生JS实现：

const result = Object.values(
  updates.reduce((acc, curr) => {
    if (!acc[curr.path]) {
      acc[curr.path] = { ...curr };
    } else {
      acc[curr.path].value = { ...acc[curr.path].value, ...curr.value };
    }
    return acc;
  }, {})
);

通过reduce遍历数组按path分组，遇到相同path时合并value对象的属性，最后用Object.values将结果转为数组。

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