从平面列表父子创建分层对象

Question

我试图了解 JS 中创建对象以传递给树视图组件的最佳方法。 我正在努力理解从哪里开始关于这种方法。 我尝试过做各种事情，例如将父子关系编号拆分为一个数组，然后对其进行迭代，将它们推入一个新对象，但我仍然不知道如何保持这些关系。 我需要递归吗？

鉴于以下父子关系列表以及相关的深度级别

1 , depth 1
1.1, depth 2
1.1.1, depth 3
1.1.2, depth 3
1.2.1, depth 3
1.2.2, depth 3
1.2.3, depth 3
1.2.3.4, depth 4

和下面的输出树

1
-1
--1
--2
-2
--1
---1
...

结果对象应该看起来像

[
  {
    "1": {
      "depth": "1",
      "child": {
        "1.1": {
          "depth": "2",
          "child": {
            "1.1.1": {
              "depth": "3",
              "child": null
            }
          }
        }
      }
    },
    "2": {
      "level": "2",
      "depth": "1",
      "child": {
        "2.1": {
          "depth": "2",
          "child": {
            "2.1.1": {
              "depth": "3",
              "child": null
            }
          }
        }
      }
    }
  }
]

在 JS 中迭代列表并生成树图或至少是树图组件可以使用的对象的最佳方法是什么？

Answer 1

通过拥有一组已排序的项目和一个级别信息，您可以使用辅助数组来跟踪最后插入的项目，并使用此存储将嵌套项目放置到正确的位置。

这种方法不依赖于给定的title ，只依赖于项目和level的顺序。

 var data = [{ title: '1', level: 1 }, { title: '1.1', level: 2 }, { title: '1.1.1', level: 3 }, { title: '1.1.2', level: 3 }, { title: '1.2.1', level: 3 }, { title: '1.2.2', level: 3 }, { title: '1.2.3', level: 3 }, { title: '1.2.3.4', level: 4 }], result = [], levels = [result]; data.forEach(({ title, level }) => levels[level - 1].push({ title, children: levels[level] = [] }) ); console.log(result);

 .as-console-wrapper { max-height: 100% !important; top: 0; }

通缉的那个。 未使用level 。

 var data = [{ title: '1', level: 1 }, { title: '1.1', level: 2 }, { title: '1.1.1', level: 3 }, { title: '1.1.2', level: 3 }, { title: '1.2.1', level: 3 }, { title: '1.2.2', level: 3 }, { title: '1.2.3', level: 3 }, { title: '1.2.3.4', level: 4 }], result = {}; data.forEach(({ title, level }) => title .split('.') .reduce((o, _, i, values) => { var key = values.slice(0, i + 1).join('.'); o.child = o.child || {}; return o.child[key] = o.child[key] || { depth: i + 1 }; }, { child: result }) ); console.log(result);

 .as-console-wrapper { max-height: 100% !important; top: 0; }