如何将数组中对象属性值相等的元素组合成新数组
问题描述:
给你一个 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' }] },
];解决方案:
我们可以使用 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 数组包含了分组后的对象。










