js for 循环将二维数组转化为树结构；递归将二维数组转化成树结构

项目需求有用到，其实是级联选择器中的数据有需要处理，处理了蛮久，做下笔记

for 循环

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

<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>树状结构数据处理</title>
</head>

<body>
    <script>
        // 通过循环将二维数组调整成树状结构
        const arr = [
            ["a", "aa", "aaa", "aaaa"],
            ["a", "aa", "aab"],
            ["b", "bb", "bbb"],
            ["c", "cc", "ccc"],
            ["a", "ab", "aba"],
            ["c", "bc", "abc"],
            ["d", "cd", "bcd"],
        ]

        // 重点，利用 数组中引用了 对象不同key 将对象的指针存储到数组中，在通过对象的指针更改数据，从而更改到数组中的数据
        let list = []
        let objTemp = {}
        function arrToTree(data) {
            for (let i = 0; i < data.length; i++) {
                for (let j = 0; j < data[i].length; j++) {
                    const item = data[i][j];
                    // 每一项都 重新处理数据结构
                    if (!objTemp[item]) {
                        objTemp[item] = {
                            value: item,
                            child: [],
                        };
                    }
                    // 大于零的一项
                    if (j > 0) {
                        const parent = objTemp[data[i][j - 1]];
                        if (parent && parent.child && parent.child.indexOf(objTemp[item]) < 0) parent.child.push(objTemp[item])
                        // 每次循环的第一项
                    } else {
                        // 这里的 indexOf 判断的是引用的指针，是否存在于数组中
                        if (list.indexOf(objTemp[item]) < 0) list.push(objTemp[item])
                    }
                }
            }
        }

        arrToTree(arr)
        console.log('list', list);


    </script>

</body>

</html>

递归循环

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

<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>树状结构数据处理</title>
</head>

<body>
    <script>
        // 通过循环将二维数组调整成树状结构
        const arr = [
            ["a", "aa", "aaa", "aaaa"],
            ["a", "aa", "aab"],
            ["b", "bb", "bbb"],
            ["c", "cc", "ccc"],
            ["a", "ab", "aba"],
            ["c", "bc", "abc"],
            ["d", "cd", "bcd"],
        ]

        let treeArr = []
        let obj = {}
        // 循环递归调整树形结构
        function loopToTree(data) {
            data.forEach((item, index) => {
                // 多维数组存在的情况就会进来
                if (Array.isArray(item) && item.length) {
                    loopToTree(item)
                    // 循环遍历数组中的每一项
                } else {
                    // 每一项都 重新处理数据结构
                    if (!obj[item]) {
                        obj[item] = {
                            value: item,
                            child: [],
                        };
                    }
                    // 这里的 indexOf 判断的是引用的指针，是否存在于数组中
                    if (index === 0) {
                        // 二维数组中的第一项数据
                        if (treeArr.indexOf(obj[item]) < 0) treeArr.push(obj[item])
                    } else {
                        // 找到父类的 key 的指针
                        const key = data[index - 1]
                        // 父类
                        const parent = obj[key]
                        // 通过指针的更改，改变数组中的数据
                        if (parent && parent.child && parent.child.indexOf(obj[item]) < 0) parent.child.push(obj[item])
                    }
                }
            });
        }

        loopToTree(arr)
        console.log('treeArr', treeArr);
    </script>

</body>

</html>

总结：其实重点是对象的指针，通过指针找到对应的数据项，并进行更改，实现了去重，并重构了数据结构。这两种方法实现的都是同一种效果

js for 循环将二维数组转化为树结构；递归将二维数组转化成树结构

猜你喜欢