如何获取JavaScript中用户更新后的非初始选中对象集合？

需求说明 #

给定初始选中ID数组Ids，以及已初始化checked属性的对象数组：

• 初始加载时，Ids中ID对应的对象checked设为true。
• 用户通过复选框更新对象的checked属性后，需要：
  • 若用户操作后，当前选中集合与初始选中集合完全一致，返回空对象{}。
  • 若存在差异（比如取消了某个初始选中项、勾选了新项），返回当前所有checked为true的对象集合。

示例场景：

• 初始选中ID：['743156', '743157']
• 用户操作：取消743156的勾选，勾选743158
• 预期返回：当前选中的743157和743158对象

实现代码 #

1. 初始化数据 #

// 初始选中ID集合（用Set提升查找效率）
const initialCheckedIds = new Set(['743156', '743157']);

// 原始对象数组（可根据实际场景从接口获取）
let roleList = [
    {
        "id": "743156",
        "role": "Authorized Redistributor (AR)",
        "checked": true,
        "checkBoxPatched": true
    },
    {
        "id": "743157",
        "role": "System Of Record (SOR)",
        "checked": true,
        "checkBoxPatched": true
    },
    {
        "id": "743158",
        "role": "Authorized Redistributor (AR)",
        "checked": false,
        "checkBoxPatched": true
    },
    {
        "id": "743159",
        "role": "System Of Record (SOR)",
        "checked": false,
        "checkBoxPatched": true
    },
    {
        "id": "743976",
        "role": "Authorized Redistributor (AR)",
        "checked": false,
        "checkBoxPatched": true
    }
];

2. 定义获取有效集合的函数 #

function getEffectiveCheckedItems() {
    // 筛选当前所有checked为true的对象
    const currentCheckedItems = roleList.filter(item => item.checked);
    // 提取当前选中的ID集合
    const currentCheckedIds = new Set(currentCheckedItems.map(item => item.id));

    // 比较当前选中集合与初始集合是否完全一致
    const isSame = currentCheckedIds.size === initialCheckedIds.size && 
                   [...initialCheckedIds].every(id => currentCheckedIds.has(id));

    // 根据比较结果返回对应内容
    return isSame ? {} : currentCheckedItems;
}

3. 测试场景 #

场景1：用户未做任何操作（选中集合与初始一致）

console.log(getEffectiveCheckedItems());
// 输出：{}

场景2：用户取消743156，勾选743158

// 模拟用户操作
roleList.find(item => item.id === '743156').checked = false;
roleList.find(item => item.id === '743158').checked = true;

console.log(getEffectiveCheckedItems());
// 输出：
// [
//     { "id": "743157", "role": "System Of Record (SOR)", "checked": true, "checkBoxPatched": true },
//     { "id": "743158", "role": "Authorized Redistributor (AR)", "checked": true, "checkBoxPatched": true }
// ]

说明 #

• 使用Set存储ID集合，能高效完成存在性检查和集合对比，性能优于数组遍历。
• 函数核心逻辑是对比当前选中状态与初始状态，完全一致则返回空对象，否则返回当前选中的所有对象，精准匹配需求要求。

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