结构树递归方法记录

结构树递归方法记录

在工作中我们经常遇到结构树的需求,结构树处理会比较麻烦,尤其是后端返回的结构的不是我们想要的结构时,我的场景是后端返回了一个一维的数组对象,我需要通过一个关联的父级id来处理成结构树的数据格式,层级是不确定的,这个时候我们就需要使用递归的方法,下面记录一个一维数组递归成结构树格式的方法,用GPT打的注释,哈哈

init(list, permisId) {
  // 根据permisId筛选出所有父级pPermisId等于该permisId的项
  const _list = this.originallist.filter(item => item.pPermisId === permisId);
  // 如果筛选结果列表不为空,说明有子节点
  return _list.length > 0
    // 则遍历筛选结果列表中的每一项,为每个子节点添加children属性,并递归调用自身生成子节点的树形结构
    ? _list.map(item => ({ ...item, children: this.init(list, item.permisId) }))
    // 如果没有子节点,返回一个空数组
    : [];
},

调用的是时候,第一次传值,关联id需要传undefined,因为第一层是没有父节点的,我们需要先把第一层级找出来

this.init(list, undefined)

我们只需要传入我们的一维数组也就是原始数据,就可以得到结构树的结构了。

递归标记最底层叶子节点

在我们具体操作时,其实我们只需要操作最底层叶子结构,因为最底层我的叶子勾选上的话,父级节点也是会勾选上的,下面的记录一个递归结构树,给叶子节点标记的方法

flattenTree(tree, result = []) {
  // 如果传入的tree参数不存在,则直接返回结果数组result
  if (!tree) return result;
  // 遍历树结构中的每个节点,将其permisId和是否为叶子节点的状态({ permisId, leaf })添加到结果数组中
  result.push(...tree.map(node => ({ permisId: node.permisId, leaf: !node.children.length })));
  // 遍历树结构中每个节点的children属性,并递归调用本函数,将结果合并进结果数组result中
  tree.forEach(node => this.flattenTree(node.children, result));
  // 返回最终结果数组
  return result;
},

取出结构树所有的最底层的叶子节点

deepList(data) {
  // 遍历data数组中的每一项
  data.map(item => {
    // 如果当前项存在children属性并且该属性有子元素,则递归调用自身深度遍历该子树
    if (item.children && item.children.length > 0) {
      this.deepList(item.children);
    } else {
      // 否则,将当前项的permisId加入curkeys数组
      this.curkeys.push(item.permisId);
    }
  });
},

你可能感兴趣的:(数据结构,es6,vue)