当前位置:首页 > JavaScript

js实现分组函数

2026-03-15 22:21:29JavaScript

实现分组函数的基本思路

分组函数的核心逻辑是根据指定的键(key)将数组元素分类到不同的组中。JavaScript中可以通过对象或Map数据结构实现,键为分组依据,值为对应元素的数组。

使用reduce方法实现

通过Array.prototype.reduce遍历数组,动态构建分组对象:

js实现分组函数

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 = [
  { category: 'fruit', name: 'apple' },
  { category: 'vegetable', name: 'carrot' },
  { category: 'fruit', name: 'banana' }
];

console.log(groupBy(data, 'category'));
// 输出: { fruit: [...], vegetable: [...] }

支持函数作为分组键

扩展实现支持通过函数计算分组键:

js实现分组函数

console.log(groupBy(data, item => item.name.length));
// 按名称长度分组

使用Map实现分组

需要保持键的顺序或键可能是对象时,使用Map更合适:

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

处理复杂分组条件

当需要多重分组时,可以组合多个分组条件:

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

性能优化建议

对于大型数据集,使用Map比普通对象性能更好。如果分组键是固定且已知的,可以预初始化分组结构减少动态分配开销。

标签: 函数js
分享给朋友:

相关文章

js实现日历

js实现日历

实现日历的基本思路 使用JavaScript实现日历的核心是动态生成日期表格,并处理月份切换逻辑。需要计算当前月的天数、起始星期几,并动态渲染到页面上。 获取当前日期信息 通过Date对象获取当前年…

js轮播图实现原理

js轮播图实现原理

轮播图的基本原理 轮播图通过动态切换显示的内容(图片、文本等)实现视觉上的滑动效果。核心原理是利用CSS和JavaScript控制元素的显示与隐藏,或通过变换位置实现滑动动画。 实现方法一:…

js实现变形

js实现变形

使用 CSS 和 JavaScript 实现元素变形 在 JavaScript 中实现变形效果通常结合 CSS 的 transform 属性,通过动态修改该属性实现元素的旋转、缩放、倾斜或平移。 基…

js树实现

js树实现

树的基本概念 树是一种非线性的数据结构,由节点和边组成。每个节点包含一个值和指向子节点的引用。树的顶部节点称为根节点,没有子节点的节点称为叶节点。 树的实现方式 在JavaScript中,树可以通过…

vue实现js休眠

vue实现js休眠

实现 JavaScript 休眠的方法 在 Vue 中实现 JavaScript 休眠(延迟执行)可以通过以下方式实现。由于 JavaScript 本身没有内置的 sleep 函数,通常使用 Prom…

js实现的游戏

js实现的游戏

JavaScript 游戏开发基础 JavaScript 是开发网页游戏的流行选择,因其无需插件即可在浏览器中运行。以下是一些关键技术和资源: HTML5 Canvas Canvas 提供了绘制图形…