JavaScript 处理树数据结构的方法示例

2023-08-21 13:40:05 316

JavaScript处理树结构数据

场景

即便在前端，也有很多时候需要操作树结构的情况，最典型的场景莫过于无限级分类。之前吾辈曾经遇到过这种场景，但当时没有多想直接手撕JavaScript列表转树了，并没有想到进行封装。后来遇到的场景多了，想到如何封装树结构操作，但考虑到不同场景的树节点结构的不同，就没有继续进行下去了。

直到吾辈开始经常运用了ES6Proxy之后，吾辈想到了新的解决方案！

思考

问:之前为什么停止封装树结构操作了？
答:因为不同的树结构节点可能有不同的结构，例如某个项目的树节点父节点id字段是parent，而另一个项目则是parentId
问:Proxy如何解决这个问题呢？
答:Proxy可以拦截对象的操作，当访问对象不存在的字段时，Proxy能将之代理到已经存在的字段上
问:这点意味着什么？
答:它意味着Proxy能够抹平不同的树节点结构之间的差异！
问:我还是不太明白Proxy怎么用，能举个具体的例子么？
答:当然可以，我现在就让你看看Proxy的能力

下面思考一下如何在同一个函数中处理这两种树节点结构

/**
*系统菜单
*/
classSysMenu{
/**
*构造函数
*@param{Number}id菜单id
*@param{String}name显示的名称
*@param{Number}parent父级菜单id
*/
constructor(id,name,parent){
this.id=id
this.name=name
this.parent=parent
}
}
/**
*系统权限
*/
classSysPermission{
/**
*构造函数
*@param{String}uid系统唯一uuid
*@param{String}label显示的菜单名
*@param{String}parentId父级权限uid
*/
constructor(uid,label,parentId){
this.uid=uid
this.label=label
this.parentId=parentId
}
}

下面让我们使用Proxy来抹平访问它们之间的差异

constsysMenuMap=newMap().set('parentId','parent')
constsysMenu=newProxy(newSysMenu(1,'rx',0),{
get(_,k){
if(sysMenuMap.has(k)){
returnReflect.get(_,sysMenuMap.get(k))
}
returnReflect.get(_,k)
},
})
console.log(sysMenu.id,sysMenu.name,sysMenu.parentId)//1'rx'0

constsysPermissionMap=newMap().set('id','uid').set('name','label')
constsysPermission=newProxy(newSysPermission(1,'rx',0),{
get(_,k){
if(sysPermissionMap.has(k)){
returnReflect.get(_,sysPermissionMap.get(k))
}
returnReflect.get(_,k)
},
})
console.log(sysPermission.id,sysPermission.name,sysPermission.parentId)//1'rx'0

定义桥接函数

现在，差异确实抹平了，我们可以通过访问相同的属性来获取到不同结构对象的值！然而，每个对象都写一次代理终究有点麻烦，所以我们实现一个通用函数用以包装。

/**
*桥接对象不存在的字段
*@param{Object}map代理的字段映射Map
*@returns{Function}转换一个对象为代理对象
*/
exportfunctionbridge(map){
/**
*为对象添加代理的函数
*@param{Object}obj任何对象
*@returns{Proxy}代理后的对象
*/
returnfunction(obj){
returnnewProxy(obj,{
get(target,k){
if(Reflect.has(map,k)){
returnReflect.get(target,Reflect.get(map,k))
}
returnReflect.get(target,k)
},
set(target,k,v){
if(Reflect.has(map,k)){
Reflect.set(target,Reflect.get(map,k),v)
returntrue
}
Reflect.set(target,k,v)
returntrue
},
})
}
}

现在，我们可以用更简单的方式来做代理了。

constsysMenu=bridge({
parentId:'parent',
})(newSysMenu(1,'rx',0))
console.log(sysMenu.id,sysMenu.name,sysMenu.parentId)//1'rx'0

constsysPermission=bridge({
id:'uid',
name:'label',
})(newSysPermission(1,'rx',0))
console.log(sysPermission.id,sysPermission.name,sysPermission.parentId)//1'rx'0

定义标准树结构

想要抹平差异，我们至少还需要一个标准的树结构，告诉别人我们需要什么样的树节点数据结构，以便于在之后处理树节点的函数中统一使用。

/**
*基本的Node节点结构定义接口
*@interface
*/
exportclassINode{
/**
*构造函数
*@param{Object}[options]可选项参数
*@param{String}[options.id]树结点的id属性名
*@param{String}[options.parentId]树结点的父节点id属性名
*@param{String}[options.child]树结点的子节点数组属性名
*@param{String}[options.path]树结点的全路径属性名
*@param{Array.

JavaScript 处理树数据结构的方法示例

热门推荐

随机推荐