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

前端  /  管理员 发布于 5年前   237

JavaScript 处理树结构数据

场景

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

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

思考

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

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

/** * 系统菜单 */class SysMenu { /**  * 构造函数  * @param {Number} id 菜单 id  * @param {String} name 显示的名称  * @param {Number} parent 父级菜单 id  */ constructor(id, name, parent) {  this.id = id  this.name = name  this.parent = parent }}/** * 系统权限 */class SysPermission { /**  * 构造函数  * @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 来抹平访问它们之间的差异

const sysMenuMap = new Map().set('parentId', 'parent')const sysMenu = new Proxy(new SysMenu(1, 'rx', 0), { get(_, k) {  if (sysMenuMap.has(k)) {   return Reflect.get(_, sysMenuMap.get(k))  }  return Reflect.get(_, k) },})console.log(sysMenu.id, sysMenu.name, sysMenu.parentId) // 1 'rx' 0const sysPermissionMap = new Map().set('id', 'uid').set('name', 'label')const sysPermission = new Proxy(new SysPermission(1, 'rx', 0), { get(_, k) {  if (sysPermissionMap.has(k)) {   return Reflect.get(_, sysPermissionMap.get(k))  }  return Reflect.get(_, k) },})console.log(sysPermission.id, sysPermission.name, sysPermission.parentId) // 1 'rx' 0

定义桥接函数

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

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

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

const sysMenu = bridge({ parentId: 'parent',})(new SysMenu(1, 'rx', 0))console.log(sysMenu.id, sysMenu.name, sysMenu.parentId) // 1 'rx' 0const sysPermission = bridge({ id: 'uid', name: 'label',})(new SysPermission(1, 'rx', 0))console.log(sysPermission.id, sysPermission.name, sysPermission.parentId) // 1 'rx' 0

定义标准树结构

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

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