JavaScript 排序陣列

Created: October-14, 2018

在本教程中，你將學習如何在 JavaScript 中對陣列元素進行排序。

對陣列進行排序

使用陣列時，排序是一項常見任務。例如，如果要按字母順序顯示城市或縣名，則可以使用它。

JavaScript Array 物件具有按字母順序對陣列元素進行排序的內建 sort() 方法。以下示例演示了它的工作原理：

var fruits = ["Banana", "Orange", "Apple", "Papaya", "Mango"];
var sorted = fruits.sort();

alert(fruits); // Outputs: Apple,Banana,Mango,Orange,Papaya
alert(sorted); // Outputs: Apple,Banana,Mango,Orange,Papaya

反轉陣列

你可以使用 reverse() 方法來反轉陣列元素的順序。

此方法以一種方式反轉陣列，即第一個陣列元素成為最後一個，最後一個陣列元素成為第一個陣列元素。這是一個例子：

var counts = ["one", "two", "three", "four", "five"];
var reversed = counts.reverse(); 

alert(counts); // Outputs: five,four,three,two,one
alert(reversed); // Output: five,four,three,two,one

注意： sort() 和 reverse() 方法修改原始陣列，返回相同的陣列的引用，你可以在上面的例子中看得出。

排序數字陣列

將 sort() 方法應用於數值陣列（即包含數值的陣列）時，該方法可能會產生意外結果。例如：

var numbers = [5, 20, 10, 75, 50, 100];
numbers.sort(); // Sorts numbers array
alert(numbers); // Outputs: 10,100,20,5,50,75

如你所見，結果與我們的預期不同。之所以發生這種情況，是因為該 sort() 方法通過將數值陣列元素轉換為字串來對其進行排序（即 20 變為 20 ，100 變為 100 ，依此類推），並且因為字串 20 的第一個字元（即 2））在字串 100 的第一個字元（即 1）之後出現，這就是為什麼值 20 在 100 之後排序的原因。

要使用數值陣列修復此排序問題，你可以傳遞比較函式，如下所示：

var numbers = [5, 20, 10, 75, 50, 100];

// Sorting an array using compare function
numbers.sort(function(a, b) {
    return a - b;
});
alert(numbers); // Outputs: 5,10,20,50,75,100

如你所見，這次我們得到了正確的結果。讓我們看看它是如何工作的。

指定 compare 函式時，將根據 compare 函式的返回值對陣列元素進行排序。例如，比較 a 和 b 時：

如果 compare 函式返回的值小於 0，則 a 首先出現。
如果 compare 函式返回的值大於 0，則 b 首先出現。
如果 compare 函式返回 0， a 並且 b 相對於彼此保持不變，但是相對於所有其他元素排序。

因此，由於 5 - 20 = -15 小於 0，因此 5 首先出現，類似地 20 - 10 = 10 大於 0，因此 10 出現在 20 之前，同樣 20 - 75 = -55 小於 0，所以 20 出現在 75 之前，類似地 50 出現在 75 之前，依此類推。

查詢陣列中的最大值和最小值

你可以使用 apply() 方法結合 Math.max() 和 Math.min() 來找到陣列裡面的最大值和最小值，像這樣：

var numbers = [3, -7, 10, 8, 15, 2];

// Defining function to find maximum value
function findMax(array) {
    return Math.max.apply(null, array);
}

// Defining function to find minimum value
function findMin(array) {
    return Math.min.apply(null, array);
}

alert(findMax(numbers)); // Outputs: 15
alert(findMin(numbers)); // Outputs: -7

apply() 方法提供了一種方便的方法，將陣列值作為引數傳遞給以類似陣列的方式接受多個引數的函式，但不是陣列（例如此處的 Math.max() ， Math.min() 方法）。因此， Math.max.apply(null, numbers) 上面示例中的結果語句等同於 Math.max(3, -7, 10, 8, 15, 2) 。

排序物件陣列

sort() 方法還可用於使用 compare 函式對物件陣列進行排序。

以下示例將向你展示如何按屬性值對物件陣列進行排序：

var persons = [
    { name: "Harry", age: 14 },
    { name: "Ethan", age: 30 },
    { name: "Peter", age: 21 },
    { name: "Clark", age: 42 },
    { name: "Alice", age: 16 }
];

// Sort by age
persons.sort(function (a, b) {
    return a.age - b.age;
});

console.log(persons);

// Sort by name
persons.sort(function(a, b) {
    var x = a.name.toLowerCase(); // ignore upper and lowercase
    var y = b.name.toLowerCase(); // ignore upper and lowercase
    if(x < y) {
        return -1;
    }
    if(x > y) {
        return 1;
    }
    // names must be equal
    return 0;
});

console.log(persons);