基于层次结构的数据表示的数据结构

Question

我有上述的（层次结构）数据。

我需要

• 显示此数据（UI）
• 搜索名称字段

我必须使用哪个数据结构来解决此问题？

显示此数据（UI）： 对于UI，我的计划是要有一个按钮列表，当用户单击一个按钮时，它将进入下一个级别。例如，最初显示两个按钮“ John Software”和“ Bobbys automotive”。当用户单击“约翰软件”时，它将清除屏幕并在“约翰软件”中显示内容，即两个按钮“汉斯汽车零件”和“ xyz云解决方案”等。

搜索名称字段： 应该可以从所有级别搜索名称字段。例如，用户搜索汽车，并应显示“婴儿车”和“汉斯汽车零件”

我目前有一个json数据，然后对其进行解析并遍历对象以获取用户想要的内容（不包括搜索）。我认为使用现有的数据结构来完成此任务是明智的。

如果您需要我提供更多信息，请告诉我。

Answer 1

您基本上得到了三个有意义的选择：

1）一棵树：

要将数据显示为树，必须理解基础数据结构也是树，例如：

 const root = {
   name: "Har's holdings",
   code: "0001",
   children: [
     {
       name: "John software company",
       code: "0220",
       children: [/*...*/],
    },
    /*...*/
  ],
 };

因此，在显示时，您将基于node.children构建按钮，如果单击其中一个按钮，则将节点设置为该node = node.children[clicked]。现在，对于搜索来说，使树变平很有意义，可以使用生成器轻松完成：

  function* flatten(node) {
    yield node;
    for(const child of node.children)
      yield* flatten(child);
 }

这可以让您获得以下数组：

  const nodes = [.. flatten(root)];

现在可以轻松搜索该数组。

2）查找表：

您可以根据节点的代码存储节点，并将子代码存储在每个节点内部，以便轻松获取它们：

  const byCode = {
    "0001": {
     name: "Har's holdings",
     code: "0001",
     children: ["0220", /*...*/],
   },

   "0220": {
     name: "John software company",
     code: "0220",
     children: [/*...*/]
  }
  //...
 };

获取一个节点的所有子节点可以通过以下方式完成：

  const childNodes = byCode["0001"].children.map(key => byCode[key]);

要获取所有节点的数组：

  const nodes = Object.values(byCode);

3）一个数组

  const nodes = [
    {
     name: "Har's holdings",
     code: "0001",
     children: ["0220", /*...*/],
    },
    {
     name: "John software company",
     code: "0220",
     children: [/*...*/]
   }
 ];

可以轻松地进行搜索，但是要将其用作树，必须将其转换为2）：

  const byCode = {};
  for(const node of nodes)
    byCode[node.code] = node;

您选择哪种格式取决于存储方式，然后可以根据用例在客户端上轻松地在上述格式之一之间进行转换。