美文网首页
JS 二维数组转树结构

JS 二维数组转树结构

作者: 亦然Dir | 来源:发表于2020-06-16 14:49 被阅读0次
    // 原始数组
    let input = [
        ["新闻", "体育", "网球", "国外"],
        ["新闻", "体育", "网球", "国内"],
        ["产品", "互联网", "金融"],
        ["新闻", "房产", "深圳"],
        ["新闻", "房产", "上海"],
        ["新闻", "体育", "羽毛球"],
        ["产品", "互联网", "保险"]
    ]
    // 得到的期望值
    let ouput = [{
        "name": "新闻",
        "children": [{
            "name": "体育",
            "children": [{
                "name": "网球",
                "children": [{
                    "name": "国外"
                }, {
                    "name": "国内"
                }]
            }, {
                "name": "羽毛球"
            }]
        }, {
            "name": "房产",
            "children": [{
                "name": "深圳"
            }, {
                "name": "上海"
            }]
        }]
    }, {
        "name": "产品",
        "children": [{
            "name": "互联网",
            "children": [{
                "name": "金融"
            }, {
                "name": "保险"
            }]
        }]
    }]
    
    

    学习了一下class类 用class类简单写一个

        class Point {
        // 在构造函数里面将对象初始化成我想要的格式
            constructor(arr) {
                this.obj = {}
                this.initTree(arr)
            }
            initTree(params, curr) {
                if (Array.isArray(params)) {
                    params.forEach(v => {
                        this.initTree(v, params)
                    })
                } else {
                    let index = curr.indexOf(params)
                    this.obj[index] || (this.obj[index] = {})
                    if (!curr[index - 1]) {
                        this.obj[index][params] = {
                            parent: 'root',
                            hasChildre: curr[index + 1] ? true : false,
                            name: params
                        }
                    } else {
                        this.obj[index][params] = {
                            parent: curr[index - 1],
                            hasChildre: curr[index + 1] ? true : false,
                            name: params
                        }
                    }
                }
            }
            getChildred(i, parentName) {
                let index = Number(i) + 1
                let currChildren = this.obj[index]
                let children = []
                Object.keys(currChildren).forEach(c => {
                    if (currChildren[c].parent === parentName) {
                        children.push({
                            name: currChildren[c].name,
                            children: currChildren[c].hasChildre ? this.getChildred(Number(i) + 1, currChildren[c].name) : undefined
                        })
                    }
                })
                return children
            }
            getTree() {
                let tree = []
                // 循环数组拿到根目录 判断是否有子节点 然后递归调用子节点
                Object.keys(this.obj).forEach(i => {
                    let ins = this.obj[i]
                    Object.keys(ins).forEach(v => {
                        if (ins[v].parent === 'root') {
                            tree.push({
                                name: ins[v].name,
                                children: ins[v].hasChildre ? this.getChildred(i, ins[v].name) : undefined
                            })
                        }
                    })
                })
                // 这里用转JSON是为了去掉undefined的chilidren
                return JSON.parse(JSON.stringify(tree))
            }
        }
    
        var point = new Point(arr);
    
        console.log(point, point.getTree());
    

    相关文章

      网友评论

          本文标题:JS 二维数组转树结构

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