15、任务十五——数组对象遍历、读写、排序

0、题目

读取页面上已有的source列表，从中提取出城市以及对应的空气质量
将数据按照从小到大顺序排序后，在resort列表中按照顺序显示出来

1、解答过程

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="UTF-8">
 5     <title>IFE Task 15——零基础JavaScript编码（三）</title>
 6   </head>
 7 <body>
 8   <ul id="source">
 9     <li>北京空气质量：<b>90</b></li>
10     <li>上海空气质量：<b>70</b></li>
11     <li>天津空气质量：<b>80</b></li>
12     <li>广州空气质量：<b>50</b></li>
13     <li>深圳空气质量：<b>40</b></li>
14     <li>福州空气质量：<b>32</b></li>
15     <li>成都空气质量：<b>90</b></li>
16   </ul>
17   <ul id="resort">
18     <!-- 
19     <li>第一名：北京空气质量：<b>90</b></li>
20     <li>第二名：北京空气质量：<b>90</b></li>
21     <li>第三名：北京空气质量：<b>90</b></li>
22      -->
23   </ul>
24   <button id="sort-btn">排序</button>
25  <script type="text/javascript">
26 var data=[]; 
27 var chinese=["一","二","三","四","五","六","七"];
28
29 /**
30  * getData方法
31  * 读取id为source的列表，获取其中城市名字及城市对应的空气质量
32  * 返回一个数组，格式见函数中示例
33  */
34 function getData() {
35   var name=document.getElementById("source").getElementsByTagName("li"),
36       number=document.getElementById("source").getElementsByTagName("b");
37  for(var i=0;i<7;i++){
38          data[i]=[name[i].innerText.substring(0,2),number[i].innerHTML];
39   }
40     return data;
41 }
42 /**
43  * sortAqiData
44  * 按空气质量对data进行从小到大的排序
45  * 返回一个排序后的数组
46  */
47 function sortAqiData(data) {
48   data.sort(function(a,b){
49       return a[1]-b[1];
50 })
51   return data;
52 }
53 /**
54  * render
55  * 将排好序的城市及空气质量指数，输出显示到id位resort的列表中
56  * 格式见ul中的注释的部分
57  */
58 function render(data) {
59   var content='';
60   for(var j = 0;j<7;j++){
61         content+="<li>第"+chinese[j]+"名："+data[j][0]+"空气质量：<b>"+data[j][1]+"</b></li>";
62   }
63 document.getElementById("resort").innerHTML=content;
64 }
65  function btnHandle() {
66  var aqiData = getData();
67   　 aqiData = sortAqiData(aqiData);
68   　 render(aqiData);
69 }
70 function init() {
71 // 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数
72    document.getElementById("sort-btn").onclick=btnHandle;
73 }
74 init();
75 </script>
76 </body>
77 </html>

2、遇到的问题

（1）为得到source列表中的城市名使用了substring()方法截取字符串（如“北京空气质量”）的前两个字，如果存在城市名不是两个字，那么这个方法就不行了，因此可以用name[i].innerHTML.split("空气")[0]截取城市名 (split()方法把字符串分割为字符串数组)。

（2）onclick调用函数

　　ele.onclick=funcName 的意思就是在ele.onclick中保存了一个funcName方法的一个引用，类似于C语言中的函数指针。当click事件发生的时候，会调用funcName函数；

　（注：ele.onclick=function(){ funcName();}也可达到相同目的，适用于需要传递参数的情况）

　　如果函数加了()就是执行函数了，也就是当eleonclick=funcName()时，ele.onclick获得的就是函数的返回值，即不论click事件发生与否，都会直接调用funcName函数。