惊呆了！瞬间解锁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/