1. 程式人生 > >Array 重排序詳解

Array 重排序詳解

重排序需求

當我們拿到一組資料之後,很大可能是用Array型別存放的。那麼我們在使用的過程中,很可能需要對資料內的元素進行重新排序,讓頁面顯示出我們需要的順序,或者讓資料按照我們需要的順序排列。

重排序方法

1. reverse()
2. sort()

reverse()

說明:該函式反轉陣列的順序

var values = [1, 2, 3, 4, 5];
values.reverse();
alert(values); //[5,4,3,2,1]

sort()

說明:該函式預設升序排列陣列項 -- 即最小值在前,最大值在後。
排序轉換邏輯過程:為了實現排序, sort()  方法會呼叫每個陣列項的 toString()  轉型方法,然後比較得到的字串,以確定如何排序。即使陣列中的每一項都是數值, sort()  方法比較的也是字串。

var values = [0, 1, 5, 10, 15];
values.sort();
alert(values); //[0,1,10,15,5]

可以看到 10 位於 5 之前,這是因為它排序的時候是按字串排序,那麼元素將按照 ASCII 字元順序進行排序,字串比較的
時候是按照順序逐個比較大小。(當然這不是我們想要的)

sort() 可以帶引數,引數為函式,這個引數是比較函式

比較函式接收兩個引數, 如果第一個引數應該位於第二個之前則返回一個負數,如果兩個引數相等則返回 0 ,如果第一個引數應該位於第二個之後則返回一個正數以下就是一個簡單的比較函式:

function compare(value1, value2) {
    if (value1 < value2) {
        return -1;
    } else if (value1 > value2) {
        return 1;
    } else {
        return 0;
    }
}

那麼這樣就可以看到預期的結果

var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); //[0,1,5,10,15]

利用 sort 進行陣列物件排序(如果陣列項是物件,我們需要根據陣列項的某個屬性對陣列進行排序)

原理相同

var arr = [{name: "zlw", age: 24}, {name: "wlz", age: 25}];
var compare = function (obj1, obj2) {
    var val1 = obj1.name;
    var val2 = obj2.name;
    if (val1 < val2) {
        return -1;
    } else if (val1 > val2) {
        return 1;
    } else {
        return 0;
    }
}
console.log(arr.sort(compare));

輸出結果為

[Object { name="wlz", age=25}, Object {name="zlw", age=24}] 

可以看到陣列已經按照 name  屬性進行了排序。
如果我希望按照 age 排序

var compare = function (prop) {
    return function (obj1, obj2) {
        var val1 = obj1[prop];
        var val2 = obj2[prop];
        if (val1 < val2) {
            return -1;
        } else if (val1 > val2) {
            return 1;
        } else {
            return 0;
        }
    }
}

如果想按照 age  進行排序, arr.sort(compare("age"))  即可。

這裡還有一個問題,如果陣列是 var arr = [{name: "zlw", age:"24"}, {name: "wlz", age: "5"}]; 那麼將會是字串比較,即會出錯。

var compare = function (prop) {
    return function (obj1, obj2) {
        var val1 = obj1[prop];
        var val2 = obj2[prop];
        if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
            val1 = Number(val1);
            val2 = Number(val2);
        }
        if (val1 < val2) {
            return -1;
        } else if (val1 > val2) {
            return 1;
        } else {
            return 0;
        }
    }
}

擴充套件內容

說明:不同的引擎程式碼底層實現原理不同
以 V8 引擎為例
V8  引擎 sort  函式只給出了兩種排序 InsertionSort  和QuickSort ,數量小於 10 的陣列使用 InsertionSort ,比10 大的陣列則使用 QuickSort 。