從平面列表父子創建分層對象

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; }