如何用JavaScript将数组中groupId属性值相同的对象组合成新的数组？

如何将数组中对象属性值相等的元素组合成新数组

问题描述：

给你一个 javascript 数组 arr，其中包含具有 groupid 属性的对象。你的任务是将对象属性值相等的元素组合成一个新的数组。

输入示例：

const arr = [
  { title: '标题1', url: 'url', groupid: -1 },
  { title: '标题2', url: 'url', groupid: 123 },
  { title: '标题3', url: 'url', groupid: 123 },
  { title: '标题4', url: 'url', groupid: 456 },
  { title: '标题5', url: 'url', groupid: 456 },
];

预期输出：

const res = [
  { title: '标题1', url: 'url' },
  { groupid: 123, group: [{ title: '标题2', url: 'url' }, { title: '标题3', url: 'url' }] },
  { title: '标题4', url: 'url' },
  { groupid: 456, group: [{ title: '标题4', url: 'url' }, { title: '标题5', url: 'url' }] },
];

解决方案：

我们可以使用 reduce 函数来完成此任务：

const res = arr.reduce((previous, current) => {
  const len = previous.length;
  const last = len && previous[len - 1];

  if (last.groupId === current.groupId) {
    if (last.group) {
      last.group.push({ ...current });
    } else {
      previous[len - 1] = {
        groupId: last.groupId,
        group: [{ ...last }, { ...current }],
      };
    }
  } else {
    if (current.groupId === -1) delete current.groupId;
    previous.push(current);
  }

  return previous;
}, []);

理解代码：

• reduce 函数是一个高阶函数，它使用指定的函数（在本例中为箭头函数）来累积数组中的元素并返回一个单一的值。

• 在我们的箭头函数的实现中，我们检查当前元素 current 的 groupid 是否与前一个元素 last 的 groupid 相等：

  • 如果相等，我们就将 current 添加到 last 的 group 数组中。
  • 如果不相等，我们就检查 current 的 groupid 是否为 -1。如果是 -1，我们就删除 groupid 属性，然后将 current 添加到 previous 数组中。

最终，res 数组包含了分组后的对象。