快捷導(dǎo)航

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

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

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

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

簡(jiǎn)單的排序方法

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

// 按照 age 屬性進(jìn)行排序
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 即可。

實(shí)現(xiàn)多重排序

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

// 按照 age 和 name 屬性進(jìn)行排序
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ù)先判斷兩個(gè)元素的 age 屬性是否相同，如果不同就按照 age 排序；如果相同，再按照 name 排序。注意到這里用了 localCompare() 方法來對(duì)字符串進(jìn)行排序。

具有通用性的排序方法

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

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

下面是一個(gè)簡(jiǎn)單的實(shí)現(xiàn)：

/**
 * 對(duì)數(shù)組對(duì)象的指定屬性進(jìn)行排序
 * @param {Array} arr 數(shù)組對(duì)象
 * @param {Array} rules 排序規(guī)則，每個(gè)元素都是形如 ['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;
  });
}

使用方法也很簡(jiǎn)單。假設(shè)我們有一個(gè)數(shù)組對(duì)象，每個(gè)對(duì)象都包含 name、age 和 score 三個(gè)屬性。我們想先按照 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() 方法可以輕松地實(shí)現(xiàn)多重排序，而且相對(duì)于每次寫比較函數(shù)更加方便。不僅如此，還可以擴(kuò)展到更復(fù)雜的排序需求中。例如，如果我們想按照年齡在 20 到 30 歲之間的學(xué)生先排列，然后再按照分?jǐn)?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 }
]
*/

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

使用 Lodash 庫(kù)

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

假設(shè)我們還是要對(duì)上面的學(xué)生數(shù)組進(jìn)行排序。使用 Lodash 可以這樣實(shí)現(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() 方法接收三個(gè)參數(shù)：要排序的數(shù)組，以及一個(gè)包含排序?qū)傩缘臄?shù)組和一個(gè)包含排序方向的數(shù)組。屬性數(shù)組中的元素表示按照哪些屬性進(jìn)行排序，而方向數(shù)組中的元素表示每個(gè)屬性對(duì)應(yīng)的排序方向。

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

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 }
]
*/

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

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

結(jié)論

實(shí)現(xiàn)對(duì)數(shù)組對(duì)象進(jìn)行排序并不是很復(fù)雜，但是有幾個(gè)需要注意的點(diǎn)：

如果只需要對(duì)單個(gè)屬性進(jìn)行排序，可以使用 JavaScript 原生的 sort() 方法；
如果需要對(duì)多個(gè)屬性進(jìn)行排序，可以在比較函數(shù)中添加更多邏輯或者使用一個(gè)通用的排序方法；
如果對(duì)多個(gè)數(shù)組進(jìn)行排序，可以考慮使用 Lodash 庫(kù)。

到此這篇關(guān)于JavaScript中好用的數(shù)組對(duì)象排序方法分享的文章就介紹到這了,更多相關(guān)JavaScript數(shù)組對(duì)象排序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: