JS修改嵌套对象数组属性 保留原结构切换selected值方法

• 实现复选框点击交互：点击对应复选框时，将匹配项的selected属性在true/false之间切换
• toggleCheck函数要求返回修改selected属性后的完整原始结构数据
• 输入数据为对象结构，对象每个属性的值均为对象数组，样例结构如下：

{
    "ModuleName": [{
            "module": "string",
            "selected": false,
            "name": "title",
            "points": [{
                    "category": "category1",
                    "description": "desc1",
                    "provided": "provided1"
                },
                {
                    "category": "category1",
                    "description": "desc",
                    "provided": "something"
                }
            ]
        },
        {
            "module": "string",
            "selected": false,
            "name": "title_one",
            "points": [{
                    "category": "category1",
                    "description": "desc1",
                    "provided": "provided1"
                },
                {
                    "category": "category1",
                    "description": "desc",
                    "provided": "something"
                }
            ]
        }
    ],
    "OtherModule": [],
    "AnotherModule": []
}

当前编写的代码返回结构不符合预期，代码如下：

function toggleCheck(checkedValue, valuesArr) {
    return {
        value: Object.entries(valuesArr).map(([key, values], i) =>
            values.map((x) => {
                return {
                    ...x,
                    selected:
                        x.name === checkedValue.name ? !x.selected : x.selected,
                };
            })
        ),
    };
}

实际返回为嵌套了value属性的二维数组，结构如下：

{
  "value": [
    [ 
      {},
      {},
      {}
    ],
    [],
    []
  ]
}

期望返回和输入结构完全一致的普通对象，结构如下：

{
    "ModuleName": [{}, {}, {}],
    "OtherModule": [],
    "AnotherModule": []
}

问题根因：

1. 额外包裹了原结构不存在的value属性
2. Object.entries遍历后返回的是键值对数组，没有重新转换为普通对象，导致原本对象的键丢失，输出变成数组结构。

function toggleCheck(checkedValue, valuesArr) {
  return Object.fromEntries(
    Object.entries(valuesArr).map(([groupKey, itemList]) => [
      groupKey,
      itemList.map(item => ({
        ...item,
        selected: item.name === checkedValue.name ? !item.selected : item.selected
      }))
    ])
  )
}

实现说明 #

• 使用Object.entries把原对象转为[键, 值数组]格式的键值对列表
• 对每个值数组，遍历内部项，匹配到name和点击复选框对应项一致的元素时，翻转selected属性，其余元素保持全属性不变
• 处理完成的键值对列表通过Object.fromEntries重新转回普通对象，完全保留原数据的键结构
• 去掉多余的value外层包裹，保证返回结构和输入结构完全一致

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