Question

我在大学学习了一门入门JS课程，我必须通过JS构建一个带有嵌套数组的<ul>。我已经为作业的第一部分构建了一个带有常规数组的<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语句会更好但我不知道如何遍历每行代码并提取嵌套列表以将它们缩进为子列表。我需要在<ol>列表

的基础上构建我以前的JS函数

Answer 1

去递归！它基本上是一个调用自身直到某些条件的函数，更多细节：https://www.sitepoint.com/recursion-functional-javascript/

递归是一种通过使用a来迭代操作的技术函数自身重复调用，直到它到达结果。最循环可以以递归样式重写，也可以在某些函数中重写语言这种循环方法是默认的。

你将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>

Answer 2

使用递归。直接创建元素并分配给textContent比打包HTML标记更清晰（您不确定输入的文本是否可以安全地插入HTML或不，毕竟）：

＆＃13;

const input = [
    {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"}]}
];

const outerUL = document.querySelector('ul');
appendObjToUL(input, outerUL);
function appendObjToUL(arr, ul) {
  arr.forEach(item => {
    ul.appendChild(document.createElement('li')).textContent = item.name;
    if (item.type === 'file') return;
    const dirLI = ul.appendChild(document.createElement('li'));
    const dirUL = dirLI.appendChild(document.createElement('ul'));
    appendObjToUL(item.files, dirUL);
  });
}

＆＃13;

<ul></ul>

＆＃13;

Answer 3

您可以使用2个for循环（嵌套for循环）来完成此操作。如果目录[i]具有files数组，则实现相同类型的for循环。

＆＃13;

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"}]}
];

window.onload = function(){
    var ol = "<ol>";
    for(var i = 0; i < directory.length; i++){
        ol += "<li>" + directory[i].name;
        if(directory[i].files) {
          ol += "<ol>";
          for(var j = 0; j < directory[i].files.length; j++) {
            ol += "<li>" + directory[i].files[j].name + "</li>";
          }
          ol += "</ol>";
        }
        ol += "</li>";
    }
    ol += "</ol>";

    var myContainer = document.querySelector("#olContainer").innerHTML = ol;
};

＆＃13;

<div id="olContainer"></div>

＆＃13;

从嵌套数组创建UL

3 个答案: