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

在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数组，并在每次添加前检查目标数组中是否已存在该值。

实现步骤

1. 初始化一个空数组，用于存储最终的唯一学科名称。
2. 外层循环遍历eventData中的每个事件对象。
3. 内层循环遍历当前事件对象的subjects数组。
4. 对于每个学科对象，获取其name属性。
5. 使用Array.prototype.indexOf()方法检查该name是否已存在于结果数组中。
6. 如果不存在，则将其添加到结果数组。

示例代码

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是一种只存储唯一值的集合。

WeShop唯象

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

113

查看详情

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

实现步骤

1. 初始化一个空数组，用于临时存储所有学科名称（包含重复）。
2. 通过嵌套循环遍历所有subjects数组，将所有subject.name添加到临时数组中。
3. 将临时数组作为参数传入new Set()构造函数，创建一个包含所有唯一学科名称的Set。
4. 使用展开运算符（...）将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方法首先使用映射函数映射每个元素，然后将结果展平到一个新数组中。

实现步骤

1. 使用flatMap遍历eventData，对于每个事件对象，返回其subjects数组中所有name属性组成的数组。flatMap会自动将这些子数组展平为一个单一的数组。
2. 将flatMap的结果（包含所有学科名称，可能重复）作为参数传入new Set()构造函数。
3. 使用展开运算符（...）将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环境都已广泛支持。

总结与选择

在选择方法时，应综合考虑数据量大小、对性能的要求、代码的可读性以及项目对JavaScript语言特性的兼容性需求。对于大多数现代Web应用和Node.js项目，方法三（flatMap和Set结合）通常是提取嵌套属性唯一值的最佳实践。如果需要兼容非常老的浏览器，方法二或方法一可能是更稳妥的选择。

以上就是高效从JavaScript嵌套对象中提取所有唯一属性值的详细内容，更多请关注php中文网其它相关文章！