遍历javascript中的N元树状结构

时间:2018-12-27 06:26:35

标签: javascript arrays data-structures tree

我与父母及其子女有以下数组。父母和子女的水平在这里不固定。数量可能会有所不同,并且树的深度可能还会增加:

[{
    "title": "26 - India",
    "tooltip": "26 - India",
    "children": [
      {
        "title": "026 - MH",
        "tooltip": "026 - MH",
        "children": [
          {
            "title": "2018",
            "tooltip": "2018",
            "children": []
          }
        ]},
      {
        "title": "026 - GJ",
        "tooltip": "026 - GJ",
        "children": [
          {
            "title": "2018",
            "tooltip": "2018",
            "children": []
          }
        ]},
      {
        "title": "026 - UP",
        "tooltip": "026 - UP",
        "children": [
          {
            "title": "2018",
            "tooltip": "2018",
            "children": []
          }
        ]}
    ]},
  {
    "title": "27 - USA",
    "tooltip": "27 - USA",
    "children": [
      {
        "title": "027 - SA",
        "tooltip": "027 - SA",
        "children": [
          {
            "title": "2018",
            "tooltip": "2018",
            "children": []
          }]
      }]
  }]

并寻找类似的结果:

26 - India & 026 - MH & 2018
26 - India & 026 - GJ & 2018
26 - India & 026 - UP & 2018
27 - USA & 027 - SA & 2018

将显示所有有父母的孩子的详细信息。 我正在尝试使用以下代码来获取结果:

var title= "";

searchTree(tree);
function searchTree(tree) {

  tree.map(function(item){
   if(item.children.length >0){
        title = title + " & "+ item.title;  
      searchTree(item.children)
    }
    else{
      title = title + " & " + item.title;
        console.log(title);
        title = "";
    }
  })
 }

但是结果如下:

& 26 - India & 026 - MH & 2018
& 026 - GJ & 2018
& 026 - UP & 2018
& 27 - USA & 027 - SA & 2018

此处不记录有多个孩子的父母。

任何帮助将不胜感激。预先感谢!

1 个答案:

答案 0 :(得分:0)

您步入正轨,但我建议您进行一些改进:

  • 使用列表时,请尽可能长时间使用数组。从长远来看,它使您的功能更加灵活。
  • 在处理递归函数时,向下传递结果列表是跟踪所有结果的最简单方法。如果可以避免,不要依赖全局变量。
  • 在上一点上,请记住,非简单变量(如Arrays)是通过引用而不是通过副本传递的。您可以通过在传递数组之前在数组上使用Slice来解决此问题。

这是我对您的问题的看法:

function overviewEndpoints(data, titles, endpoints) {
    if (titles === void 0) { titles = []; }
    if (endpoints === void 0) { endpoints = []; }
    titles.push(data.title);
    if (data.children.length > 0) {
        data.children
            .forEach(function (child) {
            overviewEndpoints(child, titles.slice(0), endpoints);
        });
    }
    else {
        endpoints.push(titles.slice(0));
    }
    return endpoints;
}
//TEST
var data = [
    {
        "title": "26 - India",
        "tooltip": "26 - India",
        "children": [
            {
                "title": "026 - MH",
                "tooltip": "026 - MH",
                "children": [
                    {
                        "title": "2018",
                        "tooltip": "2018",
                        "children": []
                    }
                ]
            },
            {
                "title": "026 - GJ",
                "tooltip": "026 - GJ",
                "children": [
                    {
                        "title": "2018",
                        "tooltip": "2018",
                        "children": []
                    }
                ]
            },
            {
                "title": "026 - UP",
                "tooltip": "026 - UP",
                "children": [
                    {
                        "title": "2018",
                        "tooltip": "2018",
                        "children": []
                    }
                ]
            }
        ]
    }, {
        "title": "27 - USA",
        "tooltip": "27 - USA",
        "children": [
            {
                "title": "027 - SA",
                "tooltip": "027 - SA",
                "children": [
                    {
                        "title": "2018",
                        "tooltip": "2018",
                        "children": []
                    }
                ]
            }
        ]
    }
];
console.log(data.map(function (a) { return overviewEndpoints(a).map(function (a) { return a.join(" & "); }).join("\n"); }).join("\n\n"));

请注意,我以数组形式返回,因此我可以更好地控制结果属于什么位置,并且可以轻松修改结果。