当前位置:首页 > 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());
};

分组条件处理

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

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,在极端性能要求场景下可能有轻微优势:

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' }
  ]
}
*/

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

js分组实现

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
分享给朋友:

相关文章

js实现vue

js实现vue

Vue.js 简介 Vue.js 是一个渐进式 JavaScript 框架,用于构建用户界面。其核心库专注于视图层,易于与其他库或现有项目整合。 实现 Vue.js 的基本步骤 安装 Vue.j…

js实现图片

js实现图片

图片加载与显示 在JavaScript中,可以通过Image对象动态加载图片。创建实例后设置src属性触发加载,通过onload回调处理加载完成后的操作: const img = new Ima…

js进度条实现

js进度条实现

使用HTML和CSS创建基础结构 在HTML中创建一个容器元素用于显示进度条,通常使用<div>元素。CSS用于设置进度条的样式,包括宽度、高度、颜色和圆角等属性。 <div cl…

js计算器的实现

js计算器的实现

实现基础结构 HTML部分需要创建计算器的基本框架,包含显示区域和按钮。使用<div>容器包裹整个计算器,内部设置一个显示屏和多个按钮。 <div class="calculato…

js实现轮播代码

js实现轮播代码

基础轮播实现 使用HTML、CSS和JavaScript创建一个简单的轮播效果。HTML部分定义轮播容器和图片元素。 <div class="carousel"> <div c…

js实现文件夹

js实现文件夹

使用JavaScript创建文件夹 在浏览器端的JavaScript中无法直接操作文件系统创建文件夹,这是出于安全考虑。但在Node.js环境中可以通过文件系统模块(fs)实现。 Node.js中使…