时间戳

首页 > 解决方案 > 在javascript中遍历类似N元树的结构

javascript - 在javascript中遍历类似N元树的结构

问题描述

我与父母及其子女有以下数组。父子级别在这里不固定。计数可能会有所不同，并且树的深度可能会增加更多：

[{
    "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

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

任何帮助，将不胜感激。提前致谢！

标签： javascriptarraysdata-structurestree

解决方案

你在正确的轨道上，但我会建议一些改进：

  • 使用列表时，尽可能长时间地使用数组。从长远来看，它使您的功能更加灵活。
  • 在处理递归函数时，向下传递结果列表是跟踪所有内容的最简单方法。如果可以避免的话，不要依赖全局变量。
  • 扩展上一点，记住像数组这样的非简单变量是通过引用传递的，而不是通过复制传递的。您可以在传递数组之前通过在数组上使用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"));

请注意，我以数组的形式返回，因此我可以更好地控制哪些结果属于何处，并且可以轻松修改结果。

推荐阅读