[干货分享] JavaScript 好用的数组对象排序方法

在日常工作中，我们经常需要对数组对象进行排序。尤其是在处理数据可视化需求中，根据不同的数值维度进行排序是必不可少的。本文将介绍一些简单而又实用的方法，帮助你实现对数组对象的某几个 key 进行排序。

简单的排序方法

在最开始，我们先了解最基本的排序方法：sort()。这是 JavaScript 原生的一个函数，可以通过传入一个比较函数来实现对数组对象的排序。比较函数接收两个参数 a 和 b，如果 a 应该排在 b 的前面就返回负数，如果 a 应该排在 b 的后面就返回正数，如果 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 }
]
*/

这里的比较函数 (a, b) => a.age - b.age 可以理解为“按照 age 升序排列”。如果想要按照降序排列，只需要将函数改为 (a, b) => b.age - a.age 即可。

实现多重排序

如果要按照多个属性进行排序，我们可以在比较函数中添加更多的逻辑。例如，假设我们想先按照 age 排序，然后按照 name 排序。可以这样实现：

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

这里的比较函数先判断两个元素的 age 属性是否相同，如果不同就按照 age 排序；如果相同，再按照 name 排序。注意到这里用了 localCompare() 方法来对字符串进行排序。

具有通用性的排序方法

上面的方法虽然简单易懂，但是当我们需要对多个不同的数组进行排序时，每次都写一个比较函数会显得很麻烦。这时候，我们可以使用一个具有通用性的排序方法 sortBy()。

sortBy() 方法接收两个参数：要排序的数组，以及一个包含排序规则的数组。排序规则数组中的每个元素表示一个排序规则，它本身就是一个由属性名和排序方向组成的数组。

下面是一个简单的实现：

/**
 * 对数组对象的指定属性进行排序
 * @param {Array} arr 数组对象
 * @param {Array} rules 排序规则，每个元素都是形如 ['key', 'asc'] 或者 ['key', 'desc'] 的数组
 */
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;
  });
}

使用方法也很简单。假设我们有一个数组对象，每个对象都包含 name、age 和 score 三个属性。我们想先按照 score 降序排列，然后按照 age 升序排列。只需要这样调用：

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() 方法可以轻松地实现多重排序，而且相对于每次写比较函数更加方便。不仅如此，还可以扩展到更复杂的排序需求中。例如，如果我们想按照年龄在 20 到 30 岁之间的学生先排列，然后再按照分数排序，只需要传入这样的规则：

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

这里使用了一个匿名函数 (student) => student.age >= 20 && student.age <= 30，用于判断当前元素是否符合条件。如果符合条件就返回 true，否则返回 false。这个函数可以根据具体需求进行修改。

使用 Lodash 库

最后介绍一下 Lodash 库，它是一个 JavaScript 实用工具库，提供了很多方便的数组操作方法，包括排序。如果你不介意引入一个外部库的话，Lodash 是一个非常好用的选择。

假设我们还是要对上面的学生数组进行排序。使用 Lodash 可以这样实现：

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() 方法接收三个参数：要排序的数组，以及一个包含排序属性的数组和一个包含排序方向的数组。属性数组中的元素表示按照哪些属性进行排序，而方向数组中的元素表示每个属性对应的排序方向。

如果要对多重属性进行不同的排序方向，可以这样写：

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

这里的第一个元素是一个函数，用于判断当前元素是否符合条件。如果符合条件就返回 true，否则返回 false。

总的来说，Lodash 提供了非常方便的数组排序方法，通过引入 Lodash 可以大大简化我们的排序操作。

结论

实现对数组对象进行排序并不是很复杂，但是有几个需要注意的点：

• 如果只需要对单个属性进行排序，可以使用 JavaScript 原生的 sort() 方法；
• 如果需要对多个属性进行排序，可以在比较函数中添加更多逻辑或者使用一个通用的排序方法；
• 如果对多个数组进行排序，可以考虑使用 Lodash 库。

希望本文对你有所帮助！