用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)