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

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

表达式树介绍

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

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[]
}

总结

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

相关推荐
curdcv_po3 分钟前
Vue3 组件通信方式全解析
前端
Auroral1568 分钟前
基于RabbitMQ的异步通知系统设计与实现
前端·后端
栗筝i8 分钟前
Spring 核心技术解析【纯干货版】- XV:Spring 网络模块 Spring-Web 模块精讲
前端·网络·spring
打野赵怀真11 分钟前
H5如何禁止动画闪屏?
前端·javascript
zhangxingchao11 分钟前
关于浮点数的思考
前端
Riesenzahn11 分钟前
你喜欢Sass还是Less?为什么?
前端·javascript
玄魂12 分钟前
基于Vue框架的开源大屏项目实践
前端·开源·数据可视化
晴殇i13 分钟前
一行代码解决跨域问题,JavaScript新特性解析
前端
挖稀泥的工人17 分钟前
面试看这一篇webpack
前端·webpack
卖报的小行家_18 分钟前
Vue3源码,拦截对象,对比Vue2
前端