树在前端的应用

引言： 树是数据结构中必须学习的一个概念。
树在操作中有哪些应用？ 本文从实际业务出发，在简单阐述树的定义后，对需求解析，最终抽象出满足业务的树结构。

表达式树介绍

我们来看看维基百科对于表达式树的定义：

A binary expression tree is a specific kind of a binary tree used to represent expressions. Two common types of expressions that a binary expression tree can represent are algebraic[1] and boolean. These trees can represent expressions that contain both unary and binary operators.[1]Like any binary tree, each node of a binary expression tree has zero, one, or two children. This restricted structure simplifies the processing of expression trees.

翻译一下： 表达树是一种特殊的二叉树，它用来表示表达式，可以用来表示代数和布尔计算。表达树可以表示二元或多元操作。
我们来看个图吧：

这是一个表达式的表达式树，中序遍历这个树可以得到表达式： ((5 + z)/-8) * 4^2

需求描述

在做查询的时候，经常会用到一些筛选条件之间的交并差结构。
但是新的问题是，这个交并差的集合最后要转成sql。 合理定义这个结构，才能通过函数来实现这个转化sql 的过程。
我们先来看看这个筛选条件长什么样子：

先来描述下这个结构：
组与组之间可以是交集、并集，组间的交并是一致的，点击任意切换即可切换。
组内的交并是隔离的，组1的交并切换不会影响组2.

最后一个组是差集，排除以下标签。

需求抽象

我们首先明确的是，这个标签组合是一个嵌套结构，组间有交并，组内有交并。
下面通过图片来抽象这个结构。

1、抽象组内关系

从图中我们可以知道，组内的交并关系可以通过节点来表示，每个标签都是一个叶子。

2、抽象组间关系

那么组与组之间的交并关系如下图所示。

3、抽象差集

排除的标签，标签之间是并集。

4、组合

把所有的标签交并差组合起来，交并集和差集之间的关系是并集关系。

我们就把标签组合的整体转化成了上图的树的样子。

代码实现

抽象成了表达式树，我们就要考虑，如何把上述树的样子转化为代码了。
通过询问chatgpt 我们最常见的定义一棵树的结构是：

class TreeNode { 
  value: any; 
  children: TreeNode[]; 
}

这里，为了操作和理解方便，我们将节点的值拆成两个，type和value，

type 表示节点的类型，value 表示节点的值。
type 可能的取值为 inter、union、diff、label；
分别对应的 value 为 and、or、not、LabelNode
这里不展开说明 LabelNode 的内容。
所以，我们可以用 ts 的 interface 得到如下接口：

interface ExpressionNode {
    // 节点类型
    type: 'inter'| 'union' | 'diff' | 'label'
    // 节点的值
    value: 'and' | 'or' | 'not' | LabelNode,
    // 子节点，可选
    children?: ExpressionNode[]
}

总结

这样，我们就从实际的业务需求中抽象出了底层所使用的数据结构。接下来下一篇，我们来说说，基于此结构所涉及到的树的一些操作。