如何在jQuery中根据数组元素更新列表并添加新元素

需求说明 #

给定包含数据与标记的列表objBaseList，需根据ID数组listIds完成两个操作：

1. 对objBaseList中存在的ID，更新其指定标记字段（示例中以Status为例，可按需修改）；
2. 对listIds中未在objBaseList找到的ID，以默认值创建新项添加至列表。

实现代码 #

var objBaseList = [{Id :1,Value:"Name1",Status:false,IsDeleted:false},
                  {Id :2,Value:"Name2",Status:false,IsDeleted:false},
                  {Id :3,Value:"Name3",Status:false,IsDeleted:false},
                  {Id :4,Value:"Name4",Status:false,IsDeleted:false},
                  {Id :5,Value:"Name5",Status:false,IsDeleted:false},
                  {Id :6,Value:"Name6",Status:false,IsDeleted:false},
                  {Id :7,Value:"Name7",Status:false,IsDeleted:false},
                  {Id :8,Value:"Name8",Status:false,IsDeleted:false},
                  {Id :9,Value:"Name9",Status:false,IsDeleted:false},
                 ];
                  
var listIds = [2,6,7,10]; // 包含一个不存在的ID用于测试

// 1. 更新已存在项的标记字段
$.each(listIds, function(index, targetId) {
    var matchedItem = $.grep(objBaseList, function(item) {
        return item.Id === targetId;
    })[0];
    
    if (matchedItem) {
        // 此处修改要更新的标记，示例为将Status设为true
        matchedItem.Status = true;
    }
});

// 2. 添加列表中不存在的ID对应的默认项
var existingIds = $.map(objBaseList, function(item) {
    return item.Id;
});

var missingIds = $.grep(listIds, function(id) {
    return $.inArray(id, existingIds) === -1;
});

$.each(missingIds, function(index, id) {
    objBaseList.push({
        Id: id,
        Value: "Name" + id, // 自定义默认Value
        Status: true,       // 自定义默认标记值
        IsDeleted: false
    });
});

// 验证结果
console.log(objBaseList);

代码说明 #

• 更新现有项：通过$.each遍历listIds，用$.grep匹配objBaseList中的对应项，找到后修改指定标记字段（可根据需求替换为IsDeleted或其他字段）。
• 添加缺失项：先通过$.map提取所有已存在的ID，再用$.grep和$.inArray筛选出listIds中未存在的ID，最后以默认结构创建新对象并推入列表。
• 可根据实际业务需求调整默认项的字段值，以及需要更新的标记字段。

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