当前位置：首页 > JavaScript

js分组实现

2026-04-03 19:05:08JavaScript

数组分组方法

在JavaScript中实现数组分组可以通过多种方式完成，以下是常见的几种实现方法：

使用reduce方法 通过Array.prototype.reduce()实现分组是最灵活的方式之一。reduce方法遍历数组，将元素按照指定条件归类到对象的不同属性中。

const groupBy = (array, key) => {
  return array.reduce((result, current) => {
    const groupKey = current[key];
    (result[groupKey] = result[groupKey] || []).push(current);
    return result;
  }, {});
};

使用Map数据结构 当分组键可能是非字符串值时，使用Map比普通对象更合适：

const groupByMap = (array, keyFn) => {
  return array.reduce((map, item) => {
    const key = keyFn(item);
    const group = map.get(key) || [];
    group.push(item);
    map.set(key, group);
    return map;
  }, new Map());
};

分组条件处理

多条件分组 需要根据多个属性组合进行分组时，可以生成复合键：

js分组实现

const multiGroupBy = (array, keys) => {
  return array.reduce((result, item) => {
    const groupKey = keys.map(k => item[k]).join('-');
    (result[groupKey] = result[groupKey] || []).push(item);
    return result;
  }, {});
};

函数式分组 使用函数作为分组条件，实现更灵活的分组逻辑：

const functionalGroupBy = (array, keyFn) => {
  return array.reduce((result, item) => {
    const groupKey = keyFn(item);
    (result[groupKey] = result[groupKey] || []).push(item);
    return result;
  }, {});
};

性能优化方案

大数据量处理 当处理大型数组时，可以考虑以下优化措施：

使用for循环代替reduce，在极端性能要求场景下可能有轻微优势：

js分组实现

function optimizedGroupBy(array, key) {
  const result = {};
  for (let i = 0; i < array.length; i++) {
    const item = array[i];
    const groupKey = item[key];
    if (!result[groupKey]) {
      result[groupKey] = [];
    }
    result[groupKey].push(item);
  }
  return result;
}

并行处理 在支持Web Worker的环境中，可以将大数据集分割后并行处理：

// 主线程代码
const parallelGroupBy = async (largeArray, key, chunkSize = 1000) => {
  const chunks = [];
  for (let i = 0; i < largeArray.length; i += chunkSize) {
    chunks.push(largeArray.slice(i, i + chunkSize));
  }

  const workers = chunks.map(chunk => {
    return new Promise(resolve => {
      const worker = new Worker('groupWorker.js');
      worker.postMessage({ chunk, key });
      worker.onmessage = e => resolve(e.data);
    });
  });

  const results = await Promise.all(workers);
  return Object.assign({}, ...results);
};

实际应用示例

日期分组 按照日期属性将对象分组：

const events = [
  { name: 'Event1', date: '2023-01-01' },
  { name: 'Event2', date: '2023-01-01' },
  { name: 'Event3', date: '2023-01-02' }
];

const groupedEvents = groupBy(events, 'date');
/*
{
  '2023-01-01': [
    { name: 'Event1', date: '2023-01-01' },
    { name: 'Event2', date: '2023-01-01' }
  ],
  '2023-01-02': [
    { name: 'Event3', date: '2023-01-02' }
  ]
}
*/

复杂对象分组 按照嵌套属性或计算值分组：

const products = [
  { id: 1, category: { id: 1, name: 'Electronics' }, price: 999 },
  { id: 2, category: { id: 1, name: 'Electronics' }, price: 799 },
  { id: 3, category: { id: 2, name: 'Clothing' }, price: 59 }
];

const byCategory = functionalGroupBy(
  products,
  item => item.category.name
);

标签: js