用javascript中的樹數組構建平面數組

Question

我在javascript中有以下數組樹：

[
  {
    "id": 1,
    "parentId": null,
    "description": "Item 1",
    "value": 0,
    "children": [
      {
        "id": 2,
        "parentId": 1,
        "description": "Item 1.1",
        "value": 0,
        "children": [
          {
            "id": 3,
            "parentId": 2,
            "description": "Item 1.1.1",
            "value": 0,
            "children": []
          }
        ]
      }
    ]
  },
  {
    "id": 4,
    "parentId": null,
    "description": "Item 2",
    "value": 0,
    "children": [
      {
        "id":5,
        "parentId": 4,
        "description": "Item 2.1",
        "value": 0,
        "children": []
      }
    ]
  }
]

我想把它變成一個帶有它的水平的平面，像這樣（見水平屬性）：

[
  {
    "id":1,
    "parentId": null,
    "description":"Item 1",
    "value":0,
    "level": "1"
  },
  {
    "id":2,
    "parentId": 1,
    "description":"Item 1.1",
    "value":0,
    "level": "1.1"
  },
  {
    "id":3,
    "parentId": 2,
    "description":"Item 1.1.1",
    "value":0,
    "level": "1.1.1"
  },
  {
    "id":4,
    "parentId": null,
    "description":"Item 2",
    "value":0,
    "level": "2"
  },
  {
    "id":5,
    "parentId": 4,
    "description":"Item 2.1",
    "value":0,
    "level": "2.1"
  }
]

無論深度如何，最好的方法是什么？

PS：我也有扁平的，但沒有“級別”屬性，建議根據 parentId 添加此屬性並按其排序列表，如下所示：

項目 1
項目 1.1
項目 1.1.1
第 2 項
項目 2.1

Answer 1

如果您不想通過數組的深度來限制解決方案，那么我建議不要使用遞歸。

 const solution = data => { const stack = data.map((item, index) => ({ ...item, level: `${index + 1}` })) const result = [] while (stack.length) { const item = stack.pop() const { children, ...restItem } = item stack.push(...item.children.map((child, index) => ({ ...child, level: `${item.level}.${index + 1}` }))) result.push(restItem) } return result } const data = [ { "id": 1, "parentId": null, "description": "Item 1", "value": 0, "children": [ { "id": 2, "parentId": 1, "description": "Item 1.1", "value": 0, "children": [ { "id": 3, "parentId": 2, "description": "Item 1.1.1", "value": 0, "children": [] } ] } ] }, { "id": 4, "parentId": null, "description": "Item 2", "value": 0, "children": [ { "id":5, "parentId": 4, "description": "Item 2.1", "value": 0, "children": [] } ] } ] console.log(solution(data))

Answer 2

如果你遞歸地遍歷你的數組（假設children永遠是關鍵），這樣的事情會起作用。

 const arr = [ { "id": 1, "parentId": null, "description": "Item 1", "value": 0, "children": [ { "id": 2, "parentId": 1, "description": "Item 1.1", "value": 0, "children": [ { "id": 3, "parentId": 2, "description": "Item 1.1.1", "value": 0, "children": [] } ] } ] }, { "id": 4, "parentId": null, "description": "Item 2", "value": 0, "children": [ { "id":5, "parentId": 4, "description": "Item 2.1", "value": 0, "children": [] } ] } ] const newArray = []; const flatten = (item, parentIdx) => { // separate parent from children item.forEach(({ children, ...child}, idx) => { // create level const level = `${parentIdx ? `${parentIdx}.` : ''}${idx + 1}`; // add parent to new array newArray.push({...child, level}); // recursively flatten children flatten(children, level); }) } flatten(arr) console.log(newArray)