前言
排序是計算機內經常進行的一種操作，其目的是將一組“無序”的記錄序列調整爲“有序”的記錄序列，當然排序也是算法中的一種，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>
