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

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

表达式树介绍

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

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

总结

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

相关推荐
阳树阳树1 小时前
signal-新的状态管理模式
前端·javascript
fakaifa1 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
木木黄木木1 小时前
HTML5手写签名板项目实战教程
前端·html·html5
姑苏洛言2 小时前
基于微信小程序实现幸运大转盘页面
前端
前端极客探险家2 小时前
如何实现一个支持拖拽排序的组件:React 和 Vue 版
前端·vue.js·react.js·排序算法
yanyu-yaya2 小时前
devextreme-react/scheduler 简单学习
前端·学习·react.js
limit for me2 小时前
react使用eventBus在不同模块间进行通信
前端·react.js
__不想说话__2 小时前
面试官问我React组件和state的关系,我指了指路口的红绿灯…
前端·javascript·react.js
一个小潘桃鸭2 小时前
需求:对表格操作列中的操作进行局部刷新
前端
番茄比较犟2 小时前
Combine知识点switchToLatest
前端