JS算法题(数组转树)

76 阅读1分钟
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        const SourceArr = [
            { id: '1', parentId: 0, name: '标题1' },
            { id: '1.1', parentId: '1', name: '标题1-1' },
            { id: '1.1.1', parentId: '1.1', name: '标题1-1-1' },
            { id: '2', parentId: 0, name: '标题2' },
            { id: '2.1', parentId: '2', name: '标题2-1' },
            { id: '2.2', parentId: '2', name: '标题2-2' },
            { id: '2.2.2', parentId: '2.2', name: '标题2-2-2' },
            { id: '3', parentId: 0, name: '标题3' },
        ]

        function getData(arr) {
            return arr.filter(function (item) {
                item.children = arr.filter(function (child) {
                    return item.id === child.parentId
                })

                return item.parentId === 0
            })
        }


        const TargetArr = getData(SourceArr)
        console.log('TargetArr', TargetArr)
    </script>
</body>

</html>

递归方法

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var input = [
            {
                id: 1,
                val: "学校",
                parentId: null
            },
            {
                id: 2,
                val: "班级1",
                parentId: 1,
            },
            {
                id: 3,
                val: "班级2",
                parentId: 1,
            },
            {
                id: 4,
                val: "学生1",
                parentId: 2,
            },
            {
                id: 5,
                val: "学生2",
                parentId: 3,
            },
            {
                id: 6,
                val: "学生3",
                parentId: 3,
            },
        ];




        var newInput = []

        function setTree(arr, target, id) {
            arr.forEach(function (item) {
                if (item.parentId === id) {
                    item.children = []

                    setTree(input, item.children, item.id)

                    target.push(item)
                    !item.children.length && delete item.children
                }
            })
        }

        setTree(input, newInput, null)
        console.log(newInput)























        var arr = [
            {
                id: 1,
                val: "学校",
                parentId: null,
                children: [
                    {
                        id: 2,
                        val: "班级1",
                        parentId: 1,
                        children: [
                            {
                                id: 4,
                                val: "学生1",
                                parentId: 2,
                            },
                        ],
                    },
                    {
                        id: 3,
                        val: "班级2",
                        parentId: 1,
                        children: [
                            {
                                id: 5,
                                val: "学生2",
                                parentId: 3,
                            },
                            {
                                id: 6,
                                val: "学生3",
                                parentId: 3,
                            },
                        ],
                    },
                ],
            },
        ];
        /**
            请将上述数组转换为:
            [
                {
                    id: 1,
                    val: "学校",
                    parentId: null,
                    children: [
                        {
                            id: 2,
                            val: "班级1",
                            parentId: 1,
                            children: [
                                {
                                    id: 4,
                                    val: "学生1",
                                    parentId: 2,
                                },
                            ],
                        },
                        {
                            id: 3,
                            val: "班级2",
                            parentId: 1,
                            children: [
                                {
                                    id: 5,
                                    val: "学生2",
                                    parentId: 3,
                                },
                                {
                                    id: 6,
                                    val: "学生3",
                                    parentId: 3,
                                },
                            ],
                        },
                    ],
                },
            ];
         */
    </script>
</body>

</html>