[[354152]]

如果需要按特定順序?qū)?duì)象數(shù)組進(jìn)行排序，我們很有可能會(huì)直接找個(gè) JS 庫(kù)來(lái)用。其實(shí)大可不必，JS 原生中的 Array.sort就能直接一些復(fù)雜又漂亮的排序。

本文中，將介紹一些 Array.sort 的常規(guī)排序和一些騷操作。

基本數(shù)組排序

默認(rèn)情況下，Array.sort函數(shù)將數(shù)組中需要排序的每個(gè)元素轉(zhuǎn)換為字符串，并按 Unicode 順序?qū)ζ溥M(jìn)行比較。

const foo = [9, 1, 4, 'zebroid', 'afterdeck']; 
foo.sort(); // returns [ 1, 4, 9, 'afterdeck', 'zebroid' ] 
 
const bar = [5, 18, 32, new Set, { user: 'Eleanor Roosevelt' }]; 
bar.sort(); // returns [ 18, 32, 5, { user: 'Eleanor Roosevelt' }, Set {} ] 

你可能會(huì)好奇為啥32排在5之前。發(fā)生這種情況是因?yàn)閿?shù)組中的每個(gè)元素都首先轉(zhuǎn)換為字符串，并且按照Unicode順序，"32"在"5"之前。

需要注意的是，Array.sort會(huì)更改原數(shù)組。

const baz = ['My cat ate my homework', 37, 9, 5, 17]; 
baz.sort(); // baz數(shù)組被修改 
console.log(baz); // shows [ 17, 37, 5, 9, 'My cat ate my homework' ] 

為避免這種情況，我們可以創(chuàng)建要排序的數(shù)組的新實(shí)例，然后在新的數(shù)組上進(jìn)行修改。這里可以使用 Array.slice它返回是一個(gè)新的數(shù)組實(shí)例。

// 創(chuàng)建baz數(shù)組的新實(shí)例并對(duì)其進(jìn)行排序 
const sortedBaz = baz.slice().sort(); 

我們還可以使用 ES6 中的展開(kāi)運(yùn)算符來(lái)做：

const sortedBaz = [...baz].sort();  

在兩種情況下，輸出是相同的：

console.log(baz); // ['My cat ate my homework', 37, 9, 5, 17]; 
console.log(sortedBaz); // [ 17, 37, 5, 9, 'My cat ate my homework' ] 

單獨(dú)使用Array.sort不能對(duì)對(duì)象數(shù)組進(jìn)行排序。但不必?fù)?dān)心，sort 的還提供一個(gè)參數(shù)，該參數(shù)使數(shù)組元素根據(jù)compare函數(shù)的返回值進(jìn)行排序。

使用比較函數(shù)進(jìn)行排序

假設(shè)foo和bar是compare函數(shù)要比較的兩個(gè)元素，compare函數(shù)的返回值設(shè)置如下：

1. 小于0：foo在bar之前
2. 大于0 ：bar在foo之前
3. 等于0：foo和bar彼此保持不變。

來(lái)看一個(gè)簡(jiǎn)單的示例：

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 

我們可以稍微重構(gòu)一下:

function compare(a, b) { 
  return a - b; 
} 

使用在使用箭頭函數(shù)進(jìn)行重構(gòu)：

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

如何對(duì)對(duì)象數(shù)組進(jìn)行排序

現(xiàn)在，我們來(lái)按一下對(duì)對(duì)象數(shù)組的排序。假設(shè)有下面的 singers 數(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 }, 
]; 

我們可以使用 compare函數(shù)，然后根據(jù) singers 中的 band 字段來(lái)進(jì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); 
 
/* returns [ 
  { 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 } 
] */ 

如果要讓上面的順序相反，可以這么做：

function compare(a, b) { 
  ... 
 
  // 乘以-1來(lái)反轉(zhuǎn)返回值 
  return comparison * -1; 
} 

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

最后，排序函數(shù)更具動(dòng)態(tài)性。

我們創(chuàng)建一個(gè)排序函數(shù)，可以使用該函數(shù)對(duì)一組對(duì)象進(jìn)行排序，這些對(duì)象的值可以是字符串或數(shù)字。該函數(shù)有兩個(gè)參數(shù)-我們要排序的鍵和返回結(jié)果的順序(即升序或降序)：

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 }, 
]; 
 
function compareValues(key, order = 'asc') { 
  return function innerSort(a, b) { 
    if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) { 
      // 該屬性在其中一個(gè)對(duì)象上不存在 
      return 0; 
    } 
 
    const varA = (typeof a[key] === 'string') 
      ? a[key].toUpperCase() : a[key]; 
    const varB = (typeof b[key] === 'string') 
      ? b[key].toUpperCase() : b[key]; 
 
    let comparison = 0; 
    if (varA > varB) { 
      comparison = 1; 
    } else if (varA < varB) { 
      comparison = -1; 
    } 
    return ( 
      (order === 'desc') ? (comparison * -1) : comparison 
    ); 
  }; 
} 

使用：

//數(shù)組按`band`排序，默認(rèn)為升序 
singers.sort(compareValues('band')); 
 
// 數(shù)組按 `band` 降序排序 
singers.sort(compareValues('band', 'desc')); 
 
// 數(shù)組按 `name` 升序排序 
singers.sort(compareValues('name')); 
 
// 數(shù) 組born 降序排序 
singers.sort(compareValues('born', 'desc')); 

在上面的代碼中，hasOwnProperty方法用于檢查指定的屬性是否在每個(gè)對(duì)象上定義，且沒(méi)有通過(guò)原型鏈繼承。如果沒(méi)有在兩個(gè)對(duì)象上定義，函數(shù)返回0，排序順序保持不變(即對(duì)象之間保持不變)。

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

最后，你可以根據(jù)自己需求來(lái)調(diào)整上面的函數(shù)。

String.prototype.localeCompare()

在上面的示例中，我們希望能夠?qū)?duì)象數(shù)組進(jìn)行排序，其值可以是字符串或數(shù)字。但是，如果我們知道處理值是字符串的對(duì)象，則可以使用 JS 的localeCompare方法

比較兩個(gè)字符串，并返回下列值中的一個(gè)：

• 如果 字符串 在 字母 表中 應(yīng)該 排在 字符串 參數(shù) 之前， 則 返回 一個(gè) 負(fù)數(shù);
• 如果 字符串 等于 字符串 參數(shù)， 則 返回 0;
• 字符串 在 字母 表中 應(yīng)該 排在 字符串 參數(shù) 之后， 則 返回 一個(gè) 正數(shù);

['bjork', 'Bjork', 'Björk'].sort(); 
// [ 'Bjork', 'Björk', 'bjork' ] 
 
['bjork', 'Bjork', 'Björk'].sort((a, b) => a.localeCompare(b)); 
//  [ 'bjork', 'Bjork', 'Björk' ] 

根據(jù)compareValues函數(shù)，我們可以這么寫(xiě)：

function compareValues(key, order = 'asc') { 
  return function innerSort(a, b) { 
    if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) return 0; 
    const comparison = a[key].localeCompare(b[key]); 
 
    return ( 
      (order === 'desc') ? (comparison * -1) : comparison 
    ); 
  }; 
} 

總結(jié)

上面就是使用普通JS 函數(shù)對(duì)對(duì)象數(shù)組排序的簡(jiǎn)短的介紹。盡管許多庫(kù)都提供了這種動(dòng)態(tài)排序能力，但我們自己實(shí)現(xiàn)這個(gè)方法其實(shí)也不信。另外，了解幕后發(fā)生了對(duì)我們來(lái)說(shuō)并沒(méi)有壞處。

今天就跟大家分享到這里了，感謝大家的觀看，我們下期再見(jiàn)。

作者：James Hibbard 譯者：前端小智 來(lái)源：sitepoint

原文：https://www.sitepoint.com/sort-an-array-of-objects-in-javascript/

本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。