<!DOCTYPE html> <html> <head> <title>创建dom</title> </head> <body> <ul> </ul> <script type="text/javascript"> var aqiData = [ ["北京", 90], ["上海", 50], ["福州", 10], ["广州", 50], ["成都", 90], ["西安", 100] ]; aqiData.sort(function (a,b){ //1 return a[1] - b[1]; //2 }); console.log(aqiData); (function () { var nodeUl = document.getElementsByTagName("ul")[0]; for (var i = 0; i < aqiData.length; i++) { var nodeLi = document.createElement("li"); //3 nodeLi.innerHTML = "第"+(i+1)+"名:"+ aqiData[i]; //4 nodeUl.appendChild(nodeLi); //5 }; })(); </script> </body> </html>
页面加载后,将提供的空气质量数据数组,按照某种逻辑进行过滤筛选,最后将符合条件的数据按照一定的格式要求显示,本文是按照空气质量从小到大排序。
//1 数组的sort方法接受一个参数,非必要,此参数必须是一个函数,这个函数会被sort调用。
//2 sort应该是通过冒泡算法来进行比较,所以我们可以看成只有2个数进行比较,本文是依照每个城市的空气指数排序的,所以就 return a[1] - b[1];如果返回值大于0,a就放在b前面,小于0,则反之,2个数排序本就只有2种状态,多个数也是一个模式,sort内部的实现应该也是如此了。
//3 js用document.createElement("标签名")这种方式创建新节点的;
//4 添加内容进去;
//5 nodeA.appendChild(nodeB);