javascript - 从嵌套数组创建 UL

Question

我正在大学学习 JS 入门类(class)，我必须构建一个 <ul>通过 JS 嵌套数组。我已经构建了一个 <ol>使用常规数组作为作业的第一部分。这就是我所做的:

window.onload = function(){

    fruits.sort();

    var ol = "<ol>"
    for(var i = 0; i < fruits.length; i++){
        ol+= "<li>" + fruits[i] + "</li>"
    }ol += "</ol>"

    var myContainer = document.querySelector("#olContainer").innerHTML = ol;
};

对于这个数组:

var fruits = [ "Apples","Oranges","Pears","Grapes","Pineapples","Mangos" ];

我正在使用的当前嵌套数组是这样的:

var directory = [
    {type: "file", name: "file1.txt"},
    {type: "file", name: "file2.txt"},
    {type: "directory", name: "HTML Files", files: [{type: "file", name: "file1.html"},{type: "file", name: "file2.html"}]},
    {type: "file", name: "file3.txt"},
    {type: "directory", name: "JavaScript Files", files: [{type: "file", name: "file1.js"},{type: "file", name: "file2.js"},{type: "file", name: "file3.js"}]}
];

我认为使用 switch 语句会更好，但我不知道如何迭代每一行代码并提取嵌套列表以将它们缩进为子列表。我需要在之前的 JS 函数的基础上构建 <ol>列表

Answer 1

递归!它基本上是一个在特定条件之前调用自身的函数，更多详细信息:https://www.sitepoint.com/recursion-functional-javascript/

Recursion is a technique for iterating over an operation by having a function call itself repeatedly until it arrives at a result. Most loops can be rewritten in a recursive style, and in some functional languages this approach to looping is the default.

您通过了 directory到函数并循环遍历第一级值(如果它是 file)您将其添加到列表中，否则您调用相同的函数，但传递第二级列表，即值(文件列表)，添加另一个嵌套 ul ，等等..

请参阅下面的代码片段(基于您之前针对 <ol> 列表的 JS 函数)

var directory = [
    {type: "file", name: "file1.txt"},
    {type: "file", name: "file2.txt"},
    {type: "directory", name: "HTML Files", files: [{type: "file", name: "file1.html"},{type: "file", name: "file2.html"}]},
    {type: "file", name: "file3.txt"},
    {type: "directory", name: "JavaScript Files", files: [{type: "file", name: "file1.js"},{type: "file", name: "file2.js"},{type: "file", name: "file3.js"}]}
];

function createUl(list){
	
    var myUl = "<ul>";

    for(var i = 0; i < list.length; i++){
      if(list[i].type == "file")
        myUl+= "<li>" + list[i].name + "</li>";
      else{ // it's a directory
        myUl+= "<li>" + list[i].name + "</li>";
        myUl += createUl(list[i].files); // call the same function with the list of files
      }
    }

    myUl += "</ul>";
    
    return myUl;
}

var ulList = createUl(directory);
document.querySelector("#ulContainer").innerHTML = ulList;

<div id="ulContainer">

</div>