如何用jQuery/JavaScript对比两个复杂对象数组并修改Array1？

云上老周

2026-8-3

使用jQuery实现两个对象数组的对比更新

需求说明

若Array1中存在的INPUT_ID在Array2中不存在，将该元素的ACTIVE_FLAG设为"3"；
若Array2中存在的INPUT_ID在Array1中不存在，将该元素添加到Array1并设置ACTIVE_FLAG为"2"。

给定数组

const Array1 = [
    {INPUT_ID: 1, INPUT_VAL: "Test1", ACTIVE_FLAG: 1}, 
    {INPUT_ID: 2, INPUT_VAL: "Test2", ACTIVE_FLAG: 1}, 
    {INPUT_ID: 3, INPUT_VAL: "Test3", ACTIVE_FLAG: 1}, 
    {INPUT_ID: 4, INPUT_VAL: "Test4", ACTIVE_FLAG: 1}
];

const Array2 = [
    {INPUT_ID: 1, INPUT_VAL: "Test1"}, 
    {INPUT_ID: 2, INPUT_VAL: "Test2"}, 
    {INPUT_ID:4, INPUT_VAL: "Test4"}, 
    {INPUT_ID: 5, INPUT_VAL: "Test5"}
];

实现代码

// 提取Array2的所有INPUT_ID，用于快速校验
const array2Ids = $.map(Array2, item => item.INPUT_ID);

// 处理需求1：标记Array1中不在Array2的元素
$.each(Array1, (_, item) => {
    if ($.inArray(item.INPUT_ID, array2Ids) === -1) {
        item.ACTIVE_FLAG = "3";
    }
});

// 处理需求2：添加Array2中不在Array1的元素
$.each(Array2, (_, item) => {
    const isExist = $.grep(Array1, ele => ele.INPUT_ID === item.INPUT_ID).length > 0;
    if (!isExist) {
        Array1.push({
            ...item,
            ACTIVE_FLAG: "2"
        });
    }
});

// 查看最终结果
console.log(Array1);

代码说明

用$.map把Array2的INPUT_ID提取为单独数组，后续用$.inArray可以快速判断元素是否存在；
用$.each遍历Array1，校验每个元素的INPUT_ID是否在Array2中，不在则修改ACTIVE_FLAG为"3"；
再次用$.each遍历Array2，通过$.grep检查当前元素是否已存在于Array1，不存在则添加新元素并设置ACTIVE_FLAG为"2"。

最终输出结果

Array1 = [
    {INPUT_ID: 1, INPUT_VAL: "Test1", ACTIVE_FLAG: 1},
    {INPUT_ID: 2, INPUT_VAL: "Test2", ACTIVE_FLAG: 1},
    {INPUT_ID: 3, INPUT_VAL: "Test3", ACTIVE_FLAG: "3"},
    {INPUT_ID: 4, INPUT_VAL: "Test4", ACTIVE_FLAG: 1},
    {INPUT_ID: 5, INPUT_VAL: "Test5", ACTIVE_FLAG: "2"}
];