当前位置:首页 > JavaScript

js实现groupby

2026-04-07 03:07:22JavaScript

实现 JavaScript 的 groupBy 功能

在 JavaScript 中实现 groupBy 功能可以将数组中的元素按照指定的条件分组。以下是几种常见的实现方式:

使用 Array.prototype.reduce

function groupBy(array, key) {
  return array.reduce((acc, obj) => {
    const groupKey = typeof key === 'function' ? key(obj) : obj[key];
    if (!acc[groupKey]) {
      acc[groupKey] = [];
    }
    acc[groupKey].push(obj);
    return acc;
  }, {});
}

// 示例用法
const data = [
  { id: 1, category: 'fruit', name: 'apple' },
  { id: 2, category: 'vegetable', name: 'carrot' },
  { id: 3, category: 'fruit', name: 'banana' }
];

const grouped = groupBy(data, 'category');
console.log(grouped);

使用 ES6 Map 对象

function groupBy(array, key) {
  const map = new Map();
  array.forEach(item => {
    const groupKey = typeof key === 'function' ? key(item) : item[key];
    if (!map.has(groupKey)) {
      map.set(groupKey, []);
    }
    map.get(groupKey).push(item);
  });
  return Object.fromEntries(map);
}

// 示例用法同上

支持函数作为分组条件

function groupBy(array, keyFunc) {
  return array.reduce((acc, item) => {
    const key = typeof keyFunc === 'function' ? keyFunc(item) : item[keyFunc];
    (acc[key] = acc[key] || []).push(item);
    return acc;
  }, {});
}

// 示例用法:按名称长度分组
const groupedByLength = groupBy(data, item => item.name.length);

Lodash 的实现方式

如果项目中使用 Lodash 库,可以直接使用其 _.groupBy 方法:

const _ = require('lodash');
const grouped = _.groupBy(data, 'category');

TypeScript 版本

function groupBy<T>(array: T[], key: keyof T | ((item: T) => string)): Record<string, T[]> {
  return array.reduce((acc: Record<string, T[]>, item: T) => {
    const groupKey = typeof key === 'function' ? key(item) : item[key] as string;
    (acc[groupKey] = acc[groupKey] || []).push(item);
    return acc;
  }, {});
}

性能考虑

对于大型数据集,reduce 方法通常比 forEachfor 循环有更好的性能表现。如果需要处理非常大的数组,可以考虑使用 Web Workers 或分批处理技术。

js实现groupby

浏览器兼容性

现代浏览器都支持上述实现方法。如果需要支持旧版浏览器,可能需要添加 polyfill 或使用 Babel 转译代码。

标签: jsgroupby
分享给朋友:

相关文章

js实现轮播

js实现轮播

实现基础轮播效果 使用HTML结构创建轮播容器和图片元素: <div class="carousel"> <div class="carousel-inner">…

js实现全屏

js实现全屏

实现全屏的基本方法 使用JavaScript实现全屏功能主要依赖Element.requestFullscreen()方法。现代浏览器均支持此API,但不同浏览器可能需要添加前缀。 // 触发全屏…

原生js实现轮播图

原生js实现轮播图

基本结构搭建 HTML部分需要包含轮播图容器、图片列表及导航按钮。结构示例如下: <div class="slider-container"> <div class="slid…

js实现延迟

js实现延迟

实现延迟的方法 在JavaScript中,实现延迟操作有多种方式,以下是几种常见的方法: 使用setTimeout函数 setTimeout是JavaScript中最常用的延迟执行方法。它接受一个回…

js类实现

js类实现

使用类实现 JavaScript 功能 在 JavaScript 中,类(Class)是一种语法糖,基于原型继承机制。通过 class 关键字可以更直观地定义对象模板。 基本类定义 class…

js图片上传实现

js图片上传实现

图片上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API实现基础图片上传功能。HTML部分需要设置accept="image/…