当前位置:首页 > 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
分享给朋友:

相关文章

js实现轮播图

js实现轮播图

基础轮播图实现 使用HTML、CSS和JavaScript实现一个简单的自动轮播图。HTML结构包含一个容器和多个图片项。 <div class="slider"> <div…

js实现选项卡

js实现选项卡

实现选项卡的基本思路 选项卡通常由一组标签和对应的内容面板组成。点击标签时,显示对应的内容面板,隐藏其他面板。实现这一效果需要结合HTML结构、CSS样式和JavaScript交互逻辑。 HTML结…

使用js实现

使用js实现

使用JavaScript实现 JavaScript可以通过Math.random()函数生成随机数,结合其他方法可以实现多种随机数生成需求。 // 生成0到1之间的随机小数 const random…

js实现自举

js实现自举

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

js实现上传文件

js实现上传文件

文件上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API可以实现文件上传功能。 <input type="file"…

js图片轮播的实现

js图片轮播的实现

基础图片轮播实现 使用HTML、CSS和JavaScript实现一个简单的图片轮播效果。HTML部分定义轮播容器和图片,CSS负责样式和过渡效果,JavaScript处理逻辑。 <div cl…