当前位置:首页 > JavaScript

js实现groupby

2026-02-02 09:40:25JavaScript

实现 JavaScript 的 groupBy 功能

在 JavaScript 中,groupBy 是一种常见的数据操作,用于将数组元素按照指定的键或条件分组。可以通过多种方式实现这一功能。

使用 Array.prototype.reduce 方法

通过 reduce 方法可以高效地实现分组功能。该方法遍历数组,并将元素根据指定的键分组到一个对象中。

js实现groupby

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

// 示例用法
const data = [
  { id: 1, category: 'A' },
  { id: 2, category: 'B' },
  { id: 3, category: 'A' }
];

const groupedData = groupBy(data, 'category');
console.log(groupedData);
// 输出: { A: [{ id: 1, category: 'A' }, { id: 3, category: 'A' }], B: [{ id: 2, category: 'B' }] }

使用 MapforEach 方法

如果需要更灵活的分组条件,可以使用 Map 结构结合 forEach 方法。

js实现groupby

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

// 示例用法
const groupedByCategory = groupBy(data, item => item.category);
console.log(groupedByCategory);
// 输出与上述示例相同

使用 Lodash 库

如果项目中已经使用了 Lodash,可以直接调用其 _.groupBy 方法,该方法功能强大且兼容性好。

const _ = require('lodash');

const groupedData = _.groupBy(data, 'category');
console.log(groupedData);
// 输出与上述示例相同

分组时处理复杂条件

分组不仅限于简单的属性值,还可以通过函数动态计算分组键。

const numbers = [1, 2, 3, 4, 5, 6];
const groupedByEvenOdd = groupBy(numbers, num => num % 2 === 0 ? 'even' : 'odd');
console.log(groupedByEvenOdd);
// 输出: { odd: [1, 3, 5], even: [2, 4, 6] }

注意事项

  • 如果分组键为 undefinednull,需确保逻辑正确处理边界情况。
  • 分组后的数据结构通常是对象,键为分组依据,值为数组形式的元素集合。
  • 性能方面,reduceMap 的实现方式在大数据量下表现较好。

以上方法涵盖了从原生 JavaScript 到第三方库的实现,可根据具体需求选择合适的方式。

标签: jsgroupby
分享给朋友:

相关文章

js实现验证码

js实现验证码

使用Canvas生成图形验证码 在HTML中创建一个Canvas元素用于绘制验证码。通过JavaScript随机生成数字或字母组合,并添加干扰线、噪点等干扰元素增强安全性。 <canvas i…

js实现图片上传

js实现图片上传

图片上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API可以实现图片上传功能。HTML部分需要创建一个文件选择输入框和一个用于…

js实现全屏

js实现全屏

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

js实现瀑布流

js实现瀑布流

实现瀑布流布局 瀑布流布局是一种常见的网页布局方式,常用于图片展示、商品列表等场景。以下是使用 JavaScript 实现瀑布流布局的几种方法。 纯 JavaScript 实现 通过计算元素的位置和…

js类实现

js类实现

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

js实现自举

js实现自举

实现 JavaScript 自举的方法 JavaScript 自举(Bootstrap)通常指通过 JavaScript 动态加载自身或依赖的脚本,实现运行时环境的初始化或扩展。以下是几种常见实现方式…