首頁 > CMS教程 > &#&按 > JavaScript:將組織值排序

JavaScript:將組織值排序

王林
發布: 2023-08-30 20:17:02
原創
727 人瀏覽過

JavaScript:將組織值排序

如果您已經了解 JavaScript 陣列的基礎知識,那麼是時候透過更高級的主題將您的技能提升到新的水平了。在本系列教程中,您將探索在 JavaScript 中使用陣列進行程式設計的中級主題。

對陣列進行排序是使用 JavaScript 程式設計時最常見的任務之一。因此,作為 JavaScript 程式設計師,學習如何正確對陣列進行排序至關重要,因為您將在現實專案中經常這樣做。錯誤的排序技術確實會降低您的應用程式的速度!

過去,Web 開發人員必須使用 jQuery 等第三方函式庫並編寫大量程式碼才能對清單集合中的值進行排序。幸運的是,從那時起,JavaScript 已經發生了巨大的發展。如今,您只需一行程式碼即可對包含數千個值的 JavaScript 陣列進行排序,而無需使用任何第三方程式庫。

在本文中,我將向您展示如何在 JavaScript 中對簡單和複雜的陣列集合進行排序。我們將使用 JavaScript sort() 方法進行排序:

  • 數字數組
  • 字串陣列
  • 複雜物件數組
    • 按名稱(字串)
    • 按 ID(號碼)
    • 按出生日期(日期)

在本教學結束時,您應該徹底了解 JavaScript 的 sort() 方法的工作原理以及如何使用它對數字、字串和物件的陣列進行排序。

JavaScript sort() 方法

JavaScript sort() 方法是 JavaScript 中最有用且最常用的陣列方法之一。它允許您快速輕鬆地按升序或降序對資料元素數組進行排序。

您可以使用該方法對數字、字串、日期甚至物件的陣列進行排序。 sort() 方法的工作原理是取得元素陣列並根據某些標準對它們進行排序。標準可以是函數、比較運算子或值數組。

對數字數組進行排序

使用 sort 方法對數字陣列進行排序非常簡單:

let numbers = [12, 88, 57, 99, 03, 01, 83, 21]
console.log(numbers.sort())

// output [1, 12, 21, 3, 57, 83, 88, 99]
登入後複製

在上面的程式碼中,sort()方法對numbers進行升序排序,這是預設的模式。

您也可以向後排序數字(即按降序排列)。為此,您需要建立以下自訂排序函數:

function desc(a, b) {
 return b - a
}
登入後複製

此函數接受兩個參數(ab),它們代表要排序的兩個值。如果傳回正數,則 sort() 方法將理解 b 應在 a 之前排序。如果它傳回負數,則 sort() 將理解 a 應該位於 b 之前。如果b > a,則函數將傳回正數,這表示如果a 小於b,則b 將位於a 之前。

console.log(numbers.sort(desc))
// output [99, 88, 83, 57, 21, 12, 3, 1]
登入後複製

接下來是如何對字串陣列進行排序。

在 Java 腳本中對字串陣列進行排序

對字串值進行排序同樣簡單:

let names = ["Sam", "Koe", "Eke", "Victor", "Adam"]
console.log(names.sort())

// output ["Adam", "Eke", "Koe", "Sam", "Victor"]
登入後複製

以下是將相同字串依降序排序的函數:

function descString(a, b) {
    return b.localeCompare(a);
}
登入後複製

如果第二個名稱按字母順序排在第一個名稱之後,我們會從函數傳回 1,這表示第二個名稱將在排序數組中排在第一位。否則,我們傳回 -1,如果兩者相等,則傳回 0

現在,如果您對 names 陣列執行排序方法,並以 desc 作為其參數,您會得到不同的輸出:

console.log(names.sort(descString))

// ["Victor", "Sam", "Koe", "Eke", "Adam"]
登入後複製

在 JavaScript 中對複雜物件陣列進行排序

到目前為止,我們只對字串和數字等簡單值進行排序。您也可以使用 sort() 方法對物件陣列進行排序。讓我們在下面的部分中看看如何操作。

依名稱(字串屬性)對物件進行排序

這裡我們有一個 people 數組,其中包含多個 person 物件。每個物件由 idnamedob 屬性組成:

const people = [
  {id: 15, name: "Blessing", dob: '1999-04-09'},
  {id: 17, name: "Aladdin", dob: '1989-06-21'},
  {id: 54, name: "Mark", dob: '1985-01-08'},
  {id: 29, name: "John", dob: '1992-11-09'},
  {id: 15, name: "Prince", dob: '2001-09-09'}
]
登入後複製

要透過 name 屬性對此陣列進行排序,我們必須建立一個自訂排序函數並將其傳遞給 sort 方法:

students.sort(byName)
登入後複製

這個 byName 自訂排序函數每次都會接受兩個對象,並比較它們的兩個名稱屬性以查看哪個更大(即按字母順序排列在前面):

function byName(a, b) {
    return a.name.localeCompare(b.name);
}
登入後複製

現在,如果您再次執行程式碼,您將得到以下結果:

[
  {id: 17, name: "Aladdin", dob: '1989-06-21'},
  {id: 15, name: "Blessing", dob: '1999-04-09'},
  {id: 29, name: "John", dob: '1992-11-09'},
  {id: 54, name: "Mark", dob: '1985-01-08'},
  {id: 32, name: "Prince", dob: '2001-09-09'}
]
登入後複製

按 ID 排序(数字属性)

在前面的示例中,我们按名称(字符串)进行排序。在此示例中,我们将按每个对象的 ID 属性(数字)进行排序。

为此,我们可以使用以下函数:

function byID(a, b) {
  return parseInt(a.id) - parseInt(b.id)
}
登入後複製

在函数中,我们使用 parseInt() 来确保该值是一个数字,然后我们将两个数字相减以获得负值、正值或零值。使用此函数,您可以按公共数字属性对任何对象数组进行排序。

console.log(students.sort(byID))
/*
[
  {id: 15, name: "Blessing", dob: '1999-04-09'},
  {id: 17, name: "Aladdin", dob: '1989-06-21'},
  {id: 29, name: "John", dob: '1992-11-09'},
  {id: 32, name: "Prince", dob: '2001-09-09'}
  {id: 54, name: "Mark", dob: '1985-01-08'},
]
*/
登入後複製

按日期排序

假设您想要构建一个应用程序,允许用户从数据库下载姓名列表,但您希望根据出生日期(从最年长到最年轻)按时间顺序排列姓名.

此函数按年、月、日的时间顺序对出生日期进行排序。

function byDate(a, b) {
   return new Date(a.dob).valueOf() - new Date(b.dob).valueOf()
}
登入後複製

Date().valueOf() 调用返回每个日期的时间戳。然后,我们执行与前面示例中相同的减法来确定顺序。

演示:

console.log(students.sort(byDate))

/*
[
  {id: 54, name: "Mark", dob: '1985-01-08'},
  {id: 17, name: "Aladdin", dob: '1989-06-21'},
  {id: 29, name: "John", dob: '1992-11-09'},
  {id: 15, name: "Blessing", dob: '1999-04-09'},
  {id: 32, name: "Prince", dob: '2001-09-09'}
]
*/
登入後複製

这种特殊方法在涉及日期顺序的情况下非常方便,例如确定谁有资格获得养老金或其他与年龄相关的福利的申请。

结论

总的来说,使用各种内置方法时,在 JavaScript 中对元素进行排序非常简单。无论您需要对数字、字符串、对象还是日期数组进行排序,都有一种方法可以轻松完成这项工作。借助这些方法,您可以快速轻松地对 JavaScript 应用程序中的任何数据进行排序。

以上是JavaScript:將組織值排序的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板