如何优化在Map中切换元素状态的toggleSelect函数？

对齐原API的优化版本 #

完全保留原函数入参与逻辑行为，修复潜在问题并提升可读性：

toggleSelect(key: string, object: RegistryLayerItemGeneric, selected: boolean) {
    // 前置获取当前key对应存储对象，兜底为空避免undefined展开报错
    const currentObjects = this.state.selectedRegistryObjects.get(key) ?? {};
    const targetId = object.ObjectId;

    if (selected) {
        // 选中状态下剔除目标对象
        const { [targetId]: _, ...remainingObjects } = currentObjects;
        this.state.selectedRegistryObjects.set(key, remainingObjects);
        return;
    }

    // 未选中状态下新增目标对象
    this.state.selectedRegistryObjects.set(key, {
        ...currentObjects,
        [targetId]: object
    });
}

核心优化点 #

• 修复潜在崩溃问题：原代码当selected为true且对应key不存在时，拿到的objects为undefined，展开操作会直接抛出异常，优化后统一用空对象兜底
• 规避副作用：用对象解构剔除属性替代delete操作，不会修改原存储对象，符合不可变数据规范，降低state管理的不可预期风险
• 减少冗余逻辑：公共的对象获取逻辑前置，两个分支不需要重复执行取值操作，代码结构更清晰
• 语法更简洁：去掉不必要的嵌套对象展开，代码可读性大幅提升

纯切换逻辑简化版 #

如果业务确实是「元素已存在则删除、不存在则新增」的自动切换逻辑，不需要外部传入selected参数，可进一步简化为：

toggleSelect(key: string, object: RegistryLayerItemGeneric) {
    const currentObjects = this.state.selectedRegistryObjects.get(key) ?? {};
    const targetId = object.ObjectId;
    let updatedObjects;

    if (targetId in currentObjects) {
        // 存在则删除
        const { [targetId]: _, ...rest } = currentObjects;
        updatedObjects = rest;
    } else {
        // 不存在则新增
        updatedObjects = { ...currentObjects, [targetId]: object };
    }

    this.state.selectedRegistryObjects.set(key, updatedObjects);
}

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