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