嵌套樹不以“順序”返回的遞歸函數

Question

我有一個包含嵌套數組的數據結構-我想顯示數據以使其看起來像文件結構-因此嵌套數據表示為嵌套文件/文件夾。 但是，在控制台日志記錄中，遞歸函數返回的內容並不表示數據結構的嵌套性質。

這是我的數據結構：

const data = {
  "root": [
    {
      "type": "folder",
      "name": "one",
      "children": [
        {
          "type": "folder",
          "name": "one",
          "children": []
        },
        {
          "type": "file",
          "name": "two",
          "extension": ".txt",
          "preview": "photos.google.com/abc.jpg"
        },
        {
          "type": "file",
          "name": "four",
          "extension": ".txt",
          "preview": "photos.google.com/abc.jpg"
        }
      ]
    },
    {
      "type": "file",
      "name": "two",
      "extension": ".txt",
      "preview": "photos.google.com/abc.jpg"
    },
    {
      "type": "file",
      "name": "three",
      "extension": ".txt",
      "preview": "photos.google.com/abc.jpg"
    },
    {
      "type": "file",
      "name": "four",
      "extension": ".txt",
      "preview": "photos.google.com/abc.jpg"
    }
  ]
}

而我的遞歸函數：

const recurse = (data, children = false) => {
  data.forEach(object => {
    if (object.type === 'folder') {
      recurse(object.children, true)
    }
    if (children) {
      console.log('   ' + object.type + ' ' + object.name);
    } else {
      console.log(object.type + ' ' + object.name);
    }
  })
}

recurse(data.root)

和控制台日志：

'   folder one'
'   file two'
'   file four'
'folder one'
'file two'
'file three'
'file four'

因此功能是從內部開始打印結構。 如果要以反映數據結構嵌套性質的方式顯示它，應該使用哪種方法？ 提前致謝

Answer 1

@ j.xavier.atero比我快一點。 :)

我認為您必須將遞歸放在函數的末尾。 這樣，您將首先獲取該folder one ，然后再獲取其子folder one 。

const recurse = (data, children = false) => {
  data.forEach(object => {
    if (children) {
      console.log('   ' + object.type + ' ' + object.name);
    } else {
      console.log(object.type + ' ' + object.name);
    }
    if (object.type === 'folder') {
      recurse(object.children, true)
    }
  })
}

recurse(data.root)

更新評論

我會說為遞歸函數添加一個額外的參數。

const recurse = (data, level = 0) => {
  data.forEach(object => {
    console.log(Array(level).join('   ') + object.type + ' ' + object.name);

    if (object.type === 'folder') {
      recurse(object.children, level + 1)
    }
  })
}

recurse(data.root)

這可以跟蹤遞歸函數的深度。 如果它是孩子了，您甚至不需要檢查。

Answer 2

進行遞歸之前，您應該打印元素的名稱：

const recurse = (data, children = false) => {
  data.forEach(object => {
    if (children) {
      console.log('   ' + object.type + ' ' + object.name);
    } else {
      console.log(object.type + ' ' + object.name);
    }
    if (object.type === 'folder') {
      recurse(object.children, true)
    }
  })
}

recurse(data.root)