在javascript开发中，我们经常需要处理结构复杂的json数据，例如从一个包含多个事件对象的数组中，提取所有事件中涉及到的、且不重复的学科名称。这要求我们遍历嵌套结构，收集目标属性值，并最终进行去重。本文将介绍几种高效且常用的方法来解决此类问题。
示例数据结构
假设我们有以下数据，表示一系列事件及其关联的学科信息：
const eventData = [
{
"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" }
]
}
];我们的目标是从eventData中提取所有唯一的subject.name值。
方法一：传统循环与条件判断去重
这是最直观且易于理解的方法。通过嵌套循环遍历所有subjects数组，并在每次添加前检查目标数组中是否已存在该值。
实现步骤
- 初始化一个空数组，用于存储最终的唯一学科名称。
- 外层循环遍历eventData中的每个事件对象。
- 内层循环遍历当前事件对象的subjects数组。
- 对于每个学科对象，获取其name属性。
- 使用Array.prototype.indexOf()方法检查该name是否已存在于结果数组中。
- 如果不存在，则将其添加到结果数组。
示例代码
const allUniqueSubjects_v1 = [];
for (const { subjects } of eventData) {
subjects.forEach((s) => {
if (allUniqueSubjects_v1.indexOf(s.name) === -1) {
allUniqueSubjects_v1.push(s.name);
}
});
}
console.log("方法一结果:", allUniqueSubjects_v1);
// 预期输出: ["Chemistry", "Physics", "Psychology", "History", "Maths", "Biology", "Geography"]注意事项
- 可读性: 对于小型数据集，这种方法非常直观。
- 性能: indexOf操作在每次查找时都需要遍历数组，其时间复杂度为O(n)。如果结果数组allUniqueSubjects_v1非常大，并且需要添加的元素也很多，整体性能可能会下降，达到O(n*m)的复杂度（n为事件数量，m为学科总数，每次indexOf最坏情况遍历m个元素）。
方法二：先收集再利用Set去重
此方法首先将所有学科名称（包括重复的）收集到一个临时数组中，然后利用JavaScript的Set对象自动去重。Set是一种只存储唯一值的集合。
立即学习“Java免费学习笔记（深入）”；
实现步骤
- 初始化一个空数组，用于临时存储所有学科名称（包含重复）。
- 通过嵌套循环遍历所有subjects数组，将所有subject.name添加到临时数组中。
- 将临时数组作为参数传入new Set()构造函数，创建一个包含所有唯一学科名称的Set。
- 使用展开运算符（...）将Set转换回数组。
示例代码
const allSubjectsWithDuplicates = [];
for (const { subjects } of eventData) {
subjects.forEach((s) => {
allSubjectsWithDuplicates.push(s.name);
});
}
const allUniqueSubjects_v2 = [...new Set(allSubjectsWithDuplicates)];
console.log("方法二结果:", allUniqueSubjects_v2);
// 预期输出: ["Chemistry", "Physics", "Psychology", "History", "Maths", "Biology", "Geography"]注意事项
- 性能: Set的添加和检查唯一性操作通常是O(1)的平均时间复杂度。因此，这种方法在处理大量数据时通常比方法一更高效。
- 简洁性: 使用Set进行去重代码更简洁。
- 内存: 需要一个额外的临时数组来存储所有元素，这可能会占用更多内存，尤其是在原始数据量非常大的情况下。
方法三：使用 flatMap 和 Set 结合（推荐）
对于现代JavaScript开发，结合使用Array.prototype.flatMap()和Set是提取和去重嵌套数组属性的优雅且高效的方式。flatMap方法首先使用映射函数映射每个元素，然后将结果展平到一个新数组中。
实现步骤
- 使用flatMap遍历eventData，对于每个事件对象，返回其subjects数组中所有name属性组成的数组。flatMap会自动将这些子数组展平为一个单一的数组。
- 将flatMap的结果（包含所有学科名称，可能重复）作为参数传入new Set()构造函数。
- 使用展开运算符（...）将Set转换回数组。
示例代码
const allUniqueSubjects_v3 = [...new Set(
eventData.flatMap(event => event.subjects.map(subject => subject.name))
)];
console.log("方法三结果:", allUniqueSubjects_v3);
// 预期输出: ["Chemistry", "Physics", "Psychology", "History", "Maths", "Biology", "Geography"]注意事项
- 简洁性与函数式编程: 这种方法体现了函数式编程的风格，代码更加紧凑和声明式。
- 性能: flatMap和map操作的复杂度是O(n)，Set的去重操作平均复杂度也是O(n)。因此，整体性能与方法二相似，且通常优于方法一。
- 可读性: 对于熟悉高阶函数（如map和flatMap）的开发者来说，这种方法非常清晰。
- 浏览器兼容性: flatMap是ES2019引入的特性，在较旧的浏览器环境中可能需要Polyfill。不过，现代浏览器和Node.js环境都已广泛支持。
总结与选择
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 方法一：循环+条件判断 | 直观易懂，代码逻辑清晰 | 大数据量时性能较差（indexOf为O(n)） | 数据量较小，或需要兼容旧环境时 |
| 方法二：先收集+Set去重 | 性能好（Set去重平均O(1)），代码简洁 | 需要一个中间数组，可能占用额外内存 | 大数据量，对性能有较高要求时 |
| 方法三：flatMap+Set | 最简洁、函数式、高性能、现代JS推荐 | flatMap兼容性（ES2019），需要熟悉高阶函数 | 现代项目，追求代码简洁和高性能时 |
在选择方法时，应综合考虑数据量大小、对性能的要求、代码的可读性以及项目对JavaScript语言特性的兼容性需求。对于大多数现代Web应用和Node.js项目，方法三（flatMap和Set结合）通常是提取嵌套属性唯一值的最佳实践。如果需要兼容非常老的浏览器，方法二或方法一可能是更稳妥的选择。
