JS实例（四）百度前端技术学院任务（十四）-优快云博客

本文通过使用JavaScript实现了一个污染城市列表的空气质量排名功能，包括HTML和CSS布局，以及数据处理和排序算法应用。

 1 !DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <title>IFE JavaScript Task 01</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       aqiData.sort(function(a,b){
30         return b[1]-a[1];
31       })    //排序
32       var ul_Node = document.getElementById('aqi-list');
33       for (var i = 0; i < aqiData.length; i++) {
34         var data = aqiData[i];
35         if (data[1] > 60) {
36           var li = document.createElement("li");
37           li.innerHTML = '第' + (i + 1) + '名：' + data[0] + ',' + data[1];
38           ul_Node.appendChild(li);
39         }
40       }
41     })();
42 </script>
43 </body>
44 </html>

　　其中涉及到了一些小点：

　　1、sort方法的用法：返回一个元素已经排序后的Array对象。

　　arrayobj.sort(sortfunction);

　　arrayobj是必选项，为任意的array对象。而sortfunction为可选项，是用来确定元素顺序的函数名称。当参数被省略时，元素将按照ASCII码顺序进行升序排列。

　　sort方法将Array对象进行适当的排序，执行过程中并不会创建新的Array对象。

　　如果为 sortfunction 参数提供了一个函数，那么该函数必须返回下列值之一：

　　负值，如果所传递的第一个参数比第二个参数小。
　　零，如果两个参数相等。
　　正值，如果第一个参数比第二个参数大。
　　Demo（默认按字母排序）：

1 <script language="javascript"> 
2   var nameArr = new Array("douguoqiang","hedan","redhacker","panliu888","maxuan","xuejianping","lanse","zhangsan","lisi","wangwu"); 
3   nameArr.sort(); 
4   for (var i = 0; i < nameArr.length; i++) { 
5     document.writeln(nameArr[i]); 
6   } 
7 </script>

　　Demo（数字排序，sort(sortfunction)方法带参数）：升序排序

1 <script> 
2   var numArr = new Array(12,23,1,4,23,34,2,5); 
3   numArr.sort(function compare(a,b){return a-b;}); 
4   for (var i = 0; i<numArr.length; i++) { 
5     document.write(numArr[i] +"<br>"); 
6   } 
7 </script>

　　Demo3（降序排序）：

1 <script> 
2   var numArr = new Array(12,23,1,4,23,34,2,5); 
3   numArr.sort(function compare(a,b){return b-a;}); 
4   for (var i = 0; i<numArr.length; i++) { 
5     document.write(numArr[i] +"<br>"); 
6   } 
7 </script>