高效处理大型对象数组：TypeScript 优化技巧-js教程-PHP中文网

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

花韻仙語

发布： 2025-07-10 19:10:25

原创

646人浏览过

高效处理大型对象数组：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 时，才会将右侧操作数赋值给左侧操作数。这确保了我们只更新学生对象的空值属性，而不会覆盖已有的非空值。

天工大模型
中国首个对标ChatGPT的双千亿级大语言模型

115

查看详情
将 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);

登录后复制