JavaScript數組的簡單排序

前面的部落格分兩章分别講解了數組對象的基本屬性和方法，以及數組疊代方法的使用。今天我們再來講一講數組的排序問題。

1.數組的sort()方法

說到數組的排序，大家可能第一反應是前面學過一個數組排序的方法sort(),但是使用這個方法時要注意，sort()本身時可以傳參數的，如果不傳參數，那我們對數組項進行排序時就會按照ASCII字元順序排序(也可以了解為字典的排序方式)。比如：

var arr=["a","A",10,1,20,2];
    console.log(arr.sort());//[1,10,2,20,"A","a"]
           

看到上面的代碼時，可能和大家想的不太一樣，但是對照下圖ASCII碼表不難發現，在表中能看到數字排在大寫字母前面，大寫字母又排在小寫字母前面。是以列印的結果會是代碼所示。

補充一下：其實，sort()方法會調用每個數組項的toString()方法，得到字元串，然後再對字元串進行排序。

2.數組的sort()方法添加參數

上面的操作中我們雖說也對數組進行了排序，但是并沒有得到我們想要的結果。這個時候sort()的參數就起到作用了。當然這個參數是一個函數，我們可以稱之為比較函數。

比較函數可以接收兩個參數，如果第一參數小于第二個參數，則傳回一個負數，相等則傳回0,如果第一個參數大于第二個參數則傳回正數：

var arr3 = [10, 20, 1, 15, 2, 33, 4];

    function shengxu(a, b) {
        if (a < b) {
            return -1
        } else if (a > b) {
            return 1
        } else {
            return 0
        }
    }

    console.log(arr3.sort(shengxu));//[1, 2, 4, 10, 15, 20, 33]
           

使用上面的方法便可以得到我們想要的升序的排序方式。

如果想要降序排列，隻需要修改比較的條件即可：

var arr3 = [10, 20, 1, 15, 2, 33, 4];

    function jiangxu(a, b) {
        if (a > b) {
            return -1
        } else if (a < b) {
            return 1
        } else {
            return 0
        }
    }

    console.log(arr3.sort(jiangxu));// [33, 20, 15, 10, 4, 2, 1]
           

此時，可以将數組項進行降序排列。

3.比較函數的簡化

上面的兩個比較函數可以進行簡化，如下：

var arr3 = [10, 20, 1, 15, 2, 33, 4];
    // 升序
    function shengxu2(a, b) {
        return a - b;
    }
    // 降序
    function jiangxu2(a, b) {
        return b - a;
    }
    console.log(arr3.sort(shengxu2));//[1, 2, 4, 10, 15, 20, 33]
    console.log(arr3.sort(jiangxu2));// [33, 20, 15, 10, 4, 2, 1]
           

注意：使用sort()方法傳入參數比較函數之後也隻是可以對數字進行排序，當數組項中出現字元時，會将字元轉化為數字進行比較，字元不能轉化為數字，是以數字和字元還是會按照ASCII排序進行比較。但是此時大寫字母會排在小寫字母之後。

var arr = ["a","A",10, 20, 1, 15, 2, 33, 4];
    function shengxu(a, b) {
        return a - b;
    }
    console.log(arr.sort(shengxu));//["a", "A", 1, 2, 4, 10, 15, 20, 33]
           

視訊講解連結：

https://www.bilibili.com/video/BV1jC4y1p7oW/