剖析数据结构之树——揭开层层分级数据的奥秘

前端

2023-10-31 21:15:59

什么是树？

在计算机科学中，树是一种分层数据的抽象模型，可以用来表示具有层次关系的数据。树形结构在现实世界中有广泛的应用，例如：

文件系统中的目录结构
XML文档中的元素层次
HTML文档中的DOM结构
生物学中的进化树
组织机构中的管理结构

树的特性

树具有以下几个主要特性：

每个结点最多只有一个父结点。
每个结点可以有多个子结点。
除根结点外，每个结点都有且只有一个父结点。
根结点是整个树的起始结点，没有父结点。
叶结点是没有任何子结点的结点。

前端工作中的常见树

在前端工作中，我们经常会遇到以下几种树：

DOM树：DOM树是文档对象模型（DOM）的树状表示。它表示HTML文档中的元素及其层次关系。
级联选择：级联选择是CSS中的一种选择器，可以用来选择HTML文档中满足一定条件的元素。级联选择可以看作是一种树形结构，其中父元素是子元素的祖先元素。
树形控件：树形控件是一种GUI控件，可以用来显示具有层次关系的数据。树形控件通常由一个根结点和多个子结点组成，子结点可以进一步展开或折叠。

JS中没有树，但可以用Object和Array构建树

在JavaScript中，没有内置的“树”数据结构。但是，我们可以通过Object和Array来模拟实现树。

使用Object模拟树：

const tree = {
  value: '根结点',
  children: [
    {
      value: '子结点1',
      children: [
        {
          value: '孙结点1-1'
        },
        {
          value: '孙结点1-2'
        }
      ]
    },
    {
      value: '子结点2',
      children: []
    }
  ]
};

使用Array模拟树：

const tree = [
  {
    value: '根结点',
    children: [
      {
        value: '子结点1',
        children: [
          {
            value: '孙结点1-1'
          },
          {
            value: '孙结点1-2'
          }
        ]
      },
      {
        value: '子结点2',
        children: []
      }
    ]
  }
];