如果您已經(jīng)了解 JavaScript 數(shù)組的基礎(chǔ)知識,那么是時候通過更高級的主題將您的技能提升到新的水平了。在本系列教程中,您將探索在 JavaScript 中使用數(shù)組進行編程的中級主題。
對數(shù)組進行排序是使用 JavaScript 編程時最常見的任務(wù)之一。因此,作為一名 JavaScript 程序員,學習如何正確對數(shù)組進行排序至關(guān)重要,因為您將在現(xiàn)實項目中經(jīng)常這樣做。錯誤的排序技術(shù)確實會降低您的應(yīng)用程序的速度!
過去,Web 開發(fā)人員必須使用 jquery 等第三方庫并編寫大量代碼才能對列表集合中的值進行排序。幸運的是,從那時起,JavaScript 已經(jīng)發(fā)生了巨大的發(fā)展。如今,您只需一行代碼即可對包含數(shù)千個值的 JavaScript 數(shù)組進行排序,而無需使用任何第三方庫。
在本文中,我將向您展示如何在 JavaScript 中對簡單和復雜的數(shù)組集合進行排序。我們將使用 JavaScript sort() 方法進行排序:
立即學習“Java免費學習筆記(深入)”;
在本教程結(jié)束時,您應(yīng)該徹底了解 JavaScript 的 sort() 方法的工作原理以及如何使用它對數(shù)字、字符串和對象的數(shù)組進行排序。
JavaScript sort() 方法
JavaScript sort() 方法是 JavaScript 中最有用和最常用的數(shù)組方法之一。它允許您快速輕松地按升序或降序?qū)?shù)據(jù)元素數(shù)組進行排序。
您可以使用該方法對數(shù)字、字符串、日期甚至對象的數(shù)組進行排序。 sort() 方法的工作原理是獲取元素數(shù)組并根據(jù)某些標準對它們進行排序。標準可以是函數(shù)、比較運算符或值數(shù)組。
對數(shù)字數(shù)組進行排序
使用 sort 方法對數(shù)字數(shù)組進行排序非常簡單:
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進行升序排序,這是默認的模式。
您還可以向后排序數(shù)字(即按降序排列)。為此,您需要創(chuàng)建以下自定義排序函數(shù):
function desc(a, b) { return b - a }
該函數(shù)接受兩個參數(shù)(a 和 b),它們代表要排序的兩個值。如果返回正數(shù),則 sort() 方法將理解 b 應(yīng)在 a 之前排序。如果它返回負數(shù),則 sort() 將理解 a 應(yīng)該位于 b 之前。如果 b > a,則該函數(shù)將返回正數(shù),這意味著如果 a 小于 b,則 b 將位于 a 之前。
console.log(numbers.sort(desc)) // output [99, 88, 83, 57, 21, 12, 3, 1]
接下來是如何對字符串數(shù)組進行排序。
在 Java 腳本中對字符串數(shù)組進行排序
對字符串值進行排序同樣簡單:
let names = ["Sam", "Koe", "Eke", "Victor", "Adam"] console.log(names.sort()) // output ["Adam", "Eke", "Koe", "Sam", "Victor"]
以下是按降序?qū)ο嗤址M行排序的函數(shù):
function descString(a, b) { return b.localeCompare(a); }
如果第二個名稱按字母順序排在第一個名稱之后,我們會從函數(shù)返回 1,這意味著第二個名稱將在排序數(shù)組中排在第一位。否則,我們返回 -1,如果兩者相等,則返回 0。
現(xiàn)在,如果您對 names 數(shù)組運行排序方法,并以 desc 作為其參數(shù),您會得到不同的輸出:
console.log(names.sort(descString)) // ["Victor", "Sam", "Koe", "Eke", "Adam"]
在 JavaScript 中對復雜對象數(shù)組進行排序
到目前為止,我們只對字符串和數(shù)字等簡單值進行排序。您還可以使用 sort() 方法對對象數(shù)組進行排序。讓我們在下面的部分中看看如何操作。
按名稱(字符串屬性)對對象進行排序
這里我們有一個 people 數(shù)組,其中包含多個 person 對象。每個對象由 id、name 和 dob 屬性組成:
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 屬性對此數(shù)組進行排序,我們必須創(chuàng)建一個自定義排序函數(shù)并將其傳遞給 sort 方法:
students.sort(byName)
這個 byName 自定義排序函數(shù)每次都會接受兩個對象,并比較它們的兩個名稱屬性以查看哪個更大(即按字母順序排列在前面):
function byName(a, b) { return a.name.localeCompare(b.name); }
現(xiàn)在,如果您再次運行代碼,您將得到以下結(jié)果:
[ {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 排序(數(shù)字屬性)
在前面的示例中,我們按名稱(字符串)進行排序。在此示例中,我們將按每個對象的 ID 屬性(數(shù)字)進行排序。
為此,我們可以使用以下函數(shù):
function byID(a, b) { return parseInt(a.id) - parseInt(b.id) }
在函數(shù)中,我們使用 parseInt() 來確保該值是一個數(shù)字,然后我們將兩個數(shù)字相減以獲得負值、正值或零值。使用此函數(shù),您可以按公共數(shù)字屬性對任何對象數(shù)組進行排序。
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'}, ] */
按日期排序
假設(shè)您想要構(gòu)建一個應(yīng)用程序,允許用戶從數(shù)據(jù)庫下載姓名列表,但您希望根據(jù)出生日期(從最年長到最年輕)按時間順序排列姓名.
此函數(shù)按年、月、日的時間順序?qū)Τ錾掌谶M行排序。
function bydate(a, b) { return new Date(a.dob).valueOf() - new Date(b.dob).valueOf() }
Date().valueOf() 調(diào)用返回每個日期的時間戳。然后,我們執(zhí)行與前面示例中相同的減法來確定順序。
演示:
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'} ] */
這種特殊方法在涉及日期順序的情況下非常方便,例如確定誰有資格獲得養(yǎng)老金或其他與年齡相關(guān)的福利的申請。
結(jié)論
總的來說,使用各種內(nèi)置方法時,在 JavaScript 中對元素進行排序非常簡單。無論您需要對數(shù)字、字符串、對象還是日期數(shù)組進行排序,都有一種方法可以輕松完成這項工作。借助這些方法,您可以快速輕松地對 JavaScript 應(yīng)用程序中的任何數(shù)據(jù)進行排序。