当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript数组对象分组技巧教程

JavaScript数组对象分组技巧教程

2025-12-17 22:36:42 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《JavaScript数组对象分组方法教程》，聊聊，我们一起来看看吧！

JavaScript数组对象分组转换教程

本教程将详细介绍如何将一个包含多个具有`level`和`category`属性的JavaScript对象数组，转换为一个以`category`为键、以`level`值数组为值的目标对象。我们将探讨两种主流且高效的实现方式：传统的`for...of`循环迭代和现代的`reduce`函数式方法，并分析它们的特点与适用场景，帮助开发者选择最适合其项目需求的代码风格。

需求场景分析

在前端或后端JavaScript开发中，我们经常会遇到需要对数据进行重组和格式化的场景。例如，给定以下结构的数据：

const initialArray = [
    { "level": "level3", "category": "car" },
    { "level": "level1", "category": "bike" },
    { "level": "level2", "category": "car" },
    { "level": "level5", "category": "bike" }
];

我们的目标是将其转换为以下按category分组的对象结构：

{
    car: ["level3", "level2"],
    bike: ["level1", "level5"]
}

这种转换在数据聚合、报表生成或UI组件渲染前的数据准备中非常常见。

方法一：使用 for...of 循环迭代

for...of循环是ES6引入的一种迭代语法，它允许我们遍历可迭代对象（如数组）的每个元素。这种方法直观易懂，逻辑清晰，是许多开发者首选的实现方式。

实现原理

初始化一个空对象newObj，用于存储最终的分组结果。
遍历initialArray中的每一个item对象。
对于每个item，解构出level和category属性。
检查newObj中是否已经存在以当前category为键的属性：
- 如果存在，说明该category已经有对应的数组，直接将当前level推入该数组。
- 如果不存在，说明是第一次遇到该category，则在newObj中创建以category为键的新属性，并将其值初始化为一个包含当前level的数组。

示例代码

const initialArray = [
    { "level": "level3", "category": "car" },
    { "level": "level1", "category": "bike" },
    { "level": "level2", "category": "car" },
    { "level": "level5", "category": "bike" }
];

const groupedObjectForOf = {};

for (const item of initialArray) {
  const { level, category } = item; // 解构获取level和category
  if (groupedObjectForOf[category]) {
    // 如果category已存在，则将level添加到对应数组
    groupedObjectForOf[category].push(level);
  } else {
    // 如果category不存在，则创建新数组并添加level
    groupedObjectForOf[category] = [level];
  }
}

console.log("使用 for...of 循环的结果:", groupedObjectForOf);
// 预期输出: { car: [ 'level3', 'level2' ], bike: [ 'level1', 'level5' ] }

优点

可读性强： 代码逻辑与人类思维过程接近，易于理解和调试。
直接控制： 可以精确控制每次迭代中的操作。

方法二：使用 reduce 方法

Array.prototype.reduce()方法对数组中的每个元素执行一个由您提供的reducer函数，将其结果汇总为单个返回值。它是一种函数式编程风格，能够使代码更加简洁和富有表达力。

实现原理

reduce方法接收一个回调函数和一个初始值（accumulator）。
回调函数接收四个参数：accumulator（累加器，即最终要返回的对象）、currentValue（当前正在处理的数组元素）、currentIndex和array。
在每次迭代中，回调函数会处理currentValue，并返回更新后的accumulator。
初始值通常设置为一个空对象{}，作为累加器的起始状态。
对于每个item（currentValue），解构出level和category。
利用短路评估（||）或条件判断来确保accumulator[category]始终是一个数组，然后将level推入其中。

示例代码

const initialArray = [
    { "level": "level3", "category": "car" },
    { "level": "level1", "category": "bike" },
    { "level": "level2", "category": "car" },
    { "level": "level5", "category": "bike" }
];

const groupedObjectReduce = initialArray.reduce((accumulator, item) => {
    const { level, category } = item; // 解构获取level和category
    // 确保accumulator[category]是一个数组，如果不存在则初始化为空数组
    accumulator[category] = accumulator[category] || [];
    // 将level添加到对应数组
    accumulator[category].push(level);
    return accumulator; // 返回更新后的累加器
}, {}); // 初始累加器为空对象

console.log("使用 reduce 方法的结果:", groupedObjectReduce);
// 预期输出: { car: [ 'level3', 'level2' ], bike: [ 'level1', 'level5' ] }

优点

代码简洁： 通常比循环方式的代码行数更少，表达力更强。
函数式风格： 适用于偏爱函数式编程范式的开发者，有助于编写纯函数和不可变数据流。

性能与选择建议

两种方法在处理此特定任务时都具有线性时间复杂度O(n)，其中n是initialArray中元素的数量。这意味着随着数组大小的增加，它们的执行时间会大致呈线性增长。在大多数实际应用中，这两种方法在性能上不会有显著差异，因此选择哪种方法更多地取决于个人偏好、团队编码规范和代码可读性。

for...of循环： 如果你或你的团队更倾向于命令式编程风格，或者认为显式的循环和条件判断能带来更好的可读性，那么for...of是一个非常好的选择。它对于初学者也更友好。
reduce方法： 如果你熟悉函数式编程，喜欢更紧凑和声明式的代码，并且希望利用JavaScript数组方法的强大功能，那么reduce方法会是你的首选。它在处理更复杂的数据转换和聚合场景时也能展现其灵活性。

总结

将数组对象按特定键值进行分组转换是JavaScript数据处理中的常见需求。本教程介绍了两种高效且常用的实现策略：for...of循环和reduce方法。for...of循环以其直观的命令式风格提供了清晰的逻辑，而reduce方法则以其简洁的函数式风格提供了优雅的解决方案。无论选择哪种方法，理解其背后的原理和适用场景，都能帮助开发者编写出高效、可维护且符合项目需求的代码。在实际开发中，建议根据团队的编码规范和项目的具体上下文来选择最合适的实现方式。

理论要掌握，实操不能落！以上关于《JavaScript数组对象分组技巧教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！