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），学习愉快哦！

喜欢 (0)赏

【请潘老师喝杯Coffee吧！】

分享 (0)