JS Array.prototype.sort()方法的進階用法(解決那些因ASCII碼順序導致的亂序問題)

Array.prototype.sort()方法幾乎是算法必會的。我們會遇到各種各樣的排序問題,記得之前學過很底層的一些排序方法,需要敲很多代碼,現在只需要弄懂Array原型中給我們提供的sort()方法就可以愉快的進行排序了。

1. 基礎用法

sort()方法對數組成員進行排序,默認是按照字典順序(ASCII碼值)排序。數值會被先轉成字符串,再按照字典順序進行比較,排序后,原數組將被改變。

['d', 'c', 'b', 'a'].sort()
// ['a', 'b', 'c', 'd']

[4, 3, 2, 1].sort()
// [1, 2, 3, 4]

[11, 101].sort()
// [101, 11]

個位數的數值按照默認sort()排序可以正確達到升序的目的,一旦存在更多位數的數值,排序結果就不是我們想要的了,比如第三組的101就排在了11的前邊。

2. 進階用法

sort()方法也可以接受一個比較器函數作為參數,來自定義排序的規(guī)則。

  • 參數:比較器函數(必須要有返回值,推薦返回Number類型)
  • 返回值:重新排序后的數組
  • 原數組:改變

比較器函數需要接收兩個形參用來確定順序。

2.1數值的升序,降序排列

使用默認的sort()方法無法真正達到對數值的排序,可以傳入一個簡單的比較器函數來搞定,也算是一個小技巧~

var arr = [12,15,2,345,64];
arr.sort( ( a , b ) => a - b );
console.log("升序:",arr);

arr.sort( ( a , b ) => b - a );
console.log("降序:",arr);

//OUTPUT
//升序: [ 2, 12, 15, 64, 345 ]
//降序: [ 345, 64, 15, 12, 2 ]

2.2 不區(qū)分大小寫的字母排序

當數組元素均為大小寫不同的英文字母時,按照sort()默認的字典順序(ASCII碼值)會出現大寫在前,小寫在后的順序。如何進行不區(qū)分大小寫的正確排序呢 ?

var arr = ['Z','e','V','I','n'];
console.log(arr.sort());

//OUTPUT
[ 'I', 'V', 'Z', 'e', 'n' ]

不區(qū)分大小寫就需要我們在比較器函數中多寫一步全大寫(小寫)的轉換過程,然后再按值排序。

var arr = ['Z','e','V','I','n'];
arr.sort(function(a, b){
    var x = a.toLowerCase(), y = b.toLowerCase();
    return x < y ? -1 : x > y ? 1 : 0;
});
console.log(arr);

//OUTPUT
//[ 'e', 'I', 'n', 'V', 'Z' ]

2.3 自定義條件排序

當數組元素為多屬性的對象時,我們可能需要根據不同的屬性來具體排序,比如以下數組中,我們想按照年齡降序排列:

var arr = [{
    name:"code",age:19,grade:98
},{
    name:"zevin",age:12,grade:94
},{
    name:"j",age:15,grade:91
}];

arr.sort(function(a,b){
    if(a.age > b.age){
        return 1;
    }else{
        return -1;
    };
});
console.log(arr);

//OUTPUT
/*
[
  { name: 'zevin', age: 12, grade: 94 },
  { name: 'j', age: 15, grade: 91 },
  { name: 'code', age: 19, grade: 98 }
]
*/

這樣寫是可以完成年齡降序的排序需求。

摘自【JavaScript筆記 · 特殊篇】Array.prototype.sort()方法的進階實例(數值升序,不區(qū)分大小寫字母升序,自定義條件排序)

?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容