JavaScript原生Array.sort方法也能輕松搞定對(duì)象數(shù)組排序！本文將演示如何使用Array.sort方法對(duì)包含字符串、數(shù)字和日期的對(duì)象數(shù)組進(jìn)行排序，并提供處理大小寫(xiě)敏感性、數(shù)組復(fù)制以及常用庫(kù)的實(shí)用技巧。

核心要點(diǎn)

• JavaScript的原生Array.sort方法可用于排序?qū)ο髷?shù)組，利用比較函數(shù)定義字符串、數(shù)字、日期和其他屬性的排序邏輯。
• JavaScript中的比較函數(shù)返回一個(gè)數(shù)字來(lái)確定排序順序。如果整數(shù)小于0，則第一個(gè)元素出現(xiàn)在第二個(gè)元素之前；如果大于0，則第二個(gè)元素出現(xiàn)在第一個(gè)元素之前；如果正好為0，則保持原始順序。
• 可以創(chuàng)建一個(gè)動(dòng)態(tài)排序函數(shù)，該函數(shù)可以使用字符串或數(shù)字值對(duì)對(duì)象數(shù)組進(jìn)行排序。該函數(shù)可以根據(jù)指定的鍵設(shè)置升序或降序排序。
• JavaScript的Array.sort方法會(huì)修改其排序的原始數(shù)組。為避免這種情況，可以使用Array.slice方法或擴(kuò)展運(yùn)算符創(chuàng)建一個(gè)新的數(shù)組實(shí)例并進(jìn)行排序。

基礎(chǔ)數(shù)組排序（以及為什么它不起作用）

默認(rèn)情況下，JavaScript Array.sort方法會(huì)將需要排序的數(shù)組中的每個(gè)元素轉(zhuǎn)換為字符串，并按Unicode代碼點(diǎn)順序進(jìn)行比較。

const foo = [9, 1, 4, 'zebroid', 'afterdeck'];
foo.sort(); // 返回 [ 1, 4, 9, 'afterdeck', 'zebroid' ]

const bar = [5, 18, 32, new Set, { user: 'Eleanor Roosevelt' }];
bar.sort(); // 返回 [ 18, 32, 5, { user: 'Eleanor Roosevelt' }, Set {} ]

你可能會(huì)好奇為什么32在5之前？看似不合理，對(duì)吧？其實(shí)不然。這是因?yàn)閿?shù)組中的每個(gè)元素首先被轉(zhuǎn)換為字符串，而“32”在Unicode順序中位于“5”之前。

僅使用Array.sort無(wú)法有效地對(duì)對(duì)象數(shù)組進(jìn)行排序。幸運(yùn)的是，sort方法接受一個(gè)可選的compareFunction參數(shù)，我們可以用它來(lái)排序?qū)ο髷?shù)組。

如何在JavaScript中排序?qū)ο髷?shù)組

要排序?qū)ο髷?shù)組，請(qǐng)使用帶有比較函數(shù)的sort()方法。比較函數(shù)應(yīng)用規(guī)則，根據(jù)我們自定義的邏輯對(duì)數(shù)組進(jìn)行排序。它們?cè)试S我們根據(jù)字符串、整數(shù)、日期或任何其他自定義屬性對(duì)對(duì)象數(shù)組進(jìn)行排序。我們稍后將在本文中介紹比較函數(shù)的工作原理。

在本演示中，我們將使用一個(gè)歌手?jǐn)?shù)組，并按其樂(lè)隊(duì)名稱(chēng)的字母順序?qū)ζ溥M(jìn)行排序：

const singers = [
  { name: 'Steven Tyler', band: 'Aerosmith', born: 1948 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
];

以下比較函數(shù)比較每個(gè)樂(lè)隊(duì)的（大寫(xiě)）名稱(chēng)：

function compare(a, b) {
  // 使用 toUpperCase() 忽略字符大小寫(xiě)
  const bandA = a.band.toUpperCase();
  const bandB = b.band.toUpperCase();

  let comparison = 0;
  if (bandA > bandB) {
    comparison = 1;
  } else if (bandA < bandB) {
    comparison = -1;
  }
  return comparison;
}

singers.sort(compare);

/* 返回 [
  { name: 'Steven Tyler', band: 'Aerosmith',  born: 1948 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 }
] */

要反轉(zhuǎn)排序順序，您可以反轉(zhuǎn)比較函數(shù)的返回值：

const foo = [9, 1, 4, 'zebroid', 'afterdeck'];
foo.sort(); // 返回 [ 1, 4, 9, 'afterdeck', 'zebroid' ]

const bar = [5, 18, 32, new Set, { user: 'Eleanor Roosevelt' }];
bar.sort(); // 返回 [ 18, 32, 5, { user: 'Eleanor Roosevelt' }, Set {} ]

比較函數(shù)的工作原理

比較函數(shù)返回一個(gè)數(shù)字，該數(shù)字用于通過(guò)比較其兩個(gè)輸入（a和b）來(lái)確定排序順序。簡(jiǎn)單來(lái)說(shuō)，如果整數(shù)小于0，則a出現(xiàn)在b之前；如果大于0，則b出現(xiàn)在a之前；如果正好為0，則保持原始順序。但是你如何確定這個(gè)數(shù)字取決于你。

讓我們來(lái)看一個(gè)簡(jiǎn)單的數(shù)字?jǐn)?shù)組示例：

const singers = [
  { name: 'Steven Tyler', band: 'Aerosmith', born: 1948 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
];

我們可以對(duì)其進(jìn)行一些重構(gòu)，因?yàn)閷減去a也會(huì)給我們返回值。此比較函數(shù)將數(shù)字?jǐn)?shù)組從小到大排序：

function compare(a, b) {
  // 使用 toUpperCase() 忽略字符大小寫(xiě)
  const bandA = a.band.toUpperCase();
  const bandB = b.band.toUpperCase();

  let comparison = 0;
  if (bandA > bandB) {
    comparison = 1;
  } else if (bandA < bandB) {
    comparison = -1;
  }
  return comparison;
}

singers.sort(compare);

/* 返回 [
  { name: 'Steven Tyler', band: 'Aerosmith',  born: 1948 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 }
] */

它也可以表示為箭頭函數(shù)，而無(wú)需在其他地方定義比較函數(shù)：

function compare(a, b) {
  // ...
  // 通過(guò)乘以 -1 反轉(zhuǎn)返回值
  return comparison * -1;
}

如果你不熟悉箭頭函數(shù)，可以在這里閱讀更多關(guān)于它們的信息：JavaScript中的箭頭函數(shù)。

如你所見(jiàn)，比較函數(shù)可以用多種方式編寫(xiě)，sort()方法將按指示執(zhí)行。

創(chuàng)建動(dòng)態(tài)排序函數(shù)

讓我們完成我們之前的示例，使其更具動(dòng)態(tài)性。讓我們創(chuàng)建一個(gè)排序函數(shù)，你可以使用它來(lái)排序?qū)ο髷?shù)組，其值是字符串或數(shù)字。此函數(shù)有兩個(gè)參數(shù)——我們要排序的鍵以及結(jié)果的順序（即升序或降序）：

const nums = [79, 48, 12, 4];

function compare(a, b) {
  if (a > b) return 1;
  if (b > a) return -1;

  return 0;
}

nums.sort(compare);
// => 4, 12, 48, 79

以下是如何使用它：

function compareNums(a, b) {
  return a - b;
}
nums.sort(compareNums)

在上面的代碼中，hasOwnProperty方法用于檢查指定的屬性是否在每個(gè)對(duì)象上定義，并且沒(méi)有通過(guò)原型鏈繼承。如果它沒(méi)有在兩個(gè)對(duì)象上定義，則函數(shù)返回0，這會(huì)導(dǎo)致排序順序保持不變（即對(duì)象相對(duì)于彼此保持不變）。

typeof運(yùn)算符還用于檢查屬性值的類(lèi)型。這允許函數(shù)確定對(duì)數(shù)組進(jìn)行排序的正確方法。例如，如果指定屬性的值是字符串，則使用toUpperCase方法將所有字符轉(zhuǎn)換為大寫(xiě)，因此在排序時(shí)會(huì)忽略字符大小寫(xiě)。

你可以調(diào)整上述函數(shù)以適應(yīng)其他數(shù)據(jù)類(lèi)型，以及你的腳本可能需要的任何其他需求。

流行的數(shù)組排序庫(kù)

你可能沒(méi)有時(shí)間或耐心在原生JavaScript中創(chuàng)建你自己的排序函數(shù)。時(shí)間就是金錢(qián)，代碼需要時(shí)間。幸運(yùn)的是，有各種各樣的庫(kù)可以滿(mǎn)足你所有的數(shù)組排序需求。以下是一些包含排序函數(shù)的輔助庫(kù)的簡(jiǎn)短列表……沒(méi)有特別的順序;)

• array-sort
• underscore.js
• sugarjs
• lodash

快速提示：按日期排序?qū)ο髷?shù)組

要按日期字符串對(duì)對(duì)象數(shù)組進(jìn)行排序，你只需提供一個(gè)比較函數(shù)，該函數(shù)首先解析日期字符串，然后將它們相互減去：

nums.sort((a, b) => a - b);

快速提示：不修改數(shù)組進(jìn)行排序

與許多其他JavaScript數(shù)組函數(shù)不同，Array.sort是會(huì)改變（修改）其排序的數(shù)組而不是返回新數(shù)組的方法之一。為避免這種情況，你可以創(chuàng)建一個(gè)要排序的數(shù)組的新實(shí)例并對(duì)其進(jìn)行修改。這可以使用數(shù)組方法或擴(kuò)展語(yǔ)法來(lái)創(chuàng)建數(shù)組副本。

const foo = [9, 1, 4, 'zebroid', 'afterdeck'];
foo.sort(); // 返回 [ 1, 4, 9, 'afterdeck', 'zebroid' ]

const bar = [5, 18, 32, new Set, { user: 'Eleanor Roosevelt' }];
bar.sort(); // 返回 [ 18, 32, 5, { user: 'Eleanor Roosevelt' }, Set {} ]

使用Array.slice創(chuàng)建數(shù)組副本：

const singers = [
  { name: 'Steven Tyler', band: 'Aerosmith', born: 1948 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
];

或者，你可以使用擴(kuò)展運(yùn)算符獲得相同的效果：

function compare(a, b) {
  // 使用 toUpperCase() 忽略字符大小寫(xiě)
  const bandA = a.band.toUpperCase();
  const bandB = b.band.toUpperCase();

  let comparison = 0;
  if (bandA > bandB) {
    comparison = 1;
  } else if (bandA < bandB) {
    comparison = -1;
  }
  return comparison;
}

singers.sort(compare);

/* 返回 [
  { name: 'Steven Tyler', band: 'Aerosmith',  born: 1948 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 }
] */

在這兩種情況下，輸出都是相同的，并且可以在排序任何對(duì)象數(shù)組之前使用。

function compare(a, b) {
  // ...
  // 通過(guò)乘以 -1 反轉(zhuǎn)返回值
  return comparison * -1;
}

快速提示：不區(qū)分大小寫(xiě)的方式按字符串排序數(shù)組

在我們之前的示例中，我們希望排序?qū)ο髷?shù)組，其值是字符串或數(shù)字。但是，如果你知道你只會(huì)處理其值為字符串的對(duì)象，則可以使用JavaScript的localeCompare方法來(lái)整理代碼。

此方法返回一個(gè)數(shù)字，該數(shù)字指示字符串在排序順序中是位于給定字符串之前、之后還是與之相同。它允許對(duì)數(shù)組進(jìn)行不區(qū)分大小寫(xiě)的排序：

const nums = [79, 48, 12, 4];

function compare(a, b) {
  if (a > b) return 1;
  if (b > a) return -1;

  return 0;
}

nums.sort(compare);
// => 4, 12, 48, 79

就我們的compareValues函數(shù)而言，這意味著我們可以這樣寫(xiě)：

function compareNums(a, b) {
  return a - b;
}
nums.sort(compareNums)

你可以在MDN上閱讀更多關(guān)于localeCompare的信息。

結(jié)論

就是這樣——關(guān)于使用原生JavaScript排序?qū)ο髷?shù)組的簡(jiǎn)短介紹。盡管許多庫(kù)提供了這種動(dòng)態(tài)排序功能，但正如所示，自己實(shí)現(xiàn)此功能并不難。此外，了解幕后發(fā)生的事情也很有益。

為了構(gòu)建對(duì)原生JavaScript基礎(chǔ)的更全面的理解，我們推薦JavaScript：從新手到忍者。從頭開(kāi)始學(xué)習(xí)JavaScript，包括ES6，并通過(guò)一系列項(xiàng)目來(lái)實(shí)踐你的新知識(shí)。

關(guān)于如何在JavaScript中排序?qū)ο髷?shù)組的常見(jiàn)問(wèn)題解答

你可以在JavaScript中排序?qū)ο髷?shù)組嗎？

是的。JavaScript提供了內(nèi)置方法來(lái)幫助排序數(shù)組元素。

如何在JavaScript中排序?qū)ο髷?shù)組？

你可以使用Array.prototype.sort()方法并提供自定義比較函數(shù)來(lái)對(duì)JavaScript中的對(duì)象數(shù)組進(jìn)行排序。比較函數(shù)應(yīng)該比較每個(gè)對(duì)象的相關(guān)屬性。

如何按鍵對(duì)JavaScript中的對(duì)象數(shù)組進(jìn)行排序？

你可以通過(guò)向比較函數(shù)提供鍵來(lái)動(dòng)態(tài)地根據(jù)不同的鍵對(duì)對(duì)象數(shù)組進(jìn)行排序。這允許你按各種屬性進(jìn)行排序。要按JavaScript中特定鍵（屬性）對(duì)對(duì)象數(shù)組進(jìn)行排序，你可以使用Array.prototype.sort()方法以及自定義比較函數(shù)，該函數(shù)比較每個(gè)對(duì)象的所需鍵的值。

如何動(dòng)態(tài)地對(duì)JavaScript中的對(duì)象數(shù)組進(jìn)行排序？

要根據(jù)運(yùn)行時(shí)確定的鍵（屬性）動(dòng)態(tài)地對(duì)JavaScript中的對(duì)象數(shù)組進(jìn)行排序，你可以創(chuàng)建一個(gè)函數(shù)，該函數(shù)接受數(shù)組和鍵作為參數(shù)。然后，此函數(shù)可以使用Array.prototype.sort()方法以及自定義比較函數(shù)來(lái)訪問(wèn)用于排序的動(dòng)態(tài)提供的鍵。

是否有任何庫(kù)可以簡(jiǎn)化對(duì)象數(shù)組的排序？是的，像Lodash和Underscore.js這樣的庫(kù)提供了用于排序?qū)ο髷?shù)組的實(shí)用程序函數(shù)，并具有附加功能和便利性。但是，JavaScript的內(nèi)置sort()方法通常足以滿(mǎn)足基本的排序需求。

按對(duì)象鍵排序是否區(qū)分大小寫(xiě)？是的，默認(rèn)情況下，按對(duì)象鍵排序區(qū)分大小寫(xiě)。你可以使用localeCompare()方法執(zhí)行不區(qū)分大小寫(xiě)的排序。

以上是用sort（）方法在JavaScript中對(duì)對(duì)象進(jìn)行排序的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！