本文将介绍一种在 TypeScript 中高效处理两个大型对象数组的方法，目标是将一个数组（marks）中的特定属性（marks和grade）合并到另一个数组（students）中，基于共同的id字段。 传统方法使用嵌套循环会导致 O(n*m) 的时间复杂度，当数组规模较大时，性能会显著下降。本文将介绍如何利用 Map 数据结构和空值合并赋值运算符优化这一过程，将时间复杂度降低到 O(n+m)。
优化思路
核心思想是将 students 数组转换为一个 Map 对象，其中 key 为 id，value 为对应的学生对象。这样，在遍历 marks 数组时，可以直接通过 id 从 Map 中查找对应的学生对象，从而避免了内层循环。此外，利用空值合并赋值运算符 ??=，可以安全地更新学生对象的 marks 和 grade 属性，避免覆盖已有的非空值。
实现步骤
-
将 students 数组转换为 Map 对象:
const studentMap = new Map(students.map(student => [student.id, { ...student }]));这段代码使用 Array.map() 方法将 students 数组的每个元素转换为一个键值对，其中 key 为 student.id，value 为学生对象的浅拷贝。然后，使用 new Map() 构造函数创建一个 Map 对象。浅拷贝 ...student 可以避免修改原始的 students 数组。
-
遍历 marks 数组，更新 studentMap 中的学生对象:
Scrapfly SDK TypeScript下载使用 Scrapfly SDK（scrapfly-sdk）在 TypeScript 或 JavaScript 中进行网页抓取，用于用户请求抓取 URL、绕过反爬虫防护、渲染页面等场景。
marks.forEach(mark => { const student = studentMap.get(mark.id); if (student) { if (mark.grade !== null) { student.grade ??= mark.grade; } if (mark.marks !== null) { student.marks ??= mark.marks; } } });这段代码使用 Array.forEach() 方法遍历 marks 数组。对于每个 mark 对象，首先通过 studentMap.get(mark.id) 查找对应的学生对象。如果找到，则使用空值合并赋值运算符 ??= 更新 student.grade 和 student.marks 属性。??= 运算符只有在左侧操作数为 null 或 undefined 时，才会将右侧操作数赋值给左侧操作数。这确保了我们只更新学生对象的空值属性，而不会覆盖已有的非空值。
-
将 Map 对象转换为数组:
const result = Array.from(studentMap.values());
最后，使用 Array.from(studentMap.values()) 将 Map 对象的值转换为数组。
完整代码示例
const marks = [
{ "id": 1, "marks": null, "grade": "A" },
{ "id": 1, "marks": 90, "grade": null },
{ "id": 1, "marks": 90, "grade": "A" },
{ "id": 2, "marks": 65, "grade": "B" }
];
const students = [
{ "id": 1, "name": "john" },
{ "id": 2, "name": "anna" }
];
const studentMap = new Map(students.map(student => [student.id, { ...student }]));
marks.forEach(mark => {
const student = studentMap.get(mark.id);
if (student) {
if (mark.grade !== null) {
student.grade ??= mark.grade;
}
if (mark.marks !== null) {
student.marks ??= mark.marks;
}
}
});
const result = Array.from(studentMap.values());
console.log(result);性能分析
- 将 students 数组转换为 Map 对象: O(n)
- 遍历 marks 数组，更新 studentMap 中的学生对象: O(m)
- 将 Map 对象转换为数组: O(n)
因此，总的时间复杂度为 O(n) + O(m) + O(n) = O(n + m)。 空间复杂度主要取决于 studentMap 的大小，为 O(n)。
注意事项
- 确保 id 字段在两个数组中都存在且唯一，否则可能导致数据合并错误。
- 如果 students 数组非常大，可以考虑使用更高效的 Map 实现，例如使用第三方库提供的 Map。
- 空值合并赋值运算符 ??= 是 ES2020 引入的特性，如果需要兼容旧版本的 JavaScript，可以使用传统的 if 语句来实现相同的功能。
总结
通过将 students 数组转换为 Map 对象，并结合空值合并赋值运算符，我们可以显著提高处理大型对象数组的效率，将时间复杂度从 O(n*m) 降低到 O(n+m)。 这种方法适用于需要根据共同字段合并两个数组的场景，并且可以轻松地应用于其他类似的问题。
