js裡關於Array.prototype.sort分析及日常使用技巧

介紹

對陣列內容進行排序，可傳入比較器定義排序規則

使用

arr.sort(compare)

• compare比較器可傳可不傳
• 不傳將根據內容開頭的第一個字元的Unicode指標順序進行排序

var fruit = ['cherries', 'apples', 'bananas'];
fruit.sort();
// ['apples', 'bananas', 'cherries']

var scores = [1, 10, 21, 2];
scores.sort();
// [1, 10, 2, 21]
// 注意10在2之前,
// 因為在 Unicode 指標順序中10的首個字元1在2前面

var things = ['word', 'Word', '1 Word', '2 Words'];
things.sort(); 
// ['1 Word', '2 Words', 'Word', 'word']
// 在Unicode中, 數字在大寫字母之前,
// 大寫字母在小寫字母之前.

比較器講解

我們可通過傳入函式（比較器）來自定義sort的排序。
比較器主要多次對比相鄰的2個數來決定他們的先後順序， 這點與氣泡排序很相似。

var list = [0,2,4,3,5,7];
var compare = function(a,b) {
//該函式將多次被執行直到陣列的最後一位
    if(a>b) return -1; //如果負數 那麼a位於b前面
    else if(a<b) return 1; //如果正數 那麼a位於b後面
    else return 0 //返回0位置不變
}
list.sort(compare) //[7, 5, 4, 3, 2, 0]

• 沒錯 很快你會得出結論 他們的順序是根據 返回的負(a在b前) 或 正(a在b後) 來決定的

升級版

var compare = function(a,b) {
    return b-a //總結成了公式
}
list.sort(compare)//[7, 5, 4, 3, 2, 0]

日常使用的技巧

因為比較器的存在 讓我們處理起資料結構更加遊刃有餘

• 場景1 對返回的data根據他們的名稱首字元進行內容升序排序 如果isTop為true則該項置頂

 var list  = [{id:1,isTop:false,name:"ben"},
    {id:2,isTop:false,name:"july"},
    {id:3,isTop:true,name:"summer"},
     {id:4,isTop:false,name:"jaky"}]

 var compare = function(a, b) {
    if(a.isTop) return -1;
    if(b.isTop) return 1;    
    var aName = a.name.toLowerCase();
    var bName = b.name.toLowerCase();
    return aName > bName? 1 : aName < bName ? -1 : 0
}
list.sort(compare)
/*[{"id":3,"isTop":true,"name":"summer"},
{"id":1,"isTop":false,"name":"benc"},
{"id":4,"isTop":false,"name":"jaky"},
{"id":2,"isTop":false,"name":"july"}]*/

• 場景2 打亂陣列內容所對應索引值

  var list = [1,3,5,7,9];
  var compare = function() {
    return 0.5 - Math.random()
  }
  list.sort(compare) //[5, 3, 9, 7, 1];