JS实现扁平数据和树状数据相互转换

文
章
目
录

• 前言
• 树状转扁平数据
• 方法一
• 方法二
• 方法三
• 扁平数据转树状
• 方法一
• 方法二

本文主要讲解关于JS实现扁平数据和树状数据相互转换相关内容，让我们来一起学习下吧！

前言

平时处理数据就经常要处理树状和平面结构数据的转化，所以就写来记一下，方便下次用直接copy，用的都是比较笨重的方法，大家要是还有其他好的方法可以分享就太感谢了

树状转扁平数据

方法一

正向深入，顺着树的方向一级级下钻，先讲父级元素添加到准备号的数组里面，如果有子级就继续深下直到不能下去
得到的数据就是顺着树方向来的,得到的数据大概是这样子的1_1，1_1_1，1_1_2，…（也可以反向下钻，将resultArr.push(val)语句放到判断的后面，得到的顺序大概是这样的1_1_1，1_1_2，1_1…）

        const arr = [
        {
            id: \'1\',
            name: \'1_1\',
            children: [
                { id: \'a\', name: \'1_1_1\' },
                { id: \'b\', name: \'1_1_2\' },
            ]
        },
        {
            id: \'2\',
            name: \'2_2\',
            children: [
                { id: \'a\', name: \'2_2_2\' }
            ]
        }
    ]
    const resultArr = []
    function treeToData(data) {
       data.map(val => {
            resultArr.push(val)
            if (val.children && val.children.length > 0) {
                treeToData(val.children)
                delete val.children
            }
        })

        return resultArr;
    }
    console.log(treeToData(arr));
    
    

方法二

使用reduce的累加，将遍历好的数据放在account里面，一开始account没有数据，所以是空数组，将当前的数据添加进来，判断有没有子级，有就递归调用方法，将返回来的数据合并

  const arr = [
        {
            id: \'1\',
            name: \'1_1\',
            children: [
                { id: \'a\', name: \'1_1_1\' },
                { id: \'b\', name: \'1_1_2\' },
            ]
        },
        {
            id: \'2\',
            name: \'2_2\',
            children: [
                { id: \'a\', name: \'2_2_2\' }
            ]
        }
    ]
    function treeToData(data, parentId = null) {
        return data.reduce((account, current) => {
            account.push({ ...current, parentId })
            if (current.children) {
                account = account.concat(treeToData(current.children, current.id))
            }
            return account
        }, [])

    }
    console.log(treeToData(arr));
    

方法三

方法三和方法二比较像，只是换一种遍历

  const arr = [
        {
            id: \'1\',
            name: \'1_1\',
            children: [
                { id: \'a\', name: \'1_1_1\' },
                { id: \'b\', name: \'1_1_2\' },
            ]
        },
        {
            id: \'2\',
            name: \'2_2\',
            children: [
                { id: \'a\', name: \'2_2_2\' }
            ]
        }
    ]
    function treeToData(data, parentId = null) {
        let resultArr = []
        for (let i = 0; i < data.length; i++) {
            resultArr.push({ ...data[i], parentId }) 
            if (data[i].children) {
                resultArr = resultArr.concat(treeToData(data[i].children, data[i].id))
            }

        }

        return resultArr

    }
    console.log(treeToData(arr));
    

扁平数据转树状

方法一

先判断是不是父级，定义一个中间变量存储该数据，如果是就递归拿到所有的子级挂载在这个临时变量上，最后将临时变量添加到最终结果上

    const arr = [
        { id: \'1\', name: \'1_1\', parentId: null },
        { id: \'2\', name: \'1_1_1\', parentId: \'1\' },
        { id: \'2\', name: \'1_1_2\', parentId: \'1\' },
        { id: \'3\', name: \'1_2\', parentId: null },
        { id: \'4\', name: \'1_2_1\', parentId: \'3\' },
        { id: \'5\', name: \'1_2_1_1\', parentId: \'4\' }
    ]

    function dataToTree(data, parentId) {
        const resultArr = []
        let temp;
        for (let i = 0; i < data.length; i++) {
            if (data[i].parentId === parentId) {
                const obj = data[i];
                temp = dataToTree(data, data[i].id);
                if (temp.length > 0) {
                    obj.children = temp;
                }
                resultArr.push(obj);
            }
        }
        return ersultArr;
    }
    console.log(dataToTree(arr, null));
    

方法二

使用 filter() 函数过滤出所有的父节点，，再使用map去构造子节点，并且递归填充子节点

      const arr = [
        { id: \'1\', name: \'1_1\', parentId: null },
        { id: \'2\', name: \'1_1_1\', parentId: \'1\' },
        { id: \'2\', name: \'1_1_2\', parentId: \'1\' },
        { id: \'3\', name: \'1_2\', parentId: null },
        { id: \'4\', name: \'1_2_1\', parentId: \'3\' },
        { id: \'5\', name: \'1_2_1_1\', parentId: \'4\' }
    ]
   function dataToTree(data, parentId) {
        const children = data.filter(val => val.parentId === parentId)

        if (!children) {
            return null
        }

        return children.map(item => (
            {
                ...item,
                children: dataToTree(data, item.id)
            }
        ));
    }
    console.log(dataToTree(arr, null));

以上就是关于JS实现扁平数据和树状数据相互转换相关的全部内容，希望对你有帮助。欢迎持续关注潘子夜个人博客（www.panziye.com），学习愉快哦！