js中的數組排序函數sort()和reverse()(上)

時間 2019-11-22

原文原文鏈接

對列表進行排序通常都由後臺來完成，但若是列表項很少無需分佈的話也能夠用JS完成，要使用JS排序天然也就想到sort()方法和reverse()方法，這兩函數在JS中使用得比較多你們也許比較熟悉，但對於剛接觸這兩函數的初學者仍是須要注意幾點。html

sort() 方法用於對數組的元素進行正序排列數組

reverse();方法用於對數組的元素進行倒序排列，這個沒有什麼可說的,所謂倒序就是大的在前面，小的在後面app

例：ide

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()方法的說明：spa

不難理解:1的ASCII值確定要比5的ASCII值小，因爲是正序那麼越小的就越在前面!!　那怎樣才能使其按數字大小排序呢。這個時候，就可使用sort()中的參數了，code

sort() 方法能夠接受一個方法爲參數，這個方法有兩個參數。分別表明每次排序比較時的兩個數組元素。sort()排序時每次比較兩個數組元素都會執行這個參數，並把兩個比較的數組元素做爲參數傳遞給這個函數。當函數返回值大於0時就交換兩個數組元素的順序，不然就不交換。htm

reverse()與sort()使用方法相同就不贅述了對象

示例：blog

 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>