JavaScript中怎么對對象數組進行排序

這期內容當中小編將會給大家帶來有關JavaScript中怎么對對象數組進行排序，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

基本數組排序

默認情況下，Array.sort函數將數組中需要排序的每個元素轉換為字符串，并按 Unicode 順序對其進行比較。

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

你可能會好奇為啥32排在5之前。發生這種情況是因為數組中的每個元素都首先轉換為字符串，并且按照Unicode順序，"32"在"5"之前。

需要注意的是，Array.sort會更改原數組。

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

為避免這種情況，我們可以創建要排序的數組的新實例，然后在新的數組上進行修改。這里可以使用 Array.slice它返回是一個新的數組實例。

// 創建baz數組的新實例并對其進行排序 const sortedBaz = baz.slice().sort();

我們還可以使用 ES6 中的展開運算符來做：

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' ]

單獨使用Array.sort不能對對象數組進行排序。但不必擔心，sort  的還提供一個參數，該參數使數組元素根據compare函數的返回值進行排序。

使用比較函數進行排序

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

1. 鴻蒙官方戰略合作共建——HarmonyOS技術社區

2. 小于0：foo在bar之前

3. 大于0 ：bar在foo之前

4. 等于0：foo和bar彼此保持不變。

來看一個簡單的示例：

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 compare(a, b) {   return a - b; }

使用在使用箭頭函數進行重構：

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

如何對對象數組進行排序

現在，我們來按一下對對象數組的排序。假設有下面的 singers 數組：

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函數，然后根據 singers 中的 band 字段來進行排序。

function compare(a, b) {   // 使用 toUpperCase() 忽略字符大小寫   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來反轉返回值   return comparison * -1; }

創建一個動態排序函數

最后，排序函數更具動態性。

我們創建一個排序函數，可以使用該函數對一組對象進行排序，這些對象的值可以是字符串或數字。該函數有兩個參數-我們要排序的鍵和返回結果的順序(即升序或降序)：

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)) {       // 該屬性在其中一個對象上不存在       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     );   }; }

使用：

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

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

typeof運算符還用于檢查屬性值的數據類型，這使函數可以確定對數組進行排序的正確方法。如果指定屬性的值是一個字符串，則使用toUpperCase方法將其所有字符都轉換為大寫，因此排序時將忽略字符大小寫

最后，你可以根據自己需求來調整上面的函數。

String.prototype.localeCompare()

在上面的示例中，我們希望能夠對對象數組進行排序，其值可以是字符串或數字。但是，如果我們知道處理值是字符串的對象，則可以使用 JS  的localeCompare方法

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

• 如果 字符串 在 字母 表中 應該 排在 字符串 參數 之前， 則 返回 一個 負數;

• 如果 字符串 等于 字符串 參數， 則 返回 0;

• 字符串 在 字母 表中 應該 排在 字符串 參數 之后， 則 返回 一個 正數;

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

根據compareValues函數，我們可以這么寫：

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     );   }; }

上述就是小編為大家分享的JavaScript中怎么對對象數組進行排序了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。