JavaScript常用数据处理函数groupBy 🔥

数据处理与分析中,对数据进行分组是非常常见的功能，不论是实际工作中，还是在面试的场景中应用十分广泛。尤其在函数式编程中 groupBy 十分常见。在 JavaScript 中 groupBy 也已经进入了 JS 的标准。

介绍

• groupBy 函数是一个用于对 数组元素 进行 分组 的实用函数。groupBy 允许我们指定分组条件，将数组的元素分为不同的组，用于数据处理或者展示

  const data = [
    { id: 1, type: 'A' },
    { id: 2, type: 'B' },
    { id: 3, type: 'A' },
    { id: 4, type: 'C' },
    { id: 5, type: 'B' },
  ];
  // const groupType = Object.groupBy(data, 'type') // ❌ 第二个参数必须是函数
  const groupType = Object.groupBy(data, (item) => item.type) // ✅ 按照类型进行分类， 并且 type 就是 group 的 key 值。
  // {
  //   A: [{…}, {…}]
  //   B: [{…}, {…}]
  //   C: [{…}]
  // }
  

实现一个按照给 key 据分组

虽然函数通用性更加广泛，但是复杂度比直接传递数据要稍微高一点，这里实现一个按照传递属性方式实现一个 groupBy

   function groupBy(arr, key) {
      return arr.reduce((acc, obj) => {
        const groupKey = obj[key];
        acc[groupKey] = acc[groupKey] || [];
        acc[groupKey].push(obj);
        return acc;
      }, {});
    }
// data 复用以上的 data
groupBy(data, 'type') // 输出结果与 Object.groupBy 一致

实现的核心思想就是 reduce 进行 累加。从 {} 对象开始，然后再对象上赋值对应key为空数组，符合这个key 的就进入此分组