master

分支 (1)

管理

管理

master

high-frequency-handwriting-js
/
23、树形结构转列表.html

<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <script>
            const tree2list=(tree) => {
                let list=[]
                let queue=[...tree]

                while(queue.length) {
                    // 从前面开始取出节点
                    const node=queue.shift()
                    const children=node.children
                    // 取出当前节点的子节点，放到队列中，等待下一次循环
                    if(children.length) {
                        queue.push(...children)
                    }
                    // 删除多余的children树形
                    delete node.children
                    // 放入列表
                    list.push(node)
                }

                return list
            }

            // 测试
            const data=[
                {
                    "id": 1,
                    "name": "部门1",
                    "pid": 0,
                    "children": [
                        {
                            "id": 2,
                            "name": "部门2",
                            "pid": 1,
                            "children": []
                        },
                        {
                            "id": 3,
                            "name": "部门3",
                            "pid": 1,
                            "children": [
                                {
                                    "id": 4,
                                    "name": "部门4",
                                    "pid": 3,
                                    "children": [
                                        {
                                            "id": 5,
                                            "name": "部门5",
                                            "pid": 4,
                                            "children": []
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
            console.log(tree2list(data))
        </script>
    </body>

</html>