js中的数组排序函数sort()和reverse()(上)

对列表进行排序一般都由后台来完成，但如果列表项不多无需分布的话也可以用JS完成，要使用JS排序自然也就想到sort()方法和reverse()方法，这两函数在JS中使用得比较多大家也许比较熟悉，但对于刚接触这两函数的初学者还是需要注意几点。

sort() 方法用于对数组的元素进行正序排列

reverse();方法用于对数组的元素进行倒序排列，这个没有什么可说的,所谓倒序就是大的在前面，小的在后面

例：

1     var array = [0,1,5,10,15];
2     document.write( array.sort() );
3     //输出结果：0,1,10,15,5
4     
5     document.write( array.reverse() );
6     //输出结果：0,1,10,15,5

对数组[0,1,5,10,15]进行正序和倒序排列　返回结果并不是我们想要的，
原因：默认情况下在使用sort()对数组进行排序的时候会调用toString()函数将数组元素转换成字符串再进行比较，是按ASCII进行比较的。

如下是Ｗ3Ｃ中对sort()方法的说明：

 

不难理解:1的ASCII值肯定要比5的ASCII值小，由于是正序那么越小的就越在前面!!　那怎样才能使其按数字大小排序呢。这个时候，就可以使用sort()中的参数了，

sort() 方法可以接受一个 方法为参数 ，这个方法有两个参数。分别代表每次排序比较时的两个数组元素。sort()排序时每次比较两个数组元素都会执行这个参数，并把两个比较的数组元素作为参数传递 给这个函数。当函数返回值大于0时就交换两个数组元素的顺序，否则就不交换。

reverse()与sort()使用方法相同就不赘述了

示例：

 1 　var array = [0,1,5,10,15];
 2     
 3   array.sort(function(n1,n2){
 4       return n1-n2;
 5   });    
 6   document.write(array);
 7   //输出结果：0,1,5,10,15
 8     
 9   array.reverse(function(n1,n2){
10       return n1-n2;
11   });    
12   document.write(array);
13   //输出结果：15,10,5,1,0
14 
15 　如下数组：
16 　var arrWidth = [ '345px', '23px', '10px', '1000px' ];

17 　按数值大小正序排序
18 　arrWidth.sort(function ( a, b ) {
19     　　return parseInt(a) - parseInt(b);
20 　});
21   document.write(arrWidth);
22   //10px,23px,345px,1000px
23 
24 　按数值大小倒序排序
25 　arrWidth.sort(function ( a, b ) {
26     　　return parseInt(b) - parseInt(a);
27 　});
28   document.write(arrWidth);
29   //1000px,345px,23px,10px

 

 

基础知识说完了，回到正题：对列表进行排序，实现思想是一样的就不多说了，直接上代码：

 1 <input id="btn1" type="button" value="正序" />
 2 <input id="btn2" type="button" value="倒序" />
 3 <ul id="ul">
 4     <li>34</li>
 5     <li>25</li>
 6     <li>9</li>
 7     <li>88</li>
 8     <li>54</li>
 9 </ul>
10 
11 <script>
12 window.onload=function ()
13 {
14     var oUl = document.getElementById('ul');
15     var aLi = oUl.getElementsByTagName('li');　//元素集合但并不是数组不能使用array对象中的方法
16     var oBtnSort=document.getElementById('btn1');
17     var oBtnReverse=document.getElementById('btn2');
18     var arr = [];
19         
20     oBtnSort.onclick = function()
21     {        
22         //将li元素放入空数组 以便使用数组的排序函数
23         for( var i=0; i<aLi.length; i++ )
24         {
25             arr[i] = aLi[i];
26         }
27         
28         //排序
29         arr.sort(function(li1,li2){
30             var n1 = parseInt( li1.innerHTML );
31             var n2 = parseInt( li2.innerHTML );
32             return n1 - n2;
33         });
34         
35         //将排序好的li元素重新插入ul中37         // appendChild功能 ：1,把节点从父节点中删除　2：追加节点到父节点
39         for( var i=0; i<arr.length; i++)
40         {            
41             oUl.appendChild( arr[i] );
42         }
43     }
44     
　　　　//倒序实现方法同上
45     oBtnReverse.onclick = function()
46     {                
48         for( var i=0; i<aLi.length; i++ )
49         {
50             arr[i] = aLi[i];
51         }

54         arr.reverse(function(li1,li2){
55             var n1 = parseInt( li1.innerHTML );
56             var n2 = parseInt( li2.innerHTML );
57             return n1 - n2;
58         });

61         for( var i=0; i<arr.length; i++)
62         {
63             oUl.appendChild( arr[i] );
64         }
65     }    
66     
67 };
68 </script>

 

演示代码：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>LI排序</title>
 6 <style>
 7 #ul1 {background:green;}
 8 #ul2 {background:yellow;}
 9 </style>
10 </head>
11 
12 <body>
13 <input id="btn1" type="button" value="正序" />
14 <input id="btn2" type="button" value="倒序" />
15 <ul id="ul">
16     <li>34</li>
17     <li>25</li>
18     <li>9</li>
19     <li>88</li>
20     <li>54</li>
21 </ul>
22 
23 <script>
24 window.onload=function ()
25 {
26     var oUl = document.getElementById('ul');
27     var aLi = oUl.getElementsByTagName('li');　//元素集合但并不是数组不能使用array对象中的方法
28     var oBtnSort=document.getElementById('btn1');
29     var oBtnReverse=document.getElementById('btn2');
30     var arr = [];
31         
32     oBtnSort.onclick = function()
33     {        
34         //将li元素放入空数组 以便使用数组的排序函数
35         for( var i=0; i<aLi.length; i++ )
36         {
37             arr[i] = aLi[i];
38         }
39         
40         //排序
41         arr.sort(function(li1,li2){
42             var n1 = parseInt( li1.innerHTML );
43             var n2 = parseInt( li2.innerHTML );
44             return n1 - n2;
45         });
46         
47     　　 //将排序好的li元素重新插入ul中        
48         for( var i=0; i<arr.length; i++)
49         {            
50             oUl.appendChild( arr[i] );
51         }
52     }
53     
54     oBtnReverse.onclick = function()
55     {        
56         for( var i=0; i<aLi.length; i++ )
57         {
58             arr[i] = aLi[i];
59         }
60         
61         arr.reverse(function(li1,li2){
62             var n1 = parseInt( li1.innerHTML );
63             var n2 = parseInt( li2.innerHTML );
64             return n1 - n2;
65         });
66         
67         for( var i=0; i<arr.length; i++)
68         {
69             oUl.appendChild( arr[i] );
70         }
71     }    
72     
73 };
74 </script>    
75 </body>
76 </html>
View Code

 

 

posted on 2014-05-09 16:42  chengyanfen  阅读(3521)  评论(0)  编辑  收藏  举报

导航