如何將Javascript數組轉換為列表（List）

一、使用ul和li標籤實現

將數組轉換為列表最常見的方法就是使用HTML中的ul和li標籤將其轉換為無序列表或有序列表。下面是一個使用JavaScript來將數組轉換為無序列表的代碼示例。

const arr = ['apple', 'banana', 'pear', 'watermelon'];

let ul = document.createElement('ul');
document.body.appendChild(ul);

for(let i = 0; i < arr.length; i++){
    let item = document.createElement('li');
    item.innerText = arr[i];
    ul.appendChild(item);
}

上述代碼中，我們首先創建了一個數組‘arr’，然後創建了一個ul元素並將其添加到了頁面中。之後，我們通過for循環遍曆數組中的每個元素，並將每個元素添加到li元素中。最後，我們將li元素添加到ul元素中，這樣就將數組轉換成了一個無序列表。

二、使用template模板實現

除了可以使用HTML元素和JavaScript來進行數組轉換之外，我們還可以使用HTML5新增的template模板標籤來實現。

const arr = ['apple', 'banana', 'pear', 'watermelon'];

let template = document.createElement('template');
template.innerHTML = `
    

        ${arr.map(item => `
${item}
`).join('')}
    
`;

document.body.appendChild(template.content);

上述代碼中，我們首先創建了一個數組‘arr’，之後創建了一個template元素。在這個template元素中，我們使用ES6中的模板字符串來創建一個包含無序列表的字符串，並且使用map函數來將每個數組元素包裹在li標籤中。最後我們將這個字符串插入到template標籤中間，並且使用content屬性將這個template模板添加到了頁面中。

三、使用庫函數實現

除了通過自己編寫代碼來進行數組轉換，我們還可以使用一些庫函數來實現這個功能。下面是一個使用Lodash庫函數來將數組轉換為列表的代碼示例。

const arr = ['apple', 'banana', 'pear', 'watermelon'];

let ul = document.createElement('ul');
document.body.appendChild(ul);

_.forEach(arr, function(item){
    let li = document.createElement('li');
    li.innerText = item;
    ul.appendChild(li);
});

上述代碼中，我們首先創建了一個數組‘arr’， 然後創建了一個ul元素並將其添加到了頁面中。之後，我們使用Lodash庫中的forEach函數遍曆數組中的每個元素，並將每個元素添加到li標籤中。最後，我們將li元素添加到ul元素中，這樣就將數組轉換成了一個無序列表。