如何用JavaScript将数组中groupId属性值相同的对象组合成新的数组？-js教程-PHP中文网

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

霞舞

发布： 2025-02-20 09:30:14

原创

713人浏览过

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

问题描述：

给你一个 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 },
];

登录后复制

预期输出：

立即学习“Java免费学习笔记（深入）”；

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' }] },
];

登录后复制

解决方案：

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

查看详情

我们可以使用 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 数组包含了分组后的对象。

以上就是如何用JavaScript将数组中groupId属性值相同的对象组合成新的数组？的详细内容，更多请关注php中文网其它相关文章！