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

前端 潘老师 5个月前 (12-07) 127 ℃ (0) 扫码查看

本文主要讲解关于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),学习愉快哦!


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/12228.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】