Typescript React 中如何比较两个对象数组并获取不同的值

我正在try 为我的网站做一个ChangeLog.

例如，我有一个初始数组，称为initArray:

[
    {
        "id": 1,
        "val1": "2023-08-28",
        "val2": 1,
        "val3": "",
        "val4": "",
    },
    {
        "id": 2,
        "val1": "2023-08-28",
        "val2": 2,
        "val3": "",
        "val4": ""
    },
    {
        "id": 3,
        "val1": "2023-08-28",
        "val2": 0,
        "val3": "",
        "val4": ""
    }
]

然后，我有第二个数组，称为changedArray:

[
    {
        "id": 1,
        "val1": "2023-08-28",
        "val2": 1,
        "val3": "test",
        "val4": "test1"
    },
    {
        "id": 2,
        "val1": "2023-08-28",
        "val2": 2,
        "val3": "test2",
        "val4": "test3"
    },
    {
        "id": 3,
        "val1": "2023-08-28",
        "val2": 0,
        "val3": "",
        "val4": ""
    }
]

因此，我需要找到更改过的值，并输出这些值的名称和值本身.如何做到这一点呢？

预期结果如下:

[
    {
        "changedValue": "val3", 
        "previousValue": "", 
        "newValue": "test"
    },
    //And so on...
] 

数组中的元素数量是恒定的，不能删除或添加元素-只有更改.