如何将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元素中，这样就将数组转换成了一个无序列表。