JavaScript 如何根据数组的嵌套创建嵌套的无序列表

在这个问题说明中，我们的任务是使用Javascript根据数组的嵌套来创建嵌套的无序列表。因此，为了完成这个任务，我们将使用一个递归函数来遍历每个嵌套数组，并创建一个新的无序列表。

理解问题说明

在上面的问题说明中，我们需要使用Javascript为HTML创建一个嵌套列表的函数。代码的输入将是一个可以包含任意数量项和其他表示嵌套列表的数组的数组。

代码将使用递归函数来遍历给定的输入数组，并根据需要生成所需的列表结构的新的HTML元素，如ui，li和文本节点。生成的列表将与HTML文档中由ID标识的特定元素连接起来。

例如：

茶
冷饮
咖啡
奶昔

上面的列表是一个使用点表示的无序列表。

步骤

步骤1 -首先创建一个HTML文件，在此文件中包含用于创建无序列表的Javascript代码。创建一个div，并给其ID为jsList，以在前端显示列表。

步骤2 -定义一个具有列表项的嵌套数组。

步骤3 -定义一个名为createNestedList的函数，并传入一个嵌套数组的参数。

步骤4 -声明一个变量来存储使用createElement创建的无序列表项。

步骤5 -开始一个for循环来遍历数组元素，并将嵌套列表添加到列表标记中。

步骤6 -检查数组中是否有元素的条件。如果条件为真，则将其添加，否则执行else部分。

步骤7 -检查项目是否具有嵌套元素，如果有，则将其作为子节点附加到我们创建的节点上。

步骤8 -最后返回使用嵌套数组创建的无序列表。

代码

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS nested unordered list</title>
   </head>
   <body>
      <div id="jsList"></div>

      <script>
         //create a nested list
         const arr = [
            'Coffee', ['Cappuccino', 'Americano', 'Espresso', 'Mocha'],
            'Tea', ['Milk Tea', 'Black Tea'], 'Milk'
         ];
         //function to show the nested list on page
         function createNestedList(arr) {
            const ul = document.createElement('ul');
            for (let i = 0; i < arr.length; i++) {
               const li = document.createElement('li');
               if (Array.isArray(arr[i])) {
                  li.appendChild(createNestedList(arr[i]));
               } else {
                  li.appendChild(document.createTextNode(arr[i]));
               }
               ul.appendChild(li);
            }
            return ul;
         }
         const div = document.getElementById('jsList');
         div.appendChild(createNestedList(arr));
      </script>
   </body>
</html>