在 JavaScript 中按屬性對物件陣列進行排序

Aryan Tyagi 2021年10月2日
在 JavaScript 中按屬性對物件陣列進行排序

本文將討論如何根據物件的屬性值對物件陣列進行排序。

在 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 }
]

相關文章 - JavaScript Array