别慌！jQuery教程：数组转列表如喝水般简单

别慌！跟我学 jQuery，处理那些编程问题就像吃饭喝水那么简单，就连把数组转成列表这样小事也不怕。今天咱们来搞定它，常用的函数有 each(), map()还有模板引擎。

使用jQuery.each()方法

每天搞前端开发，总是离不开数组，得将每个元素变成网页能理解的HTML格式才行。这个时候，jQuery.each()功能超强！它能挨个儿检查每个元素，并瞬间改成相应的HTML；随后，这些处理好的HTML就会被塞进新列表中，圆满完成任务！

通过以下示例代码可以更好地理解：

javascript
var arr =[1,2,3,4,5];
var ul =$("<ul></ul>");
var arr = [1, 2, 3, 4, 5];
var list = $('
'); // 创建一个空的
元素
$.each(arr, function(index, value) {
  var li = $('
').text(value); // 创建一个
元素，并将数组中的值作为文本内容添加到
中
  list.append(li); // 将
添加到
中
});
$('body').append(list); // 将
添加到页面中
给数组中的每个元素做点啥事，咱就用个for循环来搞定。

    var li =$("<li></li>").text(value);

    ul.append(li);

});

$("body").append(ul);

咱们首先得做一个空的ul列表，接着处理arr中的每一个元素。在这个过程里，咱们会随机生成一些li标签，给它们赋上从数组里取出来的数字标题。搞定这些以后，咱就可以把新鲜出炉的li标签丢到ul列表里去了。最后，就是让ul跑到网页上去，这样我们的漂亮列表就显示出来
这个方法好理解，适用于展示基本数据，非常好用！
使用jQuery.map()方法
你是不是只知道 jQuery 的 each()呀？告诉你，还有个 map()！这个家伙本领超级大，能把数组变成列表！你一定想知道怎么回事？简单说，就是因为它可以把数组转成新的数组或者对象，对要处理每个元素然后产生新数据的情况就特别好用~
下面是一个示例代码：
咱们试试看用Map的方式找找老数组里有哪些新鲜事儿！这个方法就是让电脑帮咱们把整个老数组过一遍，然后交给了咱们自编的新函数处理。这么做的话，新函数就能看到每个元素，最后还给咱们带来了全新的价值~
var arr = [1, 2, 3, 4, 5];
var listItems = $.map(arr, function(value) {
  return $('
').text(value);
});
var list = $('
').append(listItems);
$('body').append(list);

    return “<li>”+ value +”</li>”;
我们把新数组添加到空的字符串里，然后将其变成一个UL标签。

咱们来弄个小玩意儿，让arr数组变成newArr数组里的li元素，然后再搞个空白的ul列表，吧newArr里面的东西一个个往里塞。好了，搞定了，整个ul列表就出现在网页上
比起单个处理，利用map()搞每个元素的变形后，再一汇总变成新的集合不是更省事儿吗？
使用jQuery实现模板引擎
除了前两招儿，别忘了还有个神器，就是模板引擎。这个东西能让我们快速写出漂漂亮亮的网页，而且还会自动生成HTML代码，真的很省事儿！
var arr =[
    { name:’Alice’, age: 25 },
    { name:’Bob’, age: 30 },
    { name:’Cathy’, age: 28 }
];
朋友，你叫什么名字来着？(“{{name}}”)”这么念就对了。那你比我大几岁呀？我们都属人类的，所以年龄自然也是按人头算了?(“{{age}}”)
var arr = [1, 2, 3, 4, 5];
var template = '
{value}
'; // 模板字符串
var listItems = $.map(arr, function(value) {
  return template.replace('{value}', value); // 使用模板字符串替换值
});
var list = $('
').append(listItems);
$('body').append(list);

咱们借着 jQuery 给数组做个大扫除，让 HTML 变得整洁优雅起来！说得通俗点，就是让他们变成 HTML 的模样。
直接换成你想显示的名字和年龄就成！
把htmlArr添加到ul里面去。
刚刚那段代码，就是用`template`字符串把`arr`的每个元素都替换成新的东东。换完之后，再把这些新的 HTML 字符串拼成一串列表，显示到网页上就大功告成！
显示直接借用模板引擎，就算适应不了那复杂无比的代码也没有关系。而且遇到棘手问题时，照样能轻松应对！
总结
就想学如何把数组变成list？跟着我学，非常简单！只需要掌握几个好用的函数，比如 jQuery 的 each()和 map()，加上模板引擎，让你能快速将数组中的内容转换成 HTML 元素出现在网页上。
想快点完成前端开发吗？别忘了挑选好展示数据的方法！学会这几点小技巧，让你的前端开发速度飞起来！
			    						    						    						    					    		
			    					    				    					    			
 原文链接：https://www.icz.com/technicalinformation/web/2024/04/15503.html，转载请注明出处~~~