美文网首页web前端实用知识&技巧
JS数组对象:递归通过子节点属性设置父节点属性

JS数组对象:递归通过子节点属性设置父节点属性

作者: 意随风起 | 来源:发表于2022-03-20 10:08 被阅读0次
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
        </body>
        <script type="text/javascript">
            const arr = [
                {
                    id:'1',
                    title:'1',
                    parentId: '0',
                    type: null,
                    children: []
                },
                {
                    id:'2',
                    title:'2',
                    type: null,
                    parentId: '0',
                    children: [
                        {
                            id:'2-1',
                            title:'2-1',
                            type: null,
                            parentId: '2',
                            children: []
                        }
                    ]
                },
                {
                    id:'3',
                    title:'3',
                    type: null,
                    parentId: '0',
                    children: [
                        {
                            id:'3-1',
                            title:'3-1',
                            type: 1,
                            parentId:'3',
                            children: []
                        }
                    ]
                },
                {
                    id:'4',
                    title:'4',
                    type: null,
                    parentId: '0',
                    children: []
                },
                {
                    id:'5',
                    title:'5',
                    type: null,
                    parentId: '0',
                    children: [
                        {
                            id:'5-1',
                            title:'5-1',
                            type: null,
                            parentId: '5',
                            children: [
                                {
                                    id:'5-1-1',
                                    title:'5-1-1',
                                    type: 1,
                                    parentId:'5-1',
                                    children: []
                                }
                            ]
                        },
                        {
                            id:'5-2',
                            title:'5-2',
                            type: 1,
                            parentId: '5',
                            children: [
                                {
                                    id:'5-2-1',
                                    title:'5-2-1',
                                    type: 1,
                                    parentId:'5-2',
                                    children: []
                                }
                            ]
                        }
                    ]
                },
                {
                    id:'6',
                    title:'6',
                    type: 1,
                    parentId: '0',
                    children: [
                        {
                            id:'6-1',
                            title:'6-1',
                            type: 1,
                            parentId: '6',
                            children: [
                                {
                                    id:'6-1-1',
                                    title:'6-1-1',
                                    type: 1,
                                    parentId:'6-1',
                                    children: [
                                        {
                                            id:'6-1-1-1',
                                            title:'6-1-1-1',
                                            type: 1,
                                            parentId:'6-1-1',
                                            children: []
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
            let parentLoopIds = []
            // 通过id找父id(包括自己)
            function getParentIdList(array, id) {
                let parentArray = [];
            
                if (array.length === 0) {
                    return parentArray;
                }
            
                const recursion = function (arrayNew, id) {
                    for (let i = 0; i < arrayNew.length; i++) {
                        let node = arrayNew[i];
                        if (node.id === id) {
                            parentArray.unshift(id);
                            recursion(array, node.parentId);
                            break;
                        } else {
                            if (!!node.children) {
                                recursion(node.children, id);
                            }
                        }
                    }
                    return parentArray;
                }
                let arrayNew = array;
                parentArray = recursion(arrayNew, id);
                return parentArray;
            }
            function childToParentLoop(data, setKey, compareKey, compareVal) {
                data.map(dataItem => {
                    if (dataItem.type === 1) {
                        let tempArr = getParentIdList(JSON.parse(JSON.stringify(arr)), dataItem.id)
                        // 过滤自己
                        tempArr = tempArr.filter(tempArrItem => tempArrItem !== dataItem.id)
                        // 合并
                        parentLoopIds = parentLoopIds.concat(tempArr)
                    }
                    if (dataItem.children && dataItem.children.length) {
                        childToParentLoop(dataItem.children, setKey, compareKey, compareVal)
                    }
                })
                // 去重
                parentLoopIds = parentLoopIds.filter((currentValue, index, arrSelf) => {
                    return arrSelf.indexOf(currentValue, 0) === index;
                });
                return parentLoopIds
            }
            console.log('arr', arr)
            console.log('setTreeList', childToParentLoop(JSON.parse(JSON.stringify(arr)), 'type', 'type', 1))
        </script>
    </html>
    
    

    相关文章

      网友评论

        本文标题:JS数组对象:递归通过子节点属性设置父节点属性

        本文链接:https://www.haomeiwen.com/subject/jtpodrtx.html