如何对比数组键值并更新差异值？JS数组属性匹配更新

需求说明 #

当arr1和arr2中对象的value字段匹配时，将arr2的show字段同步到arr1，并反向设置arr1的hide值（show: false对应hide: true，show: true对应hide: false），同时保留arr1原有其他属性。

实现代码 #

const arr1 = [{
        text: 'status',
        value: 'status',
        hide: false,
        validate: true,
        sort: true
    },
    {
        text: 'address',
        value: 'add',
        hide: false,
        validate: true,
        sort: true
    },
    {
        text: 'Last Name',
        value: 'lname',
        hide: false,
        validate: true,
        sort: true
    },
    {
        text: 'First Name',
        value: 'fname',
        hide: false,
        validate: true,
        sort: true
    },
    {
        text: 'age',
        value: 'age',
        hide: false,
        validate: true,
        sort: true
    },
];

const arr2 = [{
        text: 'status',
        value: 'status',
        show: false
    },
    {
        text: 'address',
        value: 'add',
        show: false
    },
    {
        text: 'Last Name',
        value: 'lname',
        show: false
    },
    {
        text: 'First Name',
        value: 'fname',
        show: true
    },
];

// 处理逻辑
const updatedArr1 = arr1.map(item1 => {
    // 在arr2中匹配value相同的对象
    const matchedItem = arr2.find(item2 => item2.value === item1.value);
    if (matchedItem) {
        // 保留原属性，同步show并反向设置hide
        return {
            ...item1,
            show: matchedItem.show,
            hide: !matchedItem.show
        };
    }
    // 无匹配项则保留原对象
    return item1;
});

console.log(updatedArr1);

代码说明 #

1. 用Array.map()遍历arr1生成新数组，避免直接修改原数组
2. 通过Array.find()在arr2中定位value匹配的对象
3. 找到匹配项时，用扩展运算符...保留arr1原有属性，覆盖show字段并将hide设为show的取反值
4. 无匹配的对象（比如示例中的age）保持原有属性不变

输出结果示例 #

处理后的updatedArr1关键对象变化：

• status对象：{text: 'status', value: 'status', hide: true, show: false, validate: true, sort: true}
• fname对象：{text: 'First Name', value: 'fname', hide: false, show: true, validate: true, sort: true}
• age对象完全保留原属性

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