14、任务十四——数组对象的处理、修改DOM中的内容

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