惊呆了！瞬间解锁Tree结构的所有操作问题，提效500%！
大家好，我是「前端实验室」爱分享的了不起~
引言
曾几何，了不起也遇到这样的问题：在一堆前端项目代码中，横七竖八的总能看到这样一种结构——树！
菜单是树，路由是树，DOM 是树...这还没完！组织结构是树，权限节点是树，低代码还是树。
品类树,清单树,物料树,合约树...一堆父节点，子节点，子子孙孙节点……😓
每一个关于树的操作，都不是完美的实现，不完善的处理...而且每个项目还重复造轮子😭
怎么解决这个问题呢？这就有了今天主角：tree-lodash。
简介
tree-lodash,别名“树大师”。它没别的本事，专注于树结构的操作，让你在业务中面对树结构时，操作像呼吸一样自然。
Easily control the tree structure as you would with lodash.js
像使用 lodash.js 一样方便地操控树结构
是的。它就是一个简简单单，纯纯粹粹的函数库，并且，它所提供的函数都是 “纯函数”，并不会对原数据结构直接产生修改。（当然，你要是自行写了修改逻辑，那就另当别论了）
如果还不明白它带来的便利，请看下一节。
安装和使用
使用tree-lodash最简单的方式是通过cdn方式引入。
<script src="https://cdn.jsdelivr.net/npm/tree-lodash@latest/dist/umd/index.js"></script>
<script>
window.treeLodash.foreach([{key: '1'}], (t) => {
console.log(t.key)
})
// log => 1
</script>
但jsdelivr 非常不稳定，尤其针对国内网络，请绝对不要在生产环境使用它；推荐把该 js 下载到本地静态目录。
还有一种方式就是，通过NPM安装。
yarn add tree-lodash
# or
npm i tree-lodash
然后，直接引用就能使用啦~
import { filter } from 'tree-lodash'
const newTree = filter(tree, (item) => {
return item.key < 100
})
只要你用过类似lodash.js函数库，那么你看一眼tree-lodash函数名就知道它的功能啦！
让你像操作数组那样操作树结构！
tree-lodash函数不多，但个个精悍能打！
foreach，遍历把 "树" 或者 "森林"，对每个节点执行回调。map，遍历把 "树" 或者 "森林"，根据返回的对象，组成新的树。（不会影响原结构，返回的树是新生成的）filter，遍历把 "树" 或者 "森林"，并把返回非真值的节点剔除。find，遍历把 "树" 或者 "森林"，找到第一个返回非空值的节点。toArray，把 "树" 或者 "森林"，转换为一维数组，数组会包含所有节点。
了不起最常用的是find函数，这里简单来个示例。
const tree = {
key: 1,
children: [
{
key: 11,
children: [
{
key: 111
},
{
key: 112
}
]
},
{
key: 12,
children: [
{
key: 122,
children: [
{
key: 1221
},
{
key: 1222
}
]
}
]
}
]
}
我们想从这个树上找到key = 1221的节点,怎么办？自己写，怎么也得花上三五分钟！第一次遇到的，怕是要Google一下了~
现在用tree-lodash,嗖~
import { find } from 'tree-lodash'
const node = find(tree, (t) => t.key === 1221)
//{ key: 1221 }
搞定✔！就这么容易~
tree-lodash进阶使用
99%的树操作，都离不开遍历！在tree-lodash中也是如此。树型结构的特殊性，决定了它的多样性。总不能默认使用这些最显而易见的方法吧！
因此，tree-lodash中的所有方法，还统一支持了以下配置项，让每个方法更加 灵活和强大：
type BaseOptions = {
strategy?: 'pre' | 'post' | 'breadth',
childrenKey?: string | number | symbol
getChildrenKey?: Function
}
- strategy：搜索策略
tree-lodash中的所有方法都支持以下三种策略(strategy):
pre: 深度优先，正序搜索； post：深度优先，反序搜索； breadth：广度优先
大家可以根据自己树结构的特点进行配置。
- childrenKey：支持树结构子节点 key 的命名
支持传入childrenKey 参数，你不仅可以用children表示子节点；也可以用subItems、babies 等所有你能想到的词语表示子节点。abc作为命名都可以~
- getChildrenKey：支持一棵树上多种 childrenKey
这种情况比较少，但难免会遇到。比如官方的这个例子。
const treeMultiChildrenKey: Tree = {
key: '1',
children: [
{
key: '2',
subItems: [
{
key: '3'
}
]
},
{
key: '4',
subItems: [
{
key: '5'
}
]
}
]
}
这棵树下有children和subItems,选哪个呢？这样来操作。
{
getChildrenKey: (tree, meta) => {
if (meta.depth === 1) {
return 'subItems'
}
}
}
是不是可动态的来设置啦~
好啦！关于tree-lodash的介绍就到这里了，小伙伴们学废了吗？更多详情，请查看GitHub链接。
地址 https://zhangshichun.github.io/tree-lodash/