来源：任务十四——js高手之路
0、题目
页面加载后，将提供的空气质量数据数组，按照某种逻辑（比如空气质量大于60）进行过滤筛选，最后将符合条件的数据按照一定的格式要求显示在网页上
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>IFE JavaScript Task 14</title> 6 </head> 7 <body> 8 <h3>污染城市列表</h3> 9 <ul id="aqi-list"> 10 <!-- 11 <li>第一名：福州（样例），10</li> 12 <li>第二名：福州（样例），10</li> --> 13 </ul> 14 <script type="text/javascript"> 15 var aqiData = [ 16 ["北京", 90], 17 ["上海", 50], 18 ["福州", 10], 19 ["广州", 50], 20 ["成都", 90], 21 ["西安", 100] 22 ]; 23 (function () { 24 /* 25 在注释下方编写代码 26 遍历读取aqiData中各个城市的数据 27 将空气质量指数大于60的城市显示到aqi-list的列表中 28 */ 29 })(); 30 </script> 31 </body> 32 </html>
1、解答过程
鉴于数据存储在一个数组对象中，因此可以用数组的sort()方法进行排序，当然也可以用冒泡法进行排序，同时也有两种方法将内容添加至aqi-list列表中。
（1）if & for + 通过DOM创建新的HTML元素：
使用了冒泡法进行排序，document.createElement、document.createTextNode、element.appendChild显示排序结果；
1 (function () { 2 3 var max; 4 for(m=0;m<=5;m++){ 5 for(i=1;i<=5-m;i++){ 6 if(aqiData[m][1]<aqiData[m+i][1]){ 7 max=aqiData[m+i]; 8 aqiData[m+i]=aqiData[m]; 9 aqiData[m]=max; 10 } 11 } 12 } 13 for( var i=0;i<aqiData.length;i++){ 14 if(aqiData[i][1]>60){ //筛选出空气质量指数大于60的数据 15 var li=document.createElement("li"); //创建新元素节点li 16 li.appendChild(document.createTextNode("第"+chinese[i]+"名："+aqiData[i][0]+","+aqiData[i][1])); //将文本节点追加至元素节点上 17 document.getElementById("aqi-list").appendChild(li); //将新元素添加到aqi-list列表中 18 } 19 } 20 })();
（2）数组对象的方法 + innerHTML改变内容：
使用了array.filter、array.sort，使用了array.forEach方法来代替for循环遍历处理数组元素， 最后用innerHTML属性一次性添加所有内容
1 (function () { 2 3 var content= " "; 4 var chinese=["一","二","三","四","五","六"]; 5 aqiData.filter(function(element){return element[1]>60;}) //array.filter()方法筛选出大于60的数据 6 .sort(function(a,b){return b[1]-a[1];}) //数据进行从大到小的排序，用array.sort()方法 7 .forEach(function(element,index){ //遍历得到输出的内容 8 content+="<li>第"+chinese[index]+"名："+element[0]+","+element[1]+"</li>"; 9 }); 10 11 document.getElementById("aqi-list").innerHTML=content; //通过innerHTML属性改变aqi-list列表中的内容 12 })();
由于filter本身就对数组进行了循环，所以可以不使用forEach( )方法，同时先sort排序可以省去缓存一个新数组的步骤 ，改进后的代码如下：
1 (function () { 2 var content= " "; 3 var chinese=["一","二","三","四","五","六"]; 4 aqiData.sort(function(a,b){return b[1]-a[1];}) //排序 5 .filter(function(element,index){ 6 if(element[1]>60){ //筛选出大于60的数据 7 content+="<li>第"+chinese[index]+"名："+element[0]+","+element[1]+"</li>";} 8 }) 9 document.getElementById("aqi-list").innerHTML=content; 10 })();
2、遇到的问题
（1）sort()方法：
sort() 方法用于对数组的元素进行排序，排序过程是在原数组上进行的，不生成副本。
A、如果调用该方法时没有使用参数，将按照字符编码的顺序进行排序。也就是说' [5,10,2].sort(); '的结果是[10,2,5]；
B、如果提供的有比较函数compareFunction()，那么数组会按照比较函数的返回值进行排序。
记 a 和 b 是两个将要被比较的元素，compareFunction(a,b)为比较函数的返回值
-
- 若compareFunction(a,b)小于0，a前b后；
- 若compareFunction(a,b)等于0， a 和 b 的位置不变;
- 若compareFunction(a,b)大于0，b前a后。
简化一下：比较函数中‘ return a-b; ’从小到大排序，‘ return b-a; ’从大到小排序。
（2）array.filter() & array.forEach()方法
array.filter在数组中的每个项上运行一个函数，并将函数返回真值的项作为数组返回。简单的说就是用一个条件过滤掉不符合的数组元素，剩下的符合条件的元素组合成新的数组返回。
array.forEach在数组中的每个项上运行一个函数。
具体请看：Javascript数组对象的方法（含jQuery 转载）
（3）性能问题
appendChild 和innerHTML的性能网上说法不一，有待测试！
HTML DOM插入内容请看：HTML DOM