JavaScript数组对象分组方法

本文介绍如何使用JavaScript将数组中`groupid`属性值相同的对象组合成新的数组。通过`reduce`函数，可以高效地迭代数组，将具有相同`groupid`的对象分组。文章提供了详细的代码示例和步骤说明，包括输入示例、预期输出和代码解读，帮助开发者快速理解并应用此方法，解决对象数组分组的常见问题。 学习本教程，你将掌握JavaScript数组处理技巧，提升代码效率。

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

问题描述：

给你一个 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 数组包含了分组后的对象。

今天关于《JavaScript数组对象分组方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！