Angular 8中如何合并两个不同的对象数组为单个数组

我同时调用两个API，分别拿到了array1和array2的响应数据，现在需要把这两个数组中的所有对象合并为一个索引连续的数组，具体数据和预期输出如下：

原始数组数据 #

const array1 = [
    {
        "lineLossId": 1,
        "dataSource": "DFOS",
        "category": "Dressings",
        "entryDetails": {
            "month": "September",
            "year": "2023"
        },                
        "HrDbMonth": null
    },
    {
        "lineLossId": 2,
        "dataSource": "DFOS",
        "entryDetails": {
            "month": "August",
            "year": "2023"
        },                
        "HrDbMonth": null
    }
];

const array2 = [
    {
        "lineLossId": 3,
        "dataSource": "DFOS",
        "category": "Dressings",
        "entryDetails": {
            "month": "August",
            "year": 2023
        },
        "uom": "OOOUnits"
    }
];

预期输出 #

const array3 = [
    {
        "lineLossId": 1,
        "dataSource": "DFOS",
        "category": "Dressings",
        "entryDetails": {
            "month": "September",
            "year": "2023"
        },                
        "HrDbMonth": null
    },
    {
        "lineLossId": 2,
        "dataSource": "DFOS",
        "entryDetails": {
            "month": "August",
            "year": "2023"
        },                
        "HrDbMonth": null
    },
    {
        "lineLossId": 3,
        "dataSource": "DFOS",
        "category": "Dressings",
        "entryDetails": {
            "month": "August",
            "year": 2023
        },
        "uom": "OOOUnits"
    }
];

实现方法 #

1. 扩展运算符（简洁直观，推荐） #

用扩展运算符直接展开两个数组，拼接成新数组：

const array3 = [...array1, ...array2];

这种方式会生成全新数组，不修改原数组，索引自动保持连续。

2. concat() 方法 #

使用数组内置的concat方法合并，返回新数组：

const array3 = array1.concat(array2);

concat会把array2的所有元素追加到array1元素之后，生成目标数组。

3. push() 方法（修改原数组） #

如果不需要保留原array1，可以直接把array2的元素推到array1末尾：

array1.push(...array2);
// 此时array1就是合并后的结果，索引连续

这种方式直接修改原数组，适合无需保留原数组的场景。

内容的提问来源于stack exchange，提问作者Shilpa