当前位置:首页 > JavaScript

js分组实现

2026-02-28 18:38:16JavaScript

分组实现方法

在JavaScript中,分组操作通常指将数组或对象按照特定条件进行分类。以下是几种常见的分组实现方式:

使用Array.prototype.reduce()

通过reduce方法可以高效地对数组进行分组。该方法遍历数组并将元素归类到不同的组中。

js分组实现

const items = [
  { name: 'Apple', category: 'Fruit' },
  { name: 'Carrot', category: 'Vegetable' },
  { name: 'Banana', category: 'Fruit' }
];

const grouped = items.reduce((acc, item) => {
  const key = item.category;
  if (!acc[key]) acc[key] = [];
  acc[key].push(item);
  return acc;
}, {});

console.log(grouped);

使用Map对象

Map对象更适合需要复杂键值或需要保持插入顺序的分组场景。

js分组实现

const items = [
  { id: 1, type: 'A' },
  { id: 2, type: 'B' },
  { id: 3, type: 'A' }
];

const map = new Map();
items.forEach(item => {
  const key = item.type;
  if (!map.has(key)) map.set(key, []);
  map.get(key).push(item);
});

console.log(Object.fromEntries(map));

使用Lodash库的groupBy

第三方库Lodash提供了现成的groupBy函数,简化分组操作。

const _ = require('lodash');
const data = [
  { name: 'John', department: 'HR' },
  { name: 'Jane', department: 'IT' },
  { name: 'Bob', department: 'HR' }
];

const groupedData = _.groupBy(data, 'department');
console.log(groupedData);

按多条件分组

当需要根据多个属性组合进行分组时,可以创建复合键。

const orders = [
  { product: 'Laptop', customer: 'Alice', date: '2023-01-01' },
  { product: 'Phone', customer: 'Bob', date: '2023-01-01' },
  { product: 'Laptop', customer: 'Alice', date: '2023-01-02' }
];

const groupedOrders = orders.reduce((groups, order) => {
  const key = `${order.customer}_${order.product}`;
  if (!groups[key]) groups[key] = [];
  groups[key].push(order);
  return groups;
}, {});

console.log(groupedOrders);

注意事项

  • 原始数据若包含null或undefined值,需在分组前进行过滤处理
  • 大型数据集分组时,考虑性能优化方案如分批处理
  • 分组后的数据结构应根据实际使用场景设计,避免过度嵌套

以上方法覆盖了JavaScript中常见的数据分组需求,可根据具体场景选择合适方案。对于简单分组,原生reduce方法足够;复杂场景可考虑使用专业工具库。

标签: js
分享给朋友:

相关文章

jquery.js

jquery.js

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,用于简化 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它的设计宗旨是“Write Less, Do Mor…

vue.js实现轮播

vue.js实现轮播

Vue.js 实现轮播功能 使用第三方库(推荐) Vue.js 生态中有许多成熟的轮播组件库,例如 vue-awesome-swiper 或 swiper,它们功能丰富且易于集成。 安装 swip…

js实现拖拽

js实现拖拽

实现拖拽的基本步骤 通过监听鼠标事件(mousedown、mousemove、mouseup)实现拖拽功能。以下是核心代码逻辑: const draggableElement = document…

js实现类

js实现类

JavaScript 实现类的几种方式 JavaScript 是一种基于原型的语言,但在 ES6 之后引入了 class 语法糖,使得实现类更加直观。以下是几种常见的实现方式: 使用构造函数 传统的…

js实现拷贝

js实现拷贝

实现文本拷贝 使用 document.execCommand 方法(已废弃但兼容性较好): function copyText(text) { const textarea = documen…

js实现换肤

js实现换肤

使用CSS变量实现换肤 通过CSS变量可以轻松实现主题切换功能。CSS变量在根元素中定义,通过JavaScript动态修改这些变量值。 :root { --primary-color: #34…