本文深入解析JavaScript中数组对象的多种排序策略。从原生sort()函数的比较逻辑出发，演示单属性与多属性排序的实现；随后介绍如何封装通用排序函数以简化复杂规则；最后结合Lodash库的orderBy方法，提供高效且易用的第三方解决方案，帮助开发者应对不同场景下的数据排序需求。
在日常开发中，对数组对象进行排序是常见需求，特别是在数据可视化场景中，依据不同数值维度进行排序至关重要。本文将介绍几种简单且实用的方法，协助读者实现对数组对象中特定键值（key）的排序处理。
简单的排序方法
首先介绍最基础的排序方式：sort()。这是JavaScript内置的函数，通过传入一个比较函数即可完成数组对象的排序。该比较函数接收两个参数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提供了便捷的数组排序方法，引入该库可显著简化排序操作。
结论
实现数组对象的排序并不复杂，但需注意以下几点：
- 若仅需对单个属性进行排序，可使用JavaScript原生的
sort()方法； - 若需对多个属性进行排序，可在比较函数中增加更多逻辑，或使用通用的排序方法；
- 若需对多个数组进行排序，可考虑使用Lodash库。
到此这篇关于JavaScript中好用的数组对象排序方法分享的文章就介绍到这了,更多相关JavaScript数组对象排序内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！