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

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

霞舞

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

原创

719人浏览过

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

问题描述：

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

登录后复制

解决方案：

网龙b2b仿阿里巴巴电子商务平台

本系统经过多次升级改造，系统内核经过多次优化组合，已经具备相对比较方便快捷的个性化定制的特性，用户部署完毕以后，按照自己的运营要求，可实现快速定制会费管理，支持在线缴费和退费功能财富中心，管理会员的诚信度数据单客户多用户登录管理全部信息支持审批和排名不同的会员级别有不同的信息发布权限企业站单独生成，企业自主决定更新企业站信息留言、询价、报价统一管理，分系统查看分类信息参数化管理，支持多样分类信息，

查看详情

我们可以使用 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中文网其它相关文章！