如何在javascript中将列表或数组显示为树结构？

我将此列表从python传递到javascript，如下所示：

 var string=["test_data/new_directory/ok.txt","test_data/reads_1.fq","test_data/test_ref.fa"];

test_data
  reads_1.fq
  test_ref.fa
  new_directory
    ok.txt

test_data
 reads_1.fq
 test_ref.fa

test_data/new_directory
  ok.txt

var string=["test_data/new_directory/ok.txt","test_data/reads_1.fq","test_data/test_ref.fa"];

                                     for(var i=0;i<string.length;i++){

                                         var result = string[i].split('/');

                                          console.log(result);


                                     }

["test_data", "new_directory", "ok.txt"]
["test_data", "reads_1.fq"]
["test_data", "test_ref.fa"]

我想要这样的输出：

 var string=["test_data/new_directory/ok.txt","test_data/reads_1.fq","test_data/test_ref.fa"];

test_data
  reads_1.fq
  test_ref.fa
  new_directory
    ok.txt

test_data
 reads_1.fq
 test_ref.fa

test_data/new_directory
  ok.txt

var string=["test_data/new_directory/ok.txt","test_data/reads_1.fq","test_data/test_ref.fa"];

                                     for(var i=0;i<string.length;i++){

                                         var result = string[i].split('/');

                                          console.log(result);


                                     }

["test_data", "new_directory", "ok.txt"]
["test_data", "reads_1.fq"]
["test_data", "test_ref.fa"]

或者输出可以是这样的：

 var string=["test_data/new_directory/ok.txt","test_data/reads_1.fq","test_data/test_ref.fa"];

test_data
  reads_1.fq
  test_ref.fa
  new_directory
    ok.txt

test_data
 reads_1.fq
 test_ref.fa

test_data/new_directory
  ok.txt

var string=["test_data/new_directory/ok.txt","test_data/reads_1.fq","test_data/test_ref.fa"];

                                     for(var i=0;i<string.length;i++){

                                         var result = string[i].split('/');

                                          console.log(result);


                                     }

["test_data", "new_directory", "ok.txt"]
["test_data", "reads_1.fq"]
["test_data", "test_ref.fa"]

我使用split函数获得每个文件和目录的列表，如下所示：

 var string=["test_data/new_directory/ok.txt","test_data/reads_1.fq","test_data/test_ref.fa"];

test_data
  reads_1.fq
  test_ref.fa
  new_directory
    ok.txt

test_data
 reads_1.fq
 test_ref.fa

test_data/new_directory
  ok.txt

var string=["test_data/new_directory/ok.txt","test_data/reads_1.fq","test_data/test_ref.fa"];

                                     for(var i=0;i<string.length;i++){

                                         var result = string[i].split('/');

                                          console.log(result);


                                     }

["test_data", "new_directory", "ok.txt"]
["test_data", "reads_1.fq"]
["test_data", "test_ref.fa"]

---

我怎样才能转换成上面显示的格式？谢谢

这当然是可能的，但它需要递归

你想做的第一件事（事实上，正如你已经知道的那样）是在斜线上拆分。为了简单起见，我们将使用

map

：

paths = paths.map(function(path) { return path.split('/'); });

现在我们要将其转换为具有

name

和

children

属性的对象数组。这意味着我们必须使用递归

在这个函数中，我们将通过第一个元素对它们进行第一次分组：

var items = [];
for(var i = 0, l = paths.length; i < l; i++) {
    var path = paths[i];
    var name = path[0];
    var rest = path.slice(1);
    var item = null;
    for(var j = 0, m = items.length; j < m; j++) {
        if(items[j].name === name) {
            item = items[j];
            break;
        }
    }
    if(item === null) {
        item = {name: name, children: []};
        items.push(item);
    }
    if(rest.length > 0) {
        item.children.push(rest);
    }
}

现在我们有了一个很好的结构。然后我们可以用递归函数将其字符串化。由于目录列表只是每个项目名称后跟缩进目录内容列表，因此我们可以相当轻松地编写：

function stringify(items) {
    var lines = [];
    for(var i = 0, l = items.length; i < l; i++) {
        var item = items[i];
        lines.push(item.name);
        var subLines = stringify(item.children);
        for(var j = 0, m = subLines.length; j < m; j++) {
            lines.push("  " + subLines[j]);
        }
    }
    return lines;
}

---

抱歉来晚了。我在尝试将路径列表分解为嵌套对象时遇到了类似的问题。这是一把小提琴，展示了我最后是如何做的

var list = [];
list.push("A/B/C");
list.push("A/B/D");
list.push("A/B/C");
list.push("B/D/E");
list.push("D/B/E");
list.push("A/D/C");

var data = [];
for(var i = 0 ; i< list.length; i++)
{
   buildTree(list[i].split('/'),data);    
}
debugger;

function buildTree(parts,treeNode) {
     if(parts.length === 0)
     {
          return; 
     }

     for(var i = 0 ; i < treeNode.length; i++)
     {
          if(parts[0] == treeNode[i].text)
          {
              buildTree(parts.splice(1,parts.length),treeNode[i].children);
              return;
          }
     }

     var newNode = {'text': parts[0] ,'children':[]};
     treeNode.push(newNode);
     buildTree(parts.splice(1,parts.length),newNode.children);
}

var list=[]；
列表推送（“A/B/C”）；
列表推送（“A/B/D”）；
列表推送（“A/B/C”）；
列表推送（“B/D/E”）；
列表推送（“D/B/E”）；
列表推送（“A/D/C”）；
var数据=[]；
对于（变量i=0；i

---

不错。正在处理它。：）谢谢@PraveenKumar！我想如果我将字符串转换为JSON，它就会工作。：）好 啊：（无论如何，感谢您的尝试！@PraveenKumar请查看我的更新问题和可选输出。您认为可以实现这种输出吗？非常感谢您的精彩回答。+1。但我在调用console.log时最终遇到了此错误：RangeError:最大调用堆栈大小exceeded@user2032220：我有一个小错误；

item.ch只有在
rest.length>0
的情况下，才应该发生ildren.push（rest）；

。请参阅我编辑的答案。我对javascript还是新手。现在，我在构造代码时遇到了问题。我已将第二个代码段放入名为structurize（）的函数中循环第三段代码，然后我得到了未定义的项。这些项在for循环中指示了什么？我管理代码以正确的结构绑定。最后，我得到：TypeError:无法读取undefinedHm的属性“length”。我可能会以错误的方式调用递归函数吗？您能编辑您的答案并将所有代码放在一起吗？谢谢请考虑编辑你的答案，为你的答案代码提供更多的上下文。此外，请考虑将你的文章末尾的URL合并到文本中，这解释了为什么你把它作为帖子的一部分。