js数组分组，javascript实现数组的按属性分组

在JavaScript中，有多种方法可以对数组按属性进行分组。以下是至少6种常见的方法：

6种方法的使用场景和优缺点的简要描述：

1. 使用reduce()方法：

   • 使用场景：适用于需要对数组进行聚合操作的情况，可以自定义聚合逻辑。
   • 优点：灵活性高，可以自定义聚合逻辑；可以同时对多个属性进行分组。
   • 缺点：代码相对复杂，需要熟悉reduce()方法的使用。

2. 使用forEach()方法：

   • 使用场景：适用于简单的分组需求，不需要自定义聚合逻辑。
   • 优点：简单易懂，代码量较少。
   • 缺点：无法同时对多个属性进行分组；不支持链式操作。

3. 使用map()方法和Object.create(null)：

   • 使用场景：适用于需要创建一个纯净的空对象作为分组结果的情况。
   • 优点：可以创建一个没有原型链的空对象，避免可能的属性冲突。
   • 缺点：相对于使用普通对象，性能稍差。

4. 使用Map对象：

   • 使用场景：适用于需要对分组结果进行进一步操作的情况，如遍历、删除、更新等。
   • 优点：支持对分组结果进行灵活的操作；可以同时对多个属性进行分组。
   • 缺点：相对于普通对象，Map对象的性能稍差。

5. 使用lodash库的groupBy()方法：

   • 使用场景：适用于使用lodash库的项目，或者需要使用其他lodash库的功能。
   • 优点：简单易用，代码量少；lodash库提供了丰富的其他功能。
   • 缺点：引入了额外的库，增加了项目的依赖。

6. 使用ES6的Map和箭头函数：

   • 使用场景：适用于需要使用ES6的特性，或者需要对分组结果进行进一步操作的情况。
   • 优点：支持对分组结果进行灵活的操作；可以同时对多个属性进行分组；使用了ES6的特性。
   • 缺点：相对于普通对象，Map对象的性能稍差。

根据具体的需求和项目环境，选择适合的方法可以提高代码的可读性和性能。对于简单的分组需求，可以选择forEach()方法或lodash库的groupBy()方法；对于复杂的分组需求，可以选择reduce()方法、Map对象或ES6的Map和箭头函数。

1. 使用reduce()方法封装的方法：

这种方法使用reduce()方法来对数组进行迭代，并根据指定的属性值将元素分组。它使用一个空对象作为初始值，然后在迭代过程中，根据属性值将元素添加到相应的分组中。

首先创建一个空对象，用于存储分组结果。
使用for循环遍历数组中的每个元素。
在每次迭代中，使用if语句检查当前元素的属性值是否已经存在于分组对象中。
如果属性值不存在，就创建一个新的属性，并将当前元素添加到该属性对应的数组中。
如果属性值已经存在，就将当前元素添加到该属性对应的数组中。
最后返回分组对象。

使用示例：

const arr = [
  {
    
     name: 'Alice', age: 20, gender: 'female' },
  {
    
     name: 'Bob', age: 25, gender: 'male' },
  {
    
     name: 'Charlie', age: 20, gender: 'male' },
  {
    
     name: 'David', age: 30, gender: 'male' },
  {
    
     name: 'Eve', age: 25, gender: 'female' }
];

const result = groupByReduce(arr, 'age');
console.log(result);

输出结果：

{
    
    
  '20': [
    {
    
     name: 'Alice', age: 20, gender: 'female' },
    {
    
     name: 'Charlie', age: 20, gender: 'male' }
  ],
  '25': [
    {
    
     name: 'Bob', age: 25, gender: 'male' },
    {
    
     name: 'Eve', age: 25, gender: 'female' }
  ],
  '30': [
    {
    
     name: 'David', age: 30, gender: 'male' }
  ]
}

2. 使用forEach()方法封装的方法：

这种方法使用forEach()方法对数组进行迭代，并根据指定的属性值将元素分组。它使用一个空对象作为初始值，然后在迭代过程中，根据属性值将元素添加到相应的分组中。

使用reduce方法对数组进行迭代，并传入一个初始值为空对象。
在每次迭代中，使用初始值作为累加器，并根据当前元素的属性值，将元素添加到相应的属性数组中。
最后返回累加器，即分组结果。

使用示例：

const arr = [
  {
    
     name: 'Alice', age: 20, gender: 'female' },
  {
    
     name: 'Bob', age: 25, gender: 'male' },
  {
    
     name: 'Charlie', age: 20, gender: 'male' },
  {
    
     name: 'David', age: 30, gender: 'male' },
  {
    
     name: 'Eve', age: 25, gender: 'female' }
];

const result = groupByForEach(arr, 'gender');
console.log(result);

输出结果：

{
    
    
  female: [
    {
    
     name: 'Alice', age: 20, gender: 'female' },
    {
    
     name: 'Eve', age: 25, gender: 'female' }
  ],
  male: [
    {
    
     name: 'Bob', age: 25, gender: 'male' },
    {
    
     name: 'Charlie', age: 20, gender: 'male' },
    {
    
     name: 'David', age: 30, gender: 'male' }
  ]
}

3. 使用map()方法和Object.create(null)封装的方法：

这种方法使用map()方法对数组进行迭代，并根据指定的属性值将元素分组。它使用Object.create(null)创建一个没有原型的空对象作为初始值，然后在迭代过程中，根据属性值将元素添加到相应的分组中。

创建一个空的Map对象，用于存储分组结果。
使用forEach方法对数组进行迭代。
在每次迭代中，根据当前元素的属性值，使用Map对象的get方法获取对应的属性数组。
如果属性数组不存在，就创建一个新的属性数组，并将当前元素添加到该数组中。
如果属性数组已经存在，就将当前元素添加到该数组中。
最后将分组结果转换为普通对象，并返回。

使用示例：

const arr = [
  {
    
     name: 'Alice', age: 20, gender: 'female' },
  {
    
     name: 'Bob', age: 25, gender: 'male' },
  {
    
     name: 'Charlie', age: 20, gender: 'male' },
  {
    
     name: 'David', age: 30, gender: 'male' },
  {
    
     name: 'Eve', age: 25, gender: 'female' }
];

const result = groupByMap(arr, 'age');
console.log(result);

输出结果：

{
    
    
  '20': [
    {
    
     name: 'Alice', age: 20, gender: 'female' },
    {
    
     name: 'Charlie', age: 20, gender: 'male' }
  ],
  '25': [
    {
    
     name: 'Bob', age: 25, gender: 'male' },
    {
    
     name: 'Eve', age: 25, gender: 'female' }
  ],
  '30': [
    {
    
     name: 'David', age: 30, gender: 'male' }
  ]
}

4. 使用Map对象封装的方法：

这种方法使用Map对象来存储分组结果。它使用forEach()方法对数组进行迭代，并根据指定的属性值将元素分组。在迭代过程中，根据属性值将元素添加到相应的分组中，并使用Map对象的set()方法来保存分组结果。

创建一个空的Map对象，用于存储分组结果。
使用forEach方法对数组进行迭代。
在每次迭代中，使用箭头函数来根据当前元素的属性值，将元素添加到相应的属性数组中。
最后将分组结果转换为普通对象，并返回。
使用示例：

const arr = [
  {
    
     name: 'Alice', age: 20, gender: 'female' },
  {
    
     name: 'Bob', age: 25, gender: 'male' },
  {
    
     name: 'Charlie', age: 20, gender: 'male' },
  {
    
     name: 'David', age: 30, gender: 'male' },
  {
    
     name: 'Eve', age: 25, gender: 'female' }
];

const result = groupByMapObj(arr, 'gender');
console.log(result);

输出结果：

{
    
    
  female: [
    {
    
     name: 'Alice', age: 20, gender: 'female' },
    {
    
     name: 'Eve', age: 25, gender: 'female' }
  ],
  male: [
    {
    
     name: 'Bob', age: 25, gender: 'male' },
    {
    
     name: 'Charlie', age: 20, gender: 'male' },
    {
    
     name: 'David', age: 30, gender: 'male' }
  ]
}

5. 使用lodash库的groupBy()方法封装的方法：

这种方法使用lodash库的groupBy()方法来实现分组。它接受一个数组和一个属性名作为参数，并返回一个对象，其中键是属性值，值是具有相同属性值的元素数组。
使用lodash库的groupBy方法，传入数组和属性名作为参数。
groupBy方法会根据属性值将数组元素分组，并返回一个对象，其中键是属性值，值是具有相同属性值的元素数组。
返回分组结果

使用示例：

const arr = [
  {
    
     name: 'Alice', age: 20, gender: 'female' },
  {
    
     name: 'Bob', age: 25, gender: 'male' },
  {
    
     name: 'Charlie', age: 20, gender: 'male' },
  {
    
     name: 'David', age: 30, gender: 'male' },
  {
    
     name: 'Eve', age: 25, gender: 'female' }
];

const result = groupByLodash(arr, 'age');
console.log(result);

输出结果：

{
    
    
  '20': [
    {
    
     name: 'Alice', age: 20, gender: 'female' },
    {
    
     name: 'Charlie', age: 20, gender: 'male' }
  ],
  '25': [
    {
    
     name: 'Bob', age: 25, gender: 'male' },
    {
    
     name: 'Eve', age: 25, gender: 'female' }
  ],
  '30': [
    {
    
     name: 'David', age: 30, gender: 'male' }
  ]
}

6. 使用ES6的Map和箭头函数封装的方法：

这种方法使用ES6的Map对象来存储分组结果。它使用forEach()方法对数组进行迭代，并根据指定的属性值将元素分组。在迭代过程中，根据属性值将元素添加到相应的分组中，并使用Map对象的set()方法来保存分组结果。
创建一个空的Map对象，用于存储分组结果。
使用forEach方法对数组进行迭代。
在每次迭代中，使用箭头函数来根据当前元素的属性值，将元素添加到相应的属性数组中。
最后将分组结果转换为普通对象，并返回。

使用示例：

const arr = [
  {
    
     name: 'Alice', age: 20, gender: 'female' },
  {
    
     name: 'Bob', age: 25, gender: 'male' },
  {
    
     name: 'Charlie', age: 20, gender: 'male' },
  {
    
     name: 'David', age: 30, gender: 'male' },
  {
    
     name: 'Eve', age: 25, gender: 'female' }
];

const result = groupByMapArrow(arr, 'gender');
console.log(result);

输出结果：

{
    
    
  female: [
    {
    
     name: 'Alice', age: 20, gender: 'female' },
    {
    
     name: 'Eve', age: 25, gender: 'female' }
  ],
  male: [
    {
    
     name: 'Bob', age: 25, gender: 'male' },
    {
    
     name: 'Charlie', age: 20, gender: 'male' },
    {
    
     name: 'David', age: 30, gender: 'male' }
  ]
}

以上是六种不同的方法的详细说明和使用示例。根据需求和个人喜好，可以选择适合的方法来进行分组操作。

试着封装起来

以下是将这6种方法封装

function groupBy(arr, prop, method) {
    
    
  switch (method) {
    
    
    case 'reduce':
      return arr.reduce((result, item) => {
    
    
        const key = item[prop];
        if (!result[key]) {
    
    
          result[key] = [];
        }
        result[key].push(item);
        return result;
      }, {
    
    });
    case 'forEach':
      const grouped = {
    
    };
      arr.forEach(item => {
    
    
        const key = item[prop];
        if (!grouped[key]) {
    
    
          grouped[key] = [];
        }
        grouped[key].push(item);
      });
      return grouped;
    case 'map':
      const grouped = Object.create(null);
      arr.map(item => {
    
    
        const key = item[prop];
        if (!grouped[key]) {
    
    
          grouped[key] = [];
        }
        grouped[key].push(item);
      });
      return grouped;
    case 'mapObj':
      const grouped = new Map();
      arr.forEach(item => {
    
    
        const key = item[prop];
        const group = grouped.get(key) || [];
        group.push(item);
        grouped.set(key, group);
      });
      return Object.fromEntries(grouped);
    case 'lodash':
      const _ = require('lodash');
      return _.groupBy(arr, prop);
    case 'mapArrow':
      const grouped = new Map();
      arr.forEach(item => {
    
    
        const key = item[prop];
        const group = grouped.get(key) || [];
        group.push(item);
        grouped.set(key, group);
      });
      return Object.fromEntries(grouped);
    default:
      return {
    
    };
  }
}

使用示例：

const arr = [
  {
    
     name: 'Alice', age: 20, gender: 'female' },
  {
    
     name: 'Bob', age: 25, gender: 'male' },
  {
    
     name: 'Charlie', age: 20, gender: 'male' },
  {
    
     name: 'David', age: 30, gender: 'male' },
  {
    
     name: 'Eve', age: 25, gender: 'female' }
];

console.log(groupBy(arr, 'age', 'reduce'));
console.log(groupBy(arr, 'gender', 'forEach'));
console.log(groupBy(arr, 'age', 'map'));
console.log(groupBy(arr, 'gender', 'mapObj'));
console.log(groupBy(arr, 'age', 'lodash'));
console.log(groupBy(arr, 'gender', 'mapArrow'));

封装后，可以根据传入的方法名调用相应的分组方法，方便调用和切换不同的分组方法。