JavaScript中好用的數(shù)組對象排序方法分享

更新時間：2023年05月09日 10:50:00 作者：??????????????????

在日常工作中，我們經(jīng)常需要對數(shù)組對象進行排序，尤其是在處理數(shù)據(jù)可視化需求中。本文將介紹一些簡單而又實用的方法，幫助你實現(xiàn)對數(shù)組對象的某幾個 key 進行排序

在日常工作中，我們經(jīng)常需要對數(shù)組對象進行排序。尤其是在處理數(shù)據(jù)可視化需求中，根據(jù)不同的數(shù)值維度進行排序是必不可少的。本文將介紹一些簡單而又實用的方法，幫助你實現(xiàn)對數(shù)組對象的某幾個 key 進行排序。

簡單的排序方法

在最開始，我們先了解最基本的排序方法：sort()。這是 JavaScript 原生的一個函數(shù)，可以通過傳入一個比較函數(shù)來實現(xiàn)對數(shù)組對象的排序。比較函數(shù)接收兩個參數(shù) a 和 b，如果 a 應該排在 b 的前面就返回負數(shù)，如果 a 應該排在 b 的后面就返回正數(shù)，如果 a 和 b 的位置無所謂就返回 0。

// 按照 age 屬性進行排序
const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 20 },
  { name: 'Charlie', age: 30 }
];

people.sort((a, b) => a.age - b.age);

console.log(people);
/*
Output: [ 
    { name: 'Bob', age: 20 }, 
    { name: 'Alice', age: 25 }, 
    { name: 'Charlie', age: 30 }
]
*/

這里的比較函數(shù) (a, b) => a.age - b.age 可以理解為“按照 age 升序排列”。如果想要按照降序排列，只需要將函數(shù)改為 (a, b) => b.age - a.age 即可。

實現(xiàn)多重排序

如果要按照多個屬性進行排序，我們可以在比較函數(shù)中添加更多的邏輯。例如，假設我們想先按照 age 排序，然后按照 name 排序?？梢赃@樣實現(xiàn)：

// 按照 age 和 name 屬性進行排序
const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 20 },
  { name: 'Charlie', age: 30 },
  { name: 'Bob', age: 15 },
  { name: 'Alice', age: 20 }
];

people.sort((a, b) => {
  if (a.age !== b.age) {
    return a.age - b.age;
  } else {
    return a.name.localeCompare(b.name);
  }
});

console.log(people);
/*
Output: [
  { name: 'Bob', age: 15 },
  { name: 'Alice', age: 20 },
  { name: 'Bob', age: 20 },
  { name: 'Alice', age: 25 },
  { name: 'Charlie', age: 30 }
]
*/

這里的比較函數(shù)先判斷兩個元素的 age 屬性是否相同，如果不同就按照 age 排序；如果相同，再按照 name 排序。注意到這里用了 localCompare() 方法來對字符串進行排序。

具有通用性的排序方法

上面的方法雖然簡單易懂，但是當我們需要對多個不同的數(shù)組進行排序時，每次都寫一個比較函數(shù)會顯得很麻煩。這時候，我們可以使用一個具有通用性的排序方法 sortBy()。

sortBy() 方法接收兩個參數(shù)：要排序的數(shù)組，以及一個包含排序規(guī)則的數(shù)組。排序規(guī)則數(shù)組中的每個元素表示一個排序規(guī)則，它本身就是一個由屬性名和排序方向組成的數(shù)組。

下面是一個簡單的實現(xiàn)：

/**
 * 對數(shù)組對象的指定屬性進行排序
 * @param {Array} arr 數(shù)組對象
 * @param {Array} rules 排序規(guī)則，每個元素都是形如 ['key', 'asc'] 或者 ['key', 'desc'] 的數(shù)組
 */
function sortBy(arr, rules) {
  return arr.sort((a, b) => {
    for (let i = 0; i < rules.length; i++) {
      const [key, direction] = rules[i];
      const order = direction === 'desc' ? -1 : 1;
      if (a[key] < b[key]) {
        return -1 * order;
      }
      if (a[key] > b[key]) {
        return 1 * order;
      }
    }
    return 0;
  });
}

使用方法也很簡單。假設我們有一個數(shù)組對象，每個對象都包含 name、age 和 score 三個屬性。我們想先按照 score 降序排列，然后按照 age 升序排列。只需要這樣調(diào)用：

const students = [
  { name: 'Alice', age: 20, score: 90 },
  { name: 'Bob', age: 25, score: 85 },
  { name: 'Charlie', age: 22, score: 95 },
  { name: 'David', age: 25, score: 85 }
];
const result = sortBy(students, [
  ['score', 'desc'],
  ['age', 'asc']
]);
console.log(result);
/*
Output: [
  { name: 'Charlie', age: 22, score: 95 },
  { name: 'Bob', age: 25, score: 85 },
  { name: 'David', age: 25, score: 85 },
  { name: 'Alice', age: 20, score: 90 }
]
*/

sortBy() 方法可以輕松地實現(xiàn)多重排序，而且相對于每次寫比較函數(shù)更加方便。不僅如此，還可以擴展到更復雜的排序需求中。例如，如果我們想按照年齡在 20 到 30 歲之間的學生先排列，然后再按照分數(shù)排序，只需要傳入這樣的規(guī)則：

const result = sortBy(students, [
  [(student) => student.age >= 20 && student.age <= 30, 'asc'],
  ['score', 'desc']
]);
console.log(result);
/*
Output: [
  { name: 'Alice', age: 20, score: 90 },
  { name: 'Charlie', age: 22, score: 95 },
  { name: 'Bob', age: 25, score: 85 },
  { name: 'David', age: 25, score: 85 }
]
*/

這里使用了一個匿名函數(shù) (student) => student.age >= 20 && student.age <= 30，用于判斷當前元素是否符合條件。如果符合條件就返回 true，否則返回 false。這個函數(shù)可以根據(jù)具體需求進行修改。

使用 Lodash 庫

最后介紹一下 Lodash 庫，它是一個 JavaScript 實用工具庫，提供了很多方便的數(shù)組操作方法，包括排序。如果你不介意引入一個外部庫的話，Lodash 是一個非常好用的選擇。

假設我們還是要對上面的學生數(shù)組進行排序。使用 Lodash 可以這樣實現(xiàn)：

import _ from 'lodash';

const sortedStudents = _.orderBy(students, ['score', 'age'], ['desc', 'asc']);

console.log(sortedStudents);
/*
Output: [
  { name: 'Charlie', age: 22, score: 95 },
  { name: 'Bob', age: 25, score: 85 },
  { name: 'David', age: 25, score: 85 },
  { name: 'Alice', age: 20, score: 90 }
]
*/

這里的 orderBy() 方法接收三個參數(shù)：要排序的數(shù)組，以及一個包含排序?qū)傩缘臄?shù)組和一個包含排序方向的數(shù)組。屬性數(shù)組中的元素表示按照哪些屬性進行排序，而方向數(shù)組中的元素表示每個屬性對應的排序方向。

如果要對多重屬性進行不同的排序方向，可以這樣寫：

const sortedStudents = _.orderBy(students, [
  (student) => student.age >= 20 && student.age <= 30,
  'score'
], ['asc', 'desc']);

console.log(sortedStudents);
/*
Output: [
  { name: 'Alice', age: 20, score: 90 },
  { name: 'Charlie', age: 22, score:95 },
  { name: 'David', age: 25, score: 85 },
  { name: 'Bob', age: 25, score: 85 }
]
*/

這里的第一個元素是一個函數(shù)，用于判斷當前元素是否符合條件。如果符合條件就返回 true，否則返回 false。

總的來說，Lodash 提供了非常方便的數(shù)組排序方法，通過引入 Lodash 可以大大簡化我們的排序操作。