JS中的groupBy

手动实现

• 使用 reduce 方法实现 groupBy 函数来实现将数组中的元素根据某个属性或条件分组

const groupBy = (array, key) => {
  return array.reduce((result, element) => {
    // 使用 key 函数获取分组的键
    const groupKey = key(element);
    
    // 如果结果对象中没有这个键，就创建一个空数组
    if (!result[groupKey]) {
      result[groupKey] = [];
    }
    
    // 将元素添加到对应的数组中
    result[groupKey].push(element);
    
    return result;
  }, {});
};

const people = [
  { name: 'John', age: 20 },
  { name: 'Jane', age: 20 },
  { name: 'Jim', age: 30 },
  { name: 'Joan', age: 30 }
];

// 使用 groupBy 方法
const peopleByAge = groupBy(people, person => person.age);

console.log(peopleByAge);

// `groupBy` 函数接收两个参数：一个数组和一个函数，这个函数用于从数组的每个元素中提取分组的键。
// `reduce` 方法遍历数组，为每个不同的键创建一个新数组，并将具有相同键的元素添加到对应的数组中。
// 输出

{
  '20': [
    { name: 'John', age: 20 },
    { name: 'Jane', age: 20 }
  ],
  '30': [
    { name: 'Jim', age: 30 },
    { name: 'Joan', age: 30 }
  ]
}

原生支持 Object.groupBy

• ECMAScript 2024（ES15）提案已加入 Object.groupBy 方法
• 注意目前需要谷歌浏览器117以上的版本才能运行

const people = [
  { name: 'John', age: 20 },
  { name: 'Jane', age: 20 },
  { name: 'Jim', age: 30 },
  { name: 'Joan', age: 30 }
];

// 调用
const peopleByAge = Object.groupBy(people, person => person.age);
console.log(peopleByAge);

// 输出
{
  '20': [
    { name: 'John', age: 20 },
    { name: 'Jane', age: 20 }
  ],
  '30': [
    { name: 'Jim', age: 30 },
    { name: 'Joan', age: 30 }
  ]
}