当前位置：首页 > 文章列表 > 文章 > 前端 > TypeScript处理大对象数组的优化技巧

TypeScript处理大对象数组的优化技巧

2025-07-30 10:15:25 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

文章不知道大家是否熟悉？今天我将给大家介绍《TypeScript优化：高效处理大型对象数组技巧》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

高效处理大型对象数组：TypeScript 优化技巧

本文将介绍一种在 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 中的学生对象:
```
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);