如何按指定属性值将对象数组拆分为同值分组的对象数组？

这问题我平时开发中经常碰到，用JavaScript的Array.prototype.reduce()就能轻松搞定，这是处理数组分组需求的标准操作。

核心逻辑 #

简单来说，我们用一个空对象当“分组容器”，遍历数组里的每个元素时：

• 拿目标属性的值当分组的“键”（比如按name分组的话，就用每个元素的name值当键）
• 如果容器里还没有这个键对应的数组，就先初始化一个空数组
• 把当前元素添加到这个键对应的数组里
• 最后返回这个装满分组数组的容器

实战代码示例 #

先拿你给出的users数组举例，假设我们要按name属性分组：

var users = [
  { action: 'search', time: 1487098109, name: 'Charlie' },
  { action: 'search', time: 1487184715, name: 'Charlie' },
  { action: 'search', time: 1487184755, name: 'John' },
  { action: 'search', time: 1487271527, name: 'John' },
  { action: 'search', time: 1487271527, name: 'Mark' },
  { action: 'search', time: 1487271537, name: 'Mark' },
  { action: 'c', time: 1487098139, name: 'Mike' },
  { action: 'b', time: 1487098169, name: 'Mike' }
];

// 通用分组函数，参数是目标数组和要分组的属性名
function groupBy(arr, property) {
  return arr.reduce((groupContainer, currentItem) => {
    // 获取当前元素的目标属性值作为分组键
    const groupKey = currentItem[property];
    // 如果该分组还不存在，先创建空数组
    if (!groupContainer[groupKey]) {
      groupContainer[groupKey] = [];
    }
    // 把当前元素加入对应分组
    groupContainer[groupKey].push(currentItem);
    return groupContainer;
  }, {}); // 初始的分组容器是空对象
}

// 按name分组的调用示例
const groupedByName = groupBy(users, 'name');
console.log(groupedByName);

运行后，groupedByName的结构会是这样：

{
  Charlie: [
    { action: 'search', time: 1487098109, name: 'Charlie' },
    { action: 'search', time: 1487184715, name: 'Charlie' }
  ],
  John: [
    { action: 'search', time: 1487184755, name: 'John' },
    { action: 'search', time: 1487271527, name: 'John' }
  ],
  Mark: [
    { action: 'search', time: 1487271527, name: 'Mark' },
    { action: 'search', time: 1487271537, name: 'Mark' }
  ],
  Mike: [
    { action: 'c', time: 1487098139, name: 'Mike' },
    { action: 'b', time: 1487098169, name: 'Mike' }
  ]
}

灵活扩展：换属性分组 #

如果需要按action属性分组，只需要改一下函数参数就行：

const groupedByAction = groupBy(users, 'action');

额外需求：只拿分组后的数组列表 #

如果你想要的是独立的多个数组（而不是带键的对象），可以用Object.values()提取容器里的所有值：

const separateArrays = Object.values(groupedByName);
console.log(separateArrays);
// 输出：[[Charlie的元素数组], [John的元素数组], [Mark的元素数组], [Mike的元素数组]]

这样就完全满足你“按某一属性的相同值拆分为多个对象数组”的需求啦。

内容的提问来源于stack exchange，提问作者hackrack