两种树状递归处理

最新推荐文章于 2024-09-16 08:47:17 发布

卷の门

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量43

点赞数

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/weixin_43409266/article/details/130594852

版权

文章讲述了如何在前端处理后台传来的树状数据。一种是利用递归和数组的map方法进行数据格式化，添加parent和deep属性；另一种是为每个节点添加ids数组，便于后续通过id进行查找。同时提供了一个搜索ids的辅助函数。

摘要由CSDN通过智能技术生成

[{
    value: 'a',
    label: 'a',
    children: [
        {value: 'b',label: 'b',}//最后子节点没有children这个字段
    ]
}]

场景1：后台传到前台树状数据，前台格式化数据

主要思路：利用数组的map方法，map嵌套做递归
比如现在如下的格式，我加个parent（value）, deep(层级)

// parent初始null
// deep初始为1
// parent为利用
const formatData = (arr, parent, deep) => {
    return arr.map((item,index)=>{
        // 数据处理写在此处
        return{
            value: item.value,
            label: item.label,
            parent: parent,
            children: item.childern ? formatData(item.children, item.value, deep+1):undefined
        }
    })
}
const data = res.data
this.data = formatData(data,null,1)

场景2： ids定位

这里是针对树修改
主要思路：

在最开始拿到结构的时候递归格式化加上ids数组；
拿到最后的id，递归函数去返回ids数组

const formatData = (arr, parent, ids) => {
    return arr.map((item,index)=>{
        // 数据处理写在此处
        return{
            value: item.value,
            label: item.label,
            parent: parent,
            ids: ids.push(item.value)
            children: item.childern ? formatData(item.children, item.value, []):undefined
        }
    })
}
const data = res.data
this.data = formatData(data,null,1)

searchIds (arr, value) {
	let ids = []
    for (let child of arr) {
        if (child.value === value) {
            ids.push(child.value)
            break
        } else if(child.children) {
            let childIds = searchIds(child.children, value)
            if (childIds.length !== 0) {
                childIds.unshift(child.value)
                ids = childIds
                break
            }
        }
	}
    return ids
}