js树状结构树组递归并修改状态?

站长

2024年06月28日 09:17 · 阅读数 20

const arr = [{
            "id": "BC",
            "selected": true,
            "partiallySelected": false,
            "count": 175400,
            "childrens": [{
                "id": "BC-SRV",
                "selected": false,
                "partiallySelected": false,
                "count": 22609,
                "childrens": [{
                    "id": "BC-SRV-COM",
                    "selected": false,
                    "partiallySelected": false,
                    "count": 2304,
                    "childrens": [{
                        "id": "BC-SRV-COM-FTP",
                        "selected": false,
                        "partiallySelected": false,
                        "count": 187,
                        "childrens":[]
                    }, {
                        "id": "BC-SRV-COM-TEL",
                        "selected": false,
                        "partiallySelected": false,
                        "count": 137,
                        "childrens":[]
                    }, {
                        "id": "BC-SRV-COM-MSX",
                        "selected": false,
                        "partiallySelected": false,
                        "count": 222,
                        "childrens":[]
                    }, {
                         "id": "BC-SRV-COM-QQQ",
                         "selected": false,
                         "partiallySelected": false,
                         "count": 156,
                         "childrens":[]
                     }]
                }, {
                    "id": "BC-SRV-BR",
                    "selected": false,
                    "partiallySelected": false,
                    "count": 2093,
                    "childrens": []
                }, {
                    "id": "BC-SRV-GBT",
                    "selected": false,
                    "partiallySelected": false,
                    "count": 2133,
                    "childrens": []
                }]
            }, {
                "id": "BC-DB",
                "selected": false,
                "partiallySelected": false,
                "count": 20388,
                "childrens":[]
            }, {
                "id": "BC-SYB",
                "selected": true,
                "partiallySelected": false,
                "count": 13764,
                "childrens":[]
            }, {
                 "id": "BC-SYY",
                 "selected": true,
                 "partiallySelected": true,
                 "count": 22610,
                 "childrens":[]
             }]
        }];

递归树组，父节点selected为true且partiallySelected为fasle的时候，所有子节点childrens下的节点的selected则也修改为truesyncChildrenStatus(arr)后希望得到的

newArr = [{
            "id": "BC",
            "selected": true,
            "partiallySelected": false,
            "count": 175400,
            "childrens": [{
                "id": "BC-SRV",
                "selected": true,
                "partiallySelected": false,
                "count": 22609,
                "childrens": [{
                    "id": "BC-SRV-COM",
                    "selected": true,
                    "partiallySelected": false,
                    "count": 2304,
                    "childrens": [{
                        "id": "BC-SRV-COM-FTP",
                        "selected": true,
                        "partiallySelected": false,
                        "count": 187,
                        "childrens":[]
                    }, {
                        "id": "BC-SRV-COM-TEL",
                        "selected": true,
                        "partiallySelected": false,
                        "count": 137,
                        "childrens":[]
                    }, {
                        "id": "BC-SRV-COM-MSX",
                        "selected": true,
                        "partiallySelected": false,
                        "count": 222,
                        "childrens":[]
                    }, {
                         "id": "BC-SRV-COM-QQQ",
                         "selected": true,
                         "partiallySelected": false,
                         "count": 156,
                         "childrens":[]
                     }]
                }, {
                    "id": "BC-SRV-BR",
                    "selected": true,
                    "partiallySelected": false,
                    "count": 2093,
                    "childrens": []
                }, {
                    "id": "BC-SRV-GBT",
                    "selected": true,
                    "partiallySelected": false,
                    "count": 2133,
                    "childrens": []
                }]
            }, {
                "id": "BC-DB",
                "selected": true,
                "partiallySelected": false,
                "count": 20388,
                "childrens":[]
            }, {
                "id": "BC-SYB",
                "selected": true,
                "partiallySelected": false,
                "count": 13764,
                "childrens":[]
            }, {
                 "id": "BC-SYY",
                 "selected": true,
                 "partiallySelected": true,
                 "count": 22610,
                 "childrens":[]
             }]
        }]

1个回答

test

2024-06-28

function syncChildrenStatus(arr) {
  return arr.map(v => ({
    ...v,
    childrens: v.selected && !v.partiallySelected ? JSON.parse(JSON.stringify(v.childrens),(k,v) => k === 'selected' ? true : v) : syncChildrenStatus(v.childrens)
  }))
}

修改原数组：

function syncChildrenStatus(arr) {
  (function setNodeSelected(list, bol){
    list.forEach(v => {v.selected ||= bol;setNodeSelected(v.childrens, bol || v.selected && !v.partiallySelected)})
  })(arr, false)
}

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容