树在前端的应用 | 表达式树

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

表达式树介绍

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

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 我们最常见的定义一棵树的结构是:

javascript 复制代码
class TreeNode { 
  value: any; 
  children: TreeNode[]; 
}

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

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

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

总结

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

相关推荐
开开心心就好41 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享42 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js