一、使用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元素中，这样就将数组转换成了一个无序列表。
原创文章，作者：RXUF，如若转载，请注明出处：https://www.506064.com/n/131069.html
微信扫一扫 
支付宝扫一扫 