Javascript 正在寻找一种更简洁的方法来处理包含嵌套数据的数组

我目前正在开发一个Angular应用程序，希望迭代具有嵌套数据的对象数组。我想在用户单击复选框时改变现有数组，将checked属性从false更改为true，反之亦然。为了简单起见，我只发布数组结构

我试过了

const checklistCashe = [
  {
    categories: [
      { 
        title: "Administrators",
        items: [
          {subTitle: "Admin", checked: false},
          {subTitle: "Associates", checked: false},
          {subTitle: "Hr", checked: false},
        ]
      },
      { 
        title: "Associates",
        items: [
          {subTitle: "Admin", checked: false},
          {subTitle: "Associates", checked: false},
          {subTitle: "Hr", checked: false},
          {subTitle: "Users", checked: false},
        ]
      },
      { 
        title: "Organization",
        items: [
          {subTitle: "Contract", checked: false},
          {subTitle: "External", checked: false},
          {subTitle: "Internal", checked: false},
        ]
      },
      { 
        title: "Products",
        items: [
          {subTitle: "Concept", checked: false},
          {subTitle: "Demo", checked: false},
          {subTitle: "Production", checked: false},
        ]
      },
      { 
        title: "Reporting",
        items: [
          {subTitle: "Admin", checked: false},
          {subTitle: "Associates", checked: false},
          {subTitle: "Hr", checked: false},
        ]
      }
    ]
  }
]

const category = "Reporting";
const subCategory = "Admin";

我想根据提供的类别和子类别修改当前数组。因此，我只想在标题为Reporting且副标题为Admin时更改checked属性

{ 
  title: "Reporting",
  items: [
    {subTitle: "Admin", checked: true},
    {subTitle: "Associates", checked: false},
    {subTitle: "Hr", checked: false},
  ]
}

---

最好的方法是：

功能切换选中（标题、副标题）{
checklistCashe[0]。类别。forEach（（类别）=>{
如果（category.title==title）{
category.items.forEach（（item）=>{
如果（item.subTitle==subTitle）{
item.checked=！item.checked；
}
});
}
});
}

但是，我觉得您最好将checklistcash格式设置为：

const checklistCashe={
管理员：{
管理员：错，
同事：错，
Hr：错
}
[...]
}

然后你可以做一些更像：

功能切换选中（标题、副标题）{
checklistCashe[title][subtitle]=！checklistCashe[title][subtitle]
}

您不必进行迭代。

使用嵌套映射调用：

function mutate (arr)
{
    return arr.map(innerArr =>
    {
        return {
            title: innerArr.title,
            items: innerArr.items.map(item => {
                return {
                    subTitle: item.subTitle,
                    checked: (innerArr.title === "Reporting" && item.subTitle === "Admin") ? false : item.checked,
                };
            }),
        };
    });
}

---

如果你想保持它干净，那么使用lodash，如下所示

常量checkListCache=[
{
类别：[
{
标题：“管理员”，
项目：[
{副标题：“管理”，选中：false}，
{副标题：'Associates'，选中：false}，
{副标题：“Hr”，选中：false}，
],
},
{
标题：“合伙人”，
项目：[
{副标题：“管理”，选中：false}，
{副标题：'Associates'，选中：false}，
{副标题：“Hr”，选中：false}，
{字幕：“用户”，选中：false}，
],
},
{
标题:"组织",，
项目：[
{副标题：“合同”，勾选：false}，
{副标题：“外部”，选中：false}，
{副标题：“内部”，选中：false}，
],
},
{
标题：“产品”，
项目：[
{副标题：“概念”，选中：false}，
{副标题：“演示”，选中：false}，
{副标题：“制作”，选中：false}，
],
},
{
标题：“报告”，
项目：[
{副标题：“管理”，选中：false}，
{副标题：'Associates'，选中：false}，
{副标题：“Hr”，选中：false}，
],
},
],
},
];
常量类别=‘报告’；
常量子类别='Admin'；
const{categories}=checkListCache[0]；
const selectedCategory=uu.find（categories，['title'，category]）；
const selectedSubCategory=uu.find（selectedCategory.items，['subTitle'，subCategory]）；
selectedSubCategory.checked=！selectedSubCategory.checked；
log（checkListCache）；

---

您还可以在每个循环之前添加安全检查，以确保在操作它之前我们有值。

比什么更简洁？你现有的代码是什么？到目前为止你试过什么？？