JavaScript中从嵌套对象数组中高效提取唯一属性值-js教程-PHP中文网

JavaScript中从嵌套对象数组中高效提取唯一属性值

心靈之曲

发布： 2025-10-02 10:50:11

原创

1013人浏览过

JavaScript中从嵌套对象数组中高效提取唯一属性值

本文探讨了在JavaScript中如何从复杂的嵌套对象数组结构中高效地提取并去重指定属性（如'subjects'中的'name'）的所有可能值。我们将介绍两种主要方法：基于循环和条件判断的传统方式，以及利用Set数据结构实现更简洁高效去重的方法，并比较它们的优劣。

在javascript开发中，我们经常需要处理结构复杂的json数据。一个常见的需求是从包含嵌套数组的对象集合中，提取某个特定属性的所有唯一值。例如，给定一个事件列表，每个事件包含一个学科（subjects）数组，我们可能需要获取所有出现过的独特学科名称。

考虑以下数据结构：

const data = [
  {
    "event_id": 1,
    "subjects": [
      { "id": 12, "name": "Chemistry" },
      { "id": 13, "name": "Physics" },
      { "id": 14, "name": "Psychology" },
      { "id": 16, "name": "History" }
    ]
  },
  {
    "event_id": 2,
    "subjects": [
      { "id": 11, "name": "Maths" },
      { "id": 12, "name": "Chemistry" },
      { "id": 14, "name": "Biology" },
      { "id": 15, "name": "Geography" }
    ]
  },
  {
    "event_id": 3,
    "subjects": [
      { "id": 14, "name": "Biology" },
      { "id": 15, "name": "Geography" },
      { "id": 16, "name": "History" }
    ]
  }
];

登录后复制

我们的目标是从这个data数组中提取所有唯一的subject.name值。

方法一：传统循环与条件判断去重

这种方法通过遍历主数组和嵌套的subjects数组，在将每个学科名称添加到结果数组之前，检查它是否已经存在。

实现步骤：

初始化一个空数组all，用于存储所有唯一的学科名称。
使用for...of循环遍历data数组中的每个事件对象。
对于每个事件对象，解构出subjects数组。
使用forEach循环遍历subjects数组中的每个学科对象s。
在将s.name添加到all数组之前，使用indexOf方法检查all数组中是否已存在该名称。如果不存在（indexOf返回-1），则将其添加到all数组中。

示例代码：

const allUniqueSubjects_indexOf = [];
for (const { subjects } of data) {
  subjects.forEach((s) => {
    if (allUniqueSubjects_indexOf.indexOf(s.name) === -1) {
      allUniqueSubjects_indexOf.push(s.name);
    }
  });
}
console.log("方法一结果 (indexOf):", allUniqueSubjects_indexOf);
// 预期输出: ["Chemistry", "Physics", "Psychology", "History", "Maths", "Biology", "Geography"]

登录后复制

注意事项：

可读性： 对于初学者来说，这种方法直观易懂。
性能： indexOf方法在每次查找时都需要遍历整个数组。如果结果数组all非常大，这种线性搜索的开销会显著增加，导致整体性能下降（时间复杂度为O(NMK)，其中N是事件数，M是平均每个事件的学科数，K是all数组的平均大小）。对于大型数据集，这不是最有效的方法。

方法二：利用Set数据结构去重

JavaScript的Set对象允许存储任何类型的唯一值，无论是原始值还是对象引用。利用Set的这一特性，我们可以更高效地实现去重。

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

WeShop唯象

WeShop唯象是国内首款AI商拍工具，专注电商产品图片的智能生成。

113

查看详情

实现步骤：

初始化一个空数组allNamesWithDuplicates，用于临时存储所有学科名称（包含重复项）。
使用for...of循环遍历data数组中的每个事件对象。
对于每个事件对象，解构出subjects数组。
使用forEach循环遍历subjects数组中的每个学科对象s，并将其s.name直接添加到allNamesWithDuplicates数组中。
将allNamesWithDuplicates数组作为参数传递给new Set()构造函数，创建一个Set对象，此时重复的名称会自动被移除。
使用扩展运算符（...）将Set对象转换回一个数组，得到最终的唯一学科名称列表。

示例代码：

const allNamesWithDuplicates = [];
for (const { subjects } of data) {
  subjects.forEach((s) => {
    allNamesWithDuplicates.push(s.name);
  });
}

const allUniqueSubjects_set = [...new Set(allNamesWithDuplicates)];
console.log("方法二结果 (Set):", allUniqueSubjects_set);
// 预期输出: ["Chemistry", "Physics", "Psychology", "History", "Maths", "Biology", "Geography"]

登录后复制

优化与链式调用：

为了更简洁，我们可以结合flatMap和Set，将整个过程写成一行或几行代码：

const allUniqueSubjects_optimized = [...new Set(
  data.flatMap(event => event.subjects.map(s => s.name))
)];
console.log("方法二优化结果 (flatMap + Set):", allUniqueSubjects_optimized);
// 预期输出: ["Chemistry", "Physics", "Psychology", "History", "Maths", "Biology", "Geography"]

登录后复制

注意事项：

性能： Set的add和has操作通常具有平均O(1)的时间复杂度，这意味着无论数据集大小如何，去重操作都非常高效。这使得Set成为处理大型数据集时更优的选择。
简洁性： 结合flatMap或map，代码可以变得非常简洁和富有表现力。
兼容性： Set对象在ES6 (ECMAScript 2015) 中引入，现代浏览器和Node.js环境都支持。