js如何实现数组分组数组分组的3种高效方法解析-js教程-PHP中文网

js如何实现数组分组数组分组的3种高效方法解析

冰火之心

发布： 2025-06-24 19:15:02

原创

1003人浏览过

数组分组的高效方法有三种，适用场景不同。1.基于索引的分组通过循环按固定大小拆分数组，简单但灵活性差；2.reduce方法实现类似功能，代码简洁但理解难度稍高；3.map结构可根据元素属性或值进行条件分组，灵活但代码较多。选择时需根据具体需求判断，如固定大小用第一种，灵活逻辑用reduce，条件分组用map。分组后通常使用map方法对每组进一步计算，如求平均值等。应用场景包括数据展示、处理和任务分配。性能优化应避免多余循环，简化逻辑，选用合适数据结构并考虑大数据量下的处理方式。

js如何实现数组分组数组分组的3种高效方法解析

数组分组，简单来说，就是把一个大数组按照某种规则拆分成若干个小数组。方法很多，效率也各不相同。选择合适的方案，能让你的代码跑得更快。

解决方案（直接输出解决方案即可）

实现数组分组，核心在于确定分组的依据和方式。以下介绍三种比较高效的方法，它们各有优劣，适用场景也略有不同。

基于索引的简单分组

这是最直观也最容易理解的方法。如果你知道每组包含多少个元素，可以直接使用循环来分割数组。

   function groupArrayByIndex(arr, groupSize) {
     const result = [];
     for (let i = 0; i < arr.length; i += groupSize) {
       result.push(arr.slice(i, i + groupSize));
     }
     return result;
   }

   // 示例
   const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
   const groupedNumbers = groupArrayByIndex(numbers, 3);
   console.log(groupedNumbers); // 输出: [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10]]

登录后复制

优点： 简单易懂，代码量少。

缺点： 灵活性较差，只能按固定大小分组。如果数组长度不是 groupSize 的整数倍，最后一组可能元素数量不足。

使用 reduce 方法进行分组

reduce 方法可以遍历数组，并将每个元素累积到一个结果中。我们可以利用这个特性来实现分组。

   function groupArrayByReduce(arr, groupSize) {
     return arr.reduce((result, item, index) => {
       const groupIndex = Math.floor(index / groupSize);
       if (!result[groupIndex]) {
         result[groupIndex] = [];
       }
       result[groupIndex].push(item);
       return result;
     }, []);
   }

   // 示例
   const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
   const groupedNumbers = groupArrayByReduce(numbers, 3);
   console.log(groupedNumbers); // 输出: [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10]]

登录后复制

优点： 代码相对简洁，功能更强大，可以进行更复杂的分组逻辑。

缺点： 相对于第一种方法，理解起来稍微复杂一些。

使用 Map 进行条件分组

如果需要根据元素的属性或值进行分组，可以使用 Map 数据结构。Map 可以存储键值对，其中键可以是任何类型，这使得它非常适合用于条件分组。

   function groupByCondition(arr, keyExtractor) {
     const map = new Map();
     arr.forEach(item => {
       const key = keyExtractor(item);
       if (!map.has(key)) {
         map.set(key, []);
       }
       map.get(key).push(item);
     });
     return Array.from(map.values());
   }

   // 示例
   const products = [
     { name: 'Apple', category: 'Fruit' },
     { name: 'Banana', category: 'Fruit' },
     { name: 'Carrot', category: 'Vegetable' },
     { name: 'Broccoli', category: 'Vegetable' },
   ];

   const groupedProducts = groupByCondition(products, product => product.category);
   console.log(groupedProducts);
   // 输出: [[{ name: 'Apple', category: 'Fruit' }, { name: 'Banana', category: 'Fruit' }],
   //        [{ name: 'Carrot', category: 'Vegetable' }, { name: 'Broccoli', category: 'Vegetable' }]]

登录后复制

优点： 灵活性极高，可以根据任意条件进行分组。

缺点： 代码相对较多，需要理解 Map 的用法。

如何选择最适合的分组方法？

选择哪种方法取决于你的具体需求。

如果只是简单地按固定大小分组，第一种方法最简单直接。
如果需要更灵活的分组逻辑，或者需要对每个元素进行处理，reduce 方法更适合。
如果需要根据元素的属性或值进行分组，Map 是最佳选择。

数组分组后如何处理数据？

数组分组之后，通常需要对每个分组进行进一步的处理，例如计算每个分组的平均值、最大值、最小值等等。可以使用 map 方法来遍历每个分组，并进行相应的计算。

const groupedNumbers = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10]];

const averageOfEachGroup = groupedNumbers.map(group => {
  const sum = group.reduce((acc, num) => acc + num, 0);
  return sum / group.length;
});

console.log(averageOfEachGroup); // 输出: [2, 5, 8, 10]

登录后复制