JavaScript - 如何基于数组嵌套创建嵌套无序列表?
在此问题陈述中，我们的任务是借助 Javascript 基于数组嵌套创建嵌套无序列表。因此，为了完成此任务，我们将使用一个函数对每个嵌套数组进行递归调用，并创建一个新的无序列表。
理解问题陈述
在上述问题陈述中，我们必须使用 Javascript 在 HTML 中为嵌套列表创建一个函数。代码的输入将是一个可以包含任意数量项目的数组，还可以包含表示嵌套列表的其他数组。
代码将使用递归函数遍历给定的输入数组，并根据需要开发新的 HTML 元素(如 ui、li 和文本节点)，以生成所需的列表结构。结果列表与 HTML 文档中由 ID 标识的特定元素相连接。
例如 −
Tea
Cold drink
Coffee
Milk Shake
上述列表是借助虚线显示的无序列表。
算法
步骤 1 − 首先创建一个 HTML 文件，在这个文件中，我们必须包含用于创建无序列表的 Javascript 代码。然后创建一个 div 并将 id 指定为 jsList，我们需要在前端显示列表
步骤 2 − 定义一个包含列表项的嵌套数组。
步骤 3 - 定义一个名为 createNestedList 的函数并传递一个嵌套数组的参数。
步骤 4 - 声明一个变量，使用 createElement 或 help 来存储无序列表项。
步骤 5 - 启动 for 循环来循环遍历数组元素，并在 list 标签中添加嵌套列表。
步骤 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>
//创建嵌套列表
const arr = [
'Coffee', ['Cappuccino', 'Americano', 'Espresso', 'Mocha'],
'Tea', ['Milk Tea', 'Black Tea'], 'Milk'
];
//在页面上显示嵌套列表的函数
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>
复杂性
代码的时间复杂度为 O(n)，其中 n 是给定输入数组中的元素总数，因为每个元素都遍历并处理一次。但是空间复杂度可能更高，因为递归函数可以创建大量新的 HTML 元素并将其存储在调用堆栈中。
结论
上面的代码是使用 Javascript 中的嵌套数组创建嵌套无序列表的示例。该代码提供了一种灵活而有效的方法，可以在 Javascript 的帮助下在 HTML 中生成嵌套列表。但是，当我们处理大型嵌套数组时，应谨慎使用此代码，以避免出现内存使用和堆栈溢出问题。
