共计 1018 个字符,预计需要花费 3 分钟才能阅读完成。
背景
遍历树形构造的菜单,实现子菜单的增加与删除。
菜单的树形构造:
要实现的性能:
- 增加子菜单
获取到的数据有:整个菜单树形构造的数据以及目前选中的父菜单的 key。
逻辑:遍历这棵多叉树,找到父结点,拼接好子结点的信息,再 push 到父结点的 children 中。 - 删除子菜单
获取到的数据有:整个菜单树形构造的数据以及目前选中的菜单的 key。
逻辑:遍历这棵多叉树,找到选中菜单的父结点,再遍历父结点的子结点找到选中的结点,利用 splice 删除选中结点。
实现办法
这两种性能都须要遍历多叉树。
这就波及到大家不愿去触碰的多叉树遍历了 …. 刚开始是循环套循环套循环 …. 看得本人都昏了。
起初鼓起勇气从新来过。
递归遍历多叉树
百度百科对递归的定义是:程序调用本身的编程技巧称为递归(recursion)。
而我对递归的了解就是把大问题切分成一个一个小问题。也就是一直放大参数范畴。
我在写递归函数的时候是分了三步。
- 第一步 明确函数性能
当然,在背景中已阐明。遍历多叉树,找到父结点,拼接好子结点的信息,再 push 到父结点的 children 中。 - 第二步 找到递归进口
第一个进口是,节点为空;
第二个进口是找到父结点执行完相应操作; - 第三步 放大参数范畴
当父结点存在子节点时,又向下遍历子节点。
具体代码
export const addMenu = (node, fatherKey, newDirectoryTitle) => {if (!node) {return;} | |
if(node.key === fatherKey) { | |
const child = {type: `${node.key}-${node.childType}`, | |
title: newDirectoryTitle, | |
key: `${node.key}-${node.childType}`, | |
childType: 0, | |
children:[],} | |
node.childType += 1; | |
node.children.push(child); | |
return; | |
} | |
if(node.children && node.children.length > 0) {for(let i =0 ;i < node.children.length; i++) {addMenu(node.children[i],fatherKey,newDirectoryTitle); | |
} | |
} | |
}; |
删除子菜单的办法其实也是差不多。只是其中的解决逻辑不一样。
回头再看看之前写的多叉树遍历,其实并不难,只是本人原来对它有了惯性的抗拒。
正文完
发表至: javascript
2021-05-12