JavaScript中如何根据对象属性值合并数组元素？

JavaScript数组元素合并技巧：基于对象属性值

在JavaScript开发中，经常需要处理包含嵌套对象和数组的复杂数据结构。一个常见需求是根据对象的特定属性值，将数组中的元素进行合并。

让我们来看一个例子：

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: -1 },
  { title: '标题5', url: 'url', groupid: 456 },
  { title: '标题6', url: 'url', groupid: 456 },
  { title: '标题6', url: 'url', groupid: 789 },
];

我们的目标是将groupid相同的对象合并成一个新的数组元素，并将groupid作为新元素的属性。如果groupid为-1，则删除该属性，并将对象添加到新数组中。

可以使用reduce方法高效地实现这一目标。reduce方法接收两个参数：累加器和当前元素，并返回一个新值。我们可以利用累加器构建新的数组，并比较当前元素与累加器中最后一个元素的groupid属性。

以下代码实现了这个功能：

const res = arr.reduce((previous, current) => {
  const lastIndex = previous.length - 1;
  const last = lastIndex >= 0 ? previous[lastIndex] : null;

  if (last && last.groupId === current.groupId) {
    // 合并具有相同 groupId 的元素
    if (last.group) {
      last.group.push({ ...current });
    } else {
      previous[lastIndex] = {
        groupId: last.groupId,
        group: [{ ...last }, { ...current }],
      };
    }
  } else {
    // 添加新的元素
    const newItem = { ...current };
    if (newItem.groupId === -1) delete newItem.groupId;
    previous.push(newItem);
  }
  return previous;
}, []);

这段代码有效地将具有相同groupid属性的对象合并，并处理了groupid为-1的特殊情况。最终结果res是一个新的数组，包含了合并后的元素。 这个方法简洁高效，充分利用了reduce方法的特性。