資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究JavaScript - 如何根據陣列巢狀建立巢狀無序列表？
在這個問題陳述中，我們的任務是使用 Javascript 根據陣列的巢狀建立巢狀無序列表。為此，我們將使用一個函式來遞迴呼叫每個巢狀陣列並建立一個新的無序列表。
理解問題陳述
在上述問題陳述中，我們必須使用 Javascript 為 HTML 中的巢狀列表建立一個函式。程式碼的輸入將是一個數組，該陣列可以包含任意數量的專案，並且還可以包含表示巢狀列表的其他陣列。
該程式碼將使用遞迴函式遍歷給定的輸入陣列，並根據需要開發新的 HTML 元素（如 ul、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>
複雜度
程式碼的時間複雜度為 O(n)，其中 n 是給定輸入陣列中的元素總數，因為每個元素都遍歷並處理一次。但是，由於遞迴函式可以建立大量新的 HTML 元素並將其儲存在呼叫堆疊上，因此空間複雜度可能更高。
結論
以上程式碼是使用 Javascript 中的巢狀陣列建立巢狀無序列表的示例。該程式碼提供了一種靈活且高效的方法來使用 Javascript 在 HTML 中生成巢狀列表。但是，當處理大型巢狀陣列時，應謹慎使用此程式碼，以避免記憶體使用和堆疊溢位問題。
3K+ 次瀏覽
