标签：
尽量避免循环内appendChild…重排会引起性能下降，对DOM的操作要越少越好，可考虑将ul中内容 保存到临时字符串 最后一次性添加。
var aqiData = [
["北京", 90],
["上海", 50],
["福州", 10],
["广州", 50],
["成都", 90],
["西安", 100]
];
(function () {
/*
在注释下方编写代码
遍历读取aqiData中各个城市的数据
将空气质量指数大于60的城市显示到aqi-list的列表中
*/
var chineseNumbers = ["一","二","三","四","五","六","七","八","九","十"];
var contentStr = "";
aqiData.filter(function(element){return element[1] > 60;})
.sort(function (d1,d2){ return d2[1] - d1[1]; })
.forEach(function (element,index){
contentStr += "<li>第" + chineseNumbers[index] + "名：" + element[0] + "，" + element[1] + "</li>";
});
document.getElementById("aqi-list").innerHTML = contentStr;
})();
</script>
<hr />
<p>
使用了array.filter、array.sort，使用了array.forEach方法来代替for循环遍历处理数组元素，使用了这三个数组函数的链式调用；
使用了element.innerHTML属性一次性改变元素的DOM结构
</p>
(function () {
/*
在注释下方编写代码
遍历读取aqiData中各个城市的数据
将空气质量指数大于60的城市显示到aqi-list的列表中
*/
//firstly ,sort the aqiData array.
aqiData.sort(function (d1,d2){
return d2[1] - d1[1];
});
var chineseNumbers = ["一","二","三","四","五","六","七","八","九","十"];
for(var i=0;i<aqiData.length;i++){
if(aqiData[i][1] > 60){ //find a needed city
var li = document.createElement("li");
li.appendChild(document.createTextNode("第" + chineseNumbers[i] + "名：" + aqiData[i][0] + "，" + aqiData[i][1]));
document.getElementById("aqi-list").appendChild(li);
}
}
})();
使用了array.sort、document.createElement、document.createTextNode、node.appendChild等方法；
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>IFE JavaScript Task 01</title> </head> <body> <h3>污染城市列表</h3> <ul id="aqi-list"> <!-- <li>第一名：福州（样例），10</li> <li>第二名：福州（样例），10</li> --> </ul> <script type="text/javascript"> var aqiData = [ ["北京", 90], ["上海", 50], ["福州", 10], ["广州", 50], ["成都", 90], ["西安", 100] ]; (function () { /* 在注释下方编写代码 遍历读取aqiData中各个城市的数据 将空气质量指数大于60的城市显示到aqi-list的列表中 */ var content= " "; var chinese=["一","二","三","四","五","六"]; var aqilist=document.getElementById("aqi-list"); var newArr=aqiData.filter(function(element){return element[1]>60;}); var newArr=newArr.sort(function(a,b){return b[1]-a[1];}); newArr.forEach(function(element,index){content+="<li>第"+chinese[index]+"名："+element[0]+","+element[1]+"</li>";}); aqilist.innerHTML=content; })(); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>IFE JavaScript Task 01</title> </head> <body> <h3>污染城市列表</h3> <ul id="aqi-list"> <!-- <li>第一名：福州（样例），10</li> <li>第二名：福州（样例），10</li> --> </ul> <script type="text/javascript"> var aqiDat = [ ["北京", 90], ["上海", 50], ["福州", 10], ["广州", 50], ["成都", 90], ["西安", 100] ]; (function () { /* 在注释下方编写代码 遍历读取aqiData中各个城市的数据 将空气质量指数大于60的城市显示到aqi-list的列表中 */ var content=" ", chinese=["一","二","三","四","五","六"]; var aqilist=document.getElementById("aqi-list"); var aqiData=aqiDat.sort(function(a,b){return b[1]-a[1];}); var li=document.createElement("li"); for( var i=0;i<aqiData.length;i++){ if(aqiData[i][1]>60){ content+="第"+chinese[i]+"名："+aqiData[i][0]+","+aqiData[i][1]; } } var node=document.createTextNode(content); li.appendChild(node); aqilist.appendChild(li); })(); </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/cjlalala/p/5808228.html
