前言
排序是計算機內經常進行的一種操作，其目的是將一組“無序”的記錄序列調整為“有序”的記錄序列，當然排序也是算法中的一種，javascript內置的sort函數是多種排序算法的集合，數組在原數組上進行排序。JavaScript實現多維數組、對象數組排序，其實用的就是原生的sort()方法，用於對數組的元素進行排序。
I.簡單排序
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>簡單排序</title> </head> <body> <script type="text/javascript"> var numbers=[4,6,8,0,1,2,3,7,9]; numbers.sort();//調用數組內置排序方法 console.log(numbers);//0,1,2,3,4,6,7,8,9 numbers.reverse();//將數組進行反轉 console.log(numbers);//9,8,7,6,4,3,2,1,0 </script> </body> </html>
雖說我們實現了排序，也達到了我們想要的結果，但是這種排序有問題，我們看下下面這個例子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>簡單排序</title> </head> <body> <script type="text/javascript"> var numbers=[4,6,8,0,1,2,3,7,9]; numbers.sort();//調用數組內置排序方法 console.log(numbers);//0,1,2,3,4,6,7,8,9 numbers.reverse();//將數組進行反轉 console.log(numbers);//9,8,7,6,4,3,2,1,0 var num=[0,1,5,10,15]; num.sort();//調用數組內置的排序方法 console.log(num);//0,1,10,15,5 num.reverse();//調用數組內置的反轉方法 console.log(num);//5,15,10,1,0 </script> </body> </html>
為什么呢？且聽我一一道來，本身sort()這個方法是沒有問題的，在默認情況下，sort()方法按升序排列數組項，即最小的值位於最前面，最大的值排在最后面。為了實現升序，sort()方法會調用每個數組項的toString()轉型方法，然后比較得到的字符串，以確定如何排序。即使數組中的每一項都是數值，sort()方法比較的也是字符串。為了更好的實現排序，sort()方法可以接收一個比較函數作為參數，以便我們指定哪個值位於那個值的前面，我們看下下面的案例。
II.簡單數組自定義排序
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>簡單數組自定義排序</title> </head> <body> <script type="text/javascript"> var number=[0,1,10,15,5]; function arrAsc(a,b){ //實現數組升序的方法 if(a>b){ return 1; }else if(a<b){ return -1; }else{ return 0; } } number.sort(arrAsc);//調用數組升序的方法 console.log(number);//0.1,5,10,15 function arrDesc(a,b){ //實現數組降序的方法 if(a>b){ return -1; }else if(a<b){ return 1; }else{ return 0; } } number.sort(arrDesc);//調用數組降序的方法 console.log(number);//15,10,5,1,0 </script> </body> </html>
在這里我們定義了一個compare比較函數，當a>b的結果為整數時則為升序，當a>b的結果為負數時則為降序。
III.簡單對象自定義屬性排序
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>簡單對象自定義屬性排序</title> </head> <body> <script type="text/javascript"> var friuts=[ { name:'apple', price:18.5, count:10 }, { name:'pear', price:1.5, count:5, }, { name:'banana', price:20.5, count:20 }, ] console.log(JSON.stringify(friuts));//未排序前 //按價格升序排序 friuts.sort(function(x,y){ return x.price-y.price; }); console.log(JSON.stringify(friuts)); //按名稱排序 friuts.sort(function(x,y){ if(x.name>y.name){ return 1; }else if(x.name<y.name){ return -1; }else{ return 0; } }); console.log(JSON.stringify(friuts)); </script> </body> </html>
IV.通用的排序方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>通用的排序方法</title> </head> <body> <script type="text/javascript"> var friuts=[ { name:'apple', price:18.5, count:10 }, { name:'pear', price:1.5, count:5, }, { name:'banana', price:20.5, count:20 }, ] var sortExp=function(key,isAsc){ return function(x,y){ if(isNaN(key)){ if(x[key]>y[key]){ return 1*(isAsc?1:-1); }else if(x[key]<y[key]){ return -1*(isAsc?1:-1); }else{ return 0; } }else{ return (x[key]-y[key])*(isAsc?1:-1) } } } //價格升序 friuts.sort(sortExp('price',true)); console.log(JSON.stringify(friuts)); //價格降序 friuts.sort(sortExp('price',false)); console.log(JSON.stringify(friuts)); //名稱升序 friuts.sort(sortExp('name',true)); console.log(JSON.stringify(friuts)); //名稱降序 friuts.sort(sortExp('name',false)); console.log(JSON.stringify(friuts)); //數量升序 friuts.sort(sortExp('count',true)); console.log(JSON.stringify(friuts)); //數量降序 friuts.sort(sortExp('count',false)); console.log(JSON.stringify(friuts)); </script> </body> </html>
