问题描述与数据结构
在前端开发中，我们经常会遇到需要从结构复杂的json数据中提取特定信息的需求。例如，给定一个包含多个事件（event_id）的数组，每个事件又包含一个subjects数组，每个subject对象有id和name属性。我们的目标是从所有事件的所有subjects中，提取出所有不重复的name值。
以下是示例数据结构：
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数组中，获取所有唯一的学科名称（name）。
方法一：迭代与条件判断去重
最直观且易于理解的方法是，遍历整个数据结构，将每个学科名称添加到结果数组中，但在添加之前检查该名称是否已经存在于结果数组中。
实现步骤：
- 创建一个空数组 all 用于存储唯一的学科名称。
- 遍历 data 数组中的每一个事件对象。
- 对于每个事件对象，解构出其 subjects 数组。
- 遍历 subjects 数组中的每一个学科对象。
- 获取学科对象的 name 属性。
- 使用 indexOf() 方法检查 name 是否已存在于 all 数组中。如果不存在 (indexOf() 返回 -1)，则将其添加到 all 数组。
示例代码：
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" }
]
}
];
const allSubjectsNames = [];
for (const { subjects } of data) { // 遍历事件
subjects.forEach((s) => { // 遍历每个事件的subjects
if (allSubjectsNames.indexOf(s.name) === -1) { // 检查是否已存在
allSubjectsNames.push(s.name); // 不存在则添加
}
});
}
console.log(allSubjectsNames);
// 预期输出: ["Chemistry", "Physics", "Psychology", "History", "Maths", "Biology", "Geography"]注意事项：
- 可读性: 这种方法逻辑清晰，对于初学者来说易于理解。
- 性能: indexOf() 方法在数组中查找元素的复杂度为 O(n)，这意味着对于每个要添加的元素，它可能需要遍历整个 allSubjectsNames 数组。当数据量较大时，这种嵌套循环会导致性能下降，整体时间复杂度接近 O(m*n)，其中 m 是所有学科名称的总数，n 是 allSubjectsNames 的平均长度。
方法二：利用 Set 集合高效去重
JavaScript ES6 引入了 Set 数据结构，它允许存储任何类型的唯一值。利用 Set 的这一特性可以非常高效地实现数组去重。
立即学习“Java免费学习笔记（深入）”；
实现步骤：
- 创建一个空数组 tempSubjects 用于临时存储所有学科名称（包含重复项）。
- 遍历 data 数组中的每一个事件对象及其 subjects 数组，将所有学科名称添加到 tempSubjects 数组。
- 将 tempSubjects 数组转换为 Set 对象，Set 会自动去除重复项。
- 使用展开语法（...）将 Set 对象转换回数组，得到最终的唯一学科名称列表。
示例代码：
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" }
]
}
];
const tempSubjects = [];
for (const { subjects } of data) { // 遍历事件
subjects.forEach((s) => { // 遍历每个事件的subjects
tempSubjects.push(s.name); // 将所有学科名称添加到临时数组
});
}
// 使用 Set 自动去重，然后转回数组
const uniqueSubjectsNames = [...new Set(tempSubjects)];
console.log(uniqueSubjectsNames);
// 预期输出: ["Chemistry", "Physics", "Psychology", "History", "Maths", "Biology", "Geography"]进一步优化：结合 flatMap
对于现代JavaScript，我们可以进一步利用 Array.prototype.flatMap() 方法来简化收集所有学科名称的步骤，使其更加函数式和简洁。
const data = [ // ... (同上数据结构) ]; const allSubjectsNamesFlat = data.flatMap(event => event.subjects.map(subject => subject.name) ); const uniqueSubjectsNamesOptimized = [...new Set(allSubjectsNamesFlat)]; console.log(uniqueSubjectsNamesOptimized); // 预期输出: ["Chemistry", "Physics", "Psychology", "History", "Maths", "Biology", "Geography"]
注意事项：
- 性能: Set 的添加和查找操作通常具有平均 O(1) 的时间复杂度（哈希表实现）。因此，使用 Set 进行去重比 indexOf() 方法效率更高，尤其是在处理大量数据时。
- 简洁性: Set 结合展开语法提供了一种非常简洁的去重方式，代码量更少，更易于阅读和维护。
- 兼容性: Set 是ES6特性，在较老的浏览器环境中可能需要Polyfill。但在现代浏览器和Node.js环境中，可以直接使用。
性能考量与最佳实践
在选择去重方法时，性能是一个重要的考量因素：
- 小规模数据: 对于数据量较小（例如，几十到几百个元素）的场景，两种方法在实际感知上可能没有显著的性能差异。indexOf 方法的直接循环可能更易于理解。
- 大规模数据: 当数据量达到数千、数万甚至更多时，Set 方法的性能优势将变得非常明显。其内部优化使得它在处理大量重复项时依然能保持高效。
- 代码风格: Set 方法通常被认为是更现代、更函数式的JavaScript编程风格。结合 flatMap 等高阶函数，可以写出更具表达力的代码。
总结
本文介绍了两种在JavaScript中从复杂嵌套对象数组中提取唯一属性值的方法。
- 迭代与条件判断 (indexOf): 简单直观，但对于大规模数据，由于 indexOf 的线性查找特性，性能会逐渐下降。
- 利用 Set 集合: 高效且简洁，是处理去重任务的推荐方法，尤其适用于大数据量场景。结合 flatMap 可以进一步简化代码。
在实际开发中，除非有特定的兼容性要求（需要支持非常老的浏览器），强烈建议使用 Set 来处理去重任务，因为它在性能和代码可读性方面都表现出色。理解这两种方法及其优缺点，能帮助开发者根据具体场景做出明智的选择。
