HPanpan

快速修改树结构的节点  编辑 

树结构如下:

let origin = {
    id: 1,
    name: "系统设置",
    children: [{
        id: 11,
        name: "界面设置",
        children: [{
            id: 111,
            name: "xx模块界面"
        }]
    }, {
        id: 12,
        name: "字典设置",
        children: [{
            id: 121,
            name: "字典项"
        }]
    }]
};

首先要确定一点:id字段在整个树中是唯一的。如果要修改某一节点,如id=11的name字段由“界面设置”改为“UI设置”

一般做法可以这样:

//index值写死,最粗暴的方式,程序中这么用就是在挖坑。。。
origin.children[0].name='UI设置'

还可以这样:

origin.children.forEach(e => {
    if(e.id==11){
       e.name='UI设置';
    }
});

但是上面这种遍历的方式如果树层级很多,遍历起来也很麻烦

下面这种方式,利用引用类型的原理,把树结构变成key-val形式,通过key快速查到对应的节点,修改其他信息很是方便


//平铺后的数据,通过修改这个数据可以修改原始origin
let formatted ={}

//递归 把树结构平铺到一个对象中,达到可以用key-val的方式修改每一个树节点
const curv = (arr) => {
    arr.forEach(e => {
        formatted[e.id]=e
        if(e.children&&e.children.length>0){
            curv(e.children)
        }
    });
	
}
curv([origin])

console.log('原始数据-修改前:',origin)
//通过树中某一项的ID快速修改当前节点
formatted[11].name='UI设置'

console.log('临时数据:',formatted)
console.log('原始数据-修改后:',origin)

image