javascript 树形数据转化维数组

最新推荐文章于 2023-05-30 14:32:41 发布

原创最新推荐文章于 2023-05-30 14:32:41 发布 · 968 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#javascript #遍历 #数据 #树

javascript 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用JavaScript将树形数据结构转换为一维数组的方法。通过递归删除子节点并将其追加到原始数组末尾的方式，实现树形数据的扁平化处理。

javascript 树形数据转化维数组

废话不多说直接上代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历树</title>
</head>
<body>


<script>
    window.onload = function () {
        var data = [
            {
                "id": 1,
                "text": "aa",
                "children": [
                    {"id": 2, "text": "bb"},
                    {"id": 3, "text": "cc"},
                    {"id": 4, "text": "dd"},
                    {"id": 5, "text": "ee"},
                    {
                        "id": 6, 
                        "text": "ff",
                        "children": [
                            {"id": 7, "text": "gg"},
                            {"id": 8, "text": "hh"},
                        ]
                    }
                ]
            },
            {
                "id": 10,
                "text": "aa0",
                "children": [
                    {"id": 20, "text": "bb0"},
                    {"id": 30, "text": "cc0"},
                    {"id": 40, "text": "dd0"},
                    {"id": 50, "text": "ee0"},
                    {
                        "id": 60, 
                        "text": "ff0",
                        "children": [
                            {"id": 70, "text": "gg0"},
                            {"id": 80, "text": "hh0"},
                        ]
                    }
                ]
            }
        ];

        console.log(convert_tree_data(data));

        function convert_tree_data(data) {
            for (var i = 0; i < data.length; i++) {
                if (data[i].children != undefined) {
                    var temp = data[i].children;
                    // 删除孩子节点
                    delete data[i].children;
                    // 孩子节点加入数组末尾
                    for (var j = 0; j < temp.length; j++) {
                        data.push(temp[j]);
                    }
                }
            }

            return data;
        }
    }

</script>


</body>
</html>