如何用JavaScript按值对比两个表格，标记差异并标注不存在项

对比规则 #

• 按值对比，标记出数值存在差异的项
• 若某条记录在另一张表中不存在，则标注「不存在」

具体场景说明 #

第二张表中有两条人员信息的partNo、name一致但age不同，第一张表中仅有其中一条匹配的同信息记录，需要将第二张表中多出的那条记录标注为在第一张表中不存在，最终输出效果要和示例示意图一致。

JS 代码 #

const firstArr = [
    { partNo: '1',name: 'Per', age: '35'},
    { partNo: '3',name: 'Tom', age: '27'},
    {partNo: '6', name: 'Alex',age: '18'}
]
const secondArr = [
    { partNo: '1', name: 'Per', age: '33'},
    { partNo: '3', name: 'Tom', age: '27'},
    { partNo: '6', name: 'Alex', age: '18'},
    { partNo: '6',  name: 'Alex', age: '22'}
]

let table1 = `<table><tr><th>PartNo</th><th>Name</th><th>Age</th></tr>`
let table2 = `<table><tr><th>PartNo</th><th>Name</th><th>Age</th></tr>`

for (let i = 0; i < firstArr.length; i++) {   
for (let j = 0; j < secondArr.length; j++) {
    table1 += `<tr><td>${firstArr[i].partNo}</td><td>${firstArr[i].name}</td><td>${firstArr[i].age}</td></tr>`
    table2 +=  `<tr><td>${secondArr[j].partNo}</td><td>${secondArr[j].name}</td><td>${secondArr[j].age}</td></tr>`
}
}
table1 += `</table>`
table2 += `</table>`
document.getElementById('firstTable').innerHTML = table1
document.getElementById('secondTable').innerHTML = table2

HTML 代码 #

<div style="display: flex;">
<div id="firstTable"></div>
<div>''''''''</div>
<div id="secondTable"></div>
</div>

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