在 JavaScript 中按屬性對物件陣列進行排序
Aryan Tyagi
2023年10月12日
本文將討論如何根據物件的屬性值對物件陣列進行排序。
在 JavaScript 中，我們使用 sort() 函式對物件陣列進行排序。sort() 函式用於按字母順序而非數字順序對陣列的元素進行排序。要以相反的順序獲取專案，我們可以使用 reverse() 方法。
然而，傳統的 sort() 函式有時可能會落後於基於某些屬性比較物件陣列。因此，我們可以建立一個使用者定義的比較函式以與 sort() 函式一起使用。此方法比較陣列中專案的屬性。
下面的例子展示瞭如何編寫自己的比較函式。
let students = [
{fname: 'Rohan', lname: 'Dalal', age: 19},
{fname: 'Zain', lname: 'Ahmed', age: 17},
{fname: 'Anadi', lname: 'Malhotra', age: 19}
];
function compare_lname(a, b) {
if (a.lname.toLowerCase() < b.lname.toLowerCase()) {
return -1;
}
if (a.lname.toLowerCase() > b.lname.toLowerCase()) {
return 1;
}
return 0;
}
students.sort(compare_lname);
console.log(students)
輸出：
[
{ fname: 'Zain', lname: 'Ahmed', age: 17 },
{ fname: 'Rohan', lname: 'Dalal', age: 19 },
{ fname: 'Anadi', lname: 'Malhotra', age: 19 }
]
在上面的例子中，首先將 lname 轉換為小寫，然後我們根據字串比較來比較名稱。它根據物件的 lname 返回已排序的物件陣列。對於降序，我們可以用 reverse() 替換 sort() 函式。
如果我們正在處理字串，我們可以消除建立比較函式的需要，只需使用 localeCompare() 函式和 sort() 函式即可獲得所需的結果。
請參考下面的程式碼。
let students = [
{fname: 'Rohan', lname: 'Dalal', age: 19},
{fname: 'Zain', lname: 'Ahmed', age: 21},
{fname: 'Anadi', lname: 'Malhotra', age: 16}
];
students.sort((a, b) => a.lname.localeCompare(b.lname));
console.log(students);
輸出：
[
{ fname: 'Zain', lname: 'Ahmed', age: 21 },
{ fname: 'Rohan', lname: 'Dalal', age: 19 },
{ fname: 'Anadi', lname: 'Malhotra', age: 16 }
]
localeCompare() 僅適用於字串。我們不能將其用於數字。
為了獲得基於某些數值屬性的排序陣列，我們必須在 sort() 方法中提供一些比較函式，因為 sort 方法通常也不適用於數字。
請參考下面的程式碼。
let students = [
{fname: 'Rohan', lname: 'Dalal', age: 19},
{fname: 'Zain', lname: 'Ahmed', age: 21},
{fname: 'Anadi', lname: 'Malhotra', age: 16}
];
students.sort((a, b) => {
return a.age - b.age;
});
console.log(students);
上面的例子比較了物件的年齡並根據這個年齡對它們進行排序。compare 函式只有一行，因此它直接與 sort() 方法一起提供。要按降序獲取所有內容，請使用 reverse() 函式。
或者，我們也可以在比較函式中移動順序，以降序得到最終輸出。
例如，
let students = [
{fname: 'Rohan', lname: 'Dalal', age: 19},
{fname: 'Zain', lname: 'Ahmed', age: 21},
{fname: 'Anadi', lname: 'Malhotra', age: 16}
];
students.sort((a, b) => {
return b.age - a.age;
});
console.log(students);
輸出：
[
{ fname: 'Zain', lname: 'Ahmed', age: 21 },
{ fname: 'Rohan', lname: 'Dalal', age: 19 },
{ fname: 'Anadi', lname: 'Malhotra', age: 16 }
]