JavaScript中按字符串属性值对对象数组进行排序
技术背景
在JavaScript开发中，我们经常会遇到需要对对象数组进行排序的场景。有时候，我们需要根据对象的某个字符串属性值对数组进行排序。然而，Array.prototype.sort() 方法默认只能对字符串和数字进行排序，对于对象数组，我们需要自定义比较函数来实现按字符串属性值排序。
实现步骤
1. 自定义比较函数
可以编写一个自定义的比较函数，该函数接受两个参数 a 和 b，分别代表数组中的两个元素。根据需要比较的字符串属性值的大小关系，返回 -1、0 或 1。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| function compare( a, b ) {
if ( a.last_nom < b.last_nom ){
return -1;
}
if ( a.last_nom > b.last_nom ){
return 1;
}
return 0;
}
var objs = [
{ first_nom: 'Laszlo', last_nom: 'Jamf' },
{ first_nom: 'Pig', last_nom: 'Bodine' },
{ first_nom: 'Pirate', last_nom: 'Prentice' }
];
objs.sort( compare );
|
2. 内联比较函数
也可以使用内联的箭头函数来简化代码：
1
| objs.sort((a,b) => (a.last_nom > b.last_nom) ? 1 : ((b.last_nom > a.last_nom) ? -1 : 0));
|
3. 使用 localeCompare 方法
localeCompare 方法可以更方便地进行字符串比较：
1
| objs.sort((a, b) => a.last_nom.localeCompare(b.last_nom));
|
4. 动态排序函数
可以创建一个动态排序函数，允许根据不同的属性进行排序：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| function dynamicSort(property) {
var sortOrder = 1;
if(property[0] === "-") {
sortOrder = -1;
property = property.substr(1);
}
return function (a,b) {
var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
return result * sortOrder;
}
}
var People = [
{Name: "Name", Surname: "Surname"},
{Name:"AAA", Surname:"ZZZ"},
{Name: "Name", Surname: "AAA"}
];
People.sort(dynamicSort("Name"));
People.sort(dynamicSort("Surname"));
People.sort(dynamicSort("-Surname"));
|
5. 多参数排序
可以创建一个多参数排序函数，允许根据多个属性进行排序：
1
2
3
4
5
6
7
8
9
10
11
12
13
| function dynamicSortMultiple() {
var props = arguments;
return function (obj1, obj2) {
var i = 0, result = 0, numberOfProperties = props.length;
while(result === 0 && i < numberOfProperties) {
result = dynamicSort(props[i])(obj1, obj2);
i++;
}
return result;
}
}
People.sort(dynamicSortMultiple("Name", "-Surname"));
|
核心代码
以下是几种常见的排序方式的核心代码：
自定义比较函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| function compare( a, b ) {
if ( a.last_nom < b.last_nom ){
return -1;
}
if ( a.last_nom > b.last_nom ){
return 1;
}
return 0;
}
var objs = [
{ first_nom: 'Laszlo', last_nom: 'Jamf' },
{ first_nom: 'Pig', last_nom: 'Bodine' },
{ first_nom: 'Pirate', last_nom: 'Prentice' }
];
objs.sort( compare );
|
内联箭头函数
1
2
3
4
5
6
7
| var objs = [
{ first_nom: 'Laszlo', last_nom: 'Jamf' },
{ first_nom: 'Pig', last_nom: 'Bodine' },
{ first_nom: 'Pirate', last_nom: 'Prentice' }
];
objs.sort((a,b) => (a.last_nom > b.last_nom) ? 1 : ((b.last_nom > a.last_nom) ? -1 : 0));
|
使用 localeCompare 方法
1
2
3
4
5
6
7
| var objs = [
{ first_nom: 'Laszlo', last_nom: 'Jamf' },
{ first_nom: 'Pig', last_nom: 'Bodine' },
{ first_nom: 'Pirate', last_nom: 'Prentice' }
];
objs.sort((a, b) => a.last_nom.localeCompare(b.last_nom));
|
动态排序函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| function dynamicSort(property) {
var sortOrder = 1;
if(property[0] === "-") {
sortOrder = -1;
property = property.substr(1);
}
return function (a,b) {
var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
return result * sortOrder;
}
}
var People = [
{Name: "Name", Surname: "Surname"},
{Name:"AAA", Surname:"ZZZ"},
{Name: "Name", Surname: "AAA"}
];
People.sort(dynamicSort("Name"));
People.sort(dynamicSort("Surname"));
People.sort(dynamicSort("-Surname"));
|
多参数排序函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| function dynamicSortMultiple() {
var props = arguments;
return function (obj1, obj2) {
var i = 0, result = 0, numberOfProperties = props.length;
while(result === 0 && i < numberOfProperties) {
result = dynamicSort(props[i])(obj1, obj2);
i++;
}
return result;
}
}
var People = [
{Name: "Name", Surname: "Surname"},
{Name:"AAA", Surname:"ZZZ"},
{Name: "Name", Surname: "AAA"}
];
People.sort(dynamicSortMultiple("Name", "-Surname"));
|
最佳实践
- 使用
localeCompare 方法：localeCompare 方法可以处理不同语言和字符集的字符串比较，是比较推荐的方法。 - 考虑大小写和重音符号：如果需要进行大小写不敏感的排序，可以在比较之前将字符串转换为小写或大写。如果需要处理重音符号，可以使用
normalize 方法进行规范化。 - 使用动态排序函数：当需要根据不同的属性进行排序时，使用动态排序函数可以提高代码的复用性。
常见问题
1. 比较函数返回值的含义
比较函数返回 -1 表示 a 应该排在 b 之前，返回 1 表示 a 应该排在 b 之后，返回 0 表示 a 和 b 的顺序不变。
2. 排序不稳定
JavaScript 的 Array.prototype.sort() 方法在不同的浏览器和环境中可能具有不同的排序稳定性。如果需要稳定的排序，可以使用第三方库或自定义排序算法。
3. 性能问题
对于大规模的数组排序，性能可能会成为一个问题。可以考虑使用更高效的排序算法或对数据进行预处理。