根据相同值重组对象数组：JavaScript 实现指南

本文旨在提供一种高效且易于理解的方法，用于将对象数组按照特定属性值进行分组，并将其重组为新的数组结构。通过使用 Array.prototype.reduce() 和 Object.values() 等 JavaScript 内置方法，我们可以轻松地实现这一目标，从而简化数据处理流程，提高代码的可读性和可维护性。本文将提供详细的代码示例和步骤说明，帮助读者快速掌握这一技巧。

对象数组分组的实现

在实际开发中，我们经常遇到需要根据对象数组中某个属性的值，将具有相同属性值的对象聚合在一起的需求。例如，我们可能需要将一组包含 name 属性的对象，按照 name 的值进行分组，以便后续进行统计、分析或其他操作。

以下是一种使用 JavaScript 实现对象数组分组的方案：

1. 使用 Array.prototype.reduce() 方法

立即学习“Java免费学习笔记（深入）”；

reduce() 方法对数组中的每个元素执行一个由您提供的 reducer 函数(升序执行)，将其结果汇总为单个返回值。 我们可以利用 reduce() 方法来构建一个以属性值为键，对象数组为值的临时对象。

2. 使用 Object.values() 方法

标书对比王

标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

58

查看详情

Object.values() 方法返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用 for...in 循环的顺序相同 ( 区别在于 for-in 循环也枚举原型链中的属性 )。 在 reduce() 操作完成后，我们可以使用 Object.values() 方法提取临时对象中的所有值，从而得到最终的分组结果。

代码示例：

const data = [
  { name: 3, q: 10, b: 1 },
  { name: 5, q: 6, b: 2 },
  { name: 5, q: 7, b: 1 },
];

const groupedData = Object.values(
  data.reduce((acc, obj) => {
    const { name, ...rest } = obj; // 使用解构赋值提取 name 属性和其他属性
    acc[name] = acc[name] || { name, items: [] }; // 如果 acc 中不存在以 name 为键的属性，则初始化该属性
    acc[name].items.push(rest); // 将当前对象的其他属性添加到 items 数组中
    return acc; // 返回累加器
  }, {}) // 初始化累加器为一个空对象
);

console.log(groupedData);

代码解释：

• data.reduce((acc, obj) => { ... }, {}): 使用 reduce 方法遍历 data 数组。 acc 是累加器，初始值为一个空对象 {}。 obj 是当前遍历到的对象。
• const { name, ...rest } = obj;: 使用对象解构赋值，将当前对象的 name 属性提取出来，并将剩余的属性赋值给 rest 变量。
• acc[name] = acc[name] || { name, items: [] };: 判断累加器 acc 中是否存在以 name 为键的属性。如果不存在，则创建一个新的对象 { name, items: [] } 并赋值给 acc[name]。 items 数组用于存储具有相同 name 属性值的对象的其他属性。
• acc[name].items.push(rest);: 将当前对象的其他属性（存储在 rest 变量中）添加到 acc[name].items 数组中。
• Object.values( ... ): reduce 方法执行完毕后，返回的是一个对象，该对象的键是 name 属性的值，值是包含 name 和 items 属性的对象。 Object.values() 方法用于提取该对象的所有值，即最终的分组结果。

输出结果：

[
  {
    "name": 3,
    "items": [
      {
        "q": 10,
        "b": 1
      }
    ]
  },
  {
    "name": 5,
    "items": [
      {
        "q": 6,
        "b": 2
      },
      {
        "q": 7,
        "b": 1
      }
    ]
  }
]

注意事项

• 数据类型： 确保用于分组的属性值的数据类型是可比较的。例如，如果属性值是对象，则需要自定义比较函数。
• 性能： 对于大型数组，reduce() 方法的性能可能不如其他方法。 可以考虑使用 Map 对象来提高性能。
• Lodash： 虽然 Lodash 库提供了类似功能的函数（如 _.groupBy()），但使用原生 JavaScript 实现可以减少对外部库的依赖。

总结

本文介绍了一种使用 JavaScript 实现对象数组分组的方案。通过使用 Array.prototype.reduce() 和 Object.values() 方法，我们可以轻松地将对象数组按照特定属性值进行分组，并将其重组为新的数组结构。 这种方法简单易懂，且不需要依赖外部库，适用于各种 JavaScript 项目。 掌握这种技巧可以帮助你更高效地处理数据，提高代码的可读性和可维护性。

以上就是根据相同值重组对象数组：JavaScript 实现指南的详细内容，更多请关注php中文网其它相关文章！