本文详解JavaScript中对对象数组按字母顺序排序的三种方案。首先介绍基础sort()方法及其参数与兼容性;其次讲解结合if条件判断实现自定义排序;重点演示利用localeCompare()处理字母及忽略标点符号的高级用法,最后介绍Intl.Collator()的性能优化方案。
本文提供三种实现方案:
1.if条件语句 + sort() 2.localeCompare() + sort() 3.Collator() + sort()
sort 方法使用说明
语法格式
array.sort(compareFunction)参数说明
| 参数 | 描述 |
|---|---|
| compareFunction | 可选。定义替代排序顺序的函数。该函数应返回负值、零值或正值,具体取决于参数,例如: function(a, b){ return a - b } sort() 方法比较两个值时,将值发送给比较函数,根据返的(负、零、正)值对值进行排序。 举例: 比较 40 和 100 时,sort() 方法调用比较函数(40,100)。 该函数计算 40-100,并返回 -60(负值)。 sort 函数会将 40 排序为小于 100 的值。 |
sort() 方法会修改原始数组。
浏览器兼容性
Chrome、IE、Edge、Firefox、Safari、Opera 等主流浏览器均支持 sort() 方法。
代码示例
数组排序演示
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var tzy = fruits.sort();
console.log(tzy);运行结果如下:

升序排序示例
var points = [66, 100, 3, 10, 250, 88, 77];
var tzy = points.sort((a, b)=> a - b);
console.log(tzy);运行结果如下:

降序排序示例
var points = [66, 100, 3, 10, 250, 88, 77];
var tzy = points.sort((a, b)=> b - a);
console.log(tzy);运行结果如下:

if 条件判断结合 sort() 方法
var list = [
{ FirsName: "Aaron", LastName: "Baker" },
{ FirstName: "Bert", LastName: "Green" },
{ FirstName: "Larry", LastName: "White" },
{ FirstName: "Victor", LastName: "Fox" },
]
function sortArray(x, y) {
if (x.LastName < y.LastName) { return -1; }
if (x.LastName > y.LastName) { return 1; }
return 0;
}
var tzy = list.sort(sortArray);
console.log(tzy);运行结果如下:

localeCompare() 结合 sort() 方法
var list = [
{ FirsName: "Aaron", LastName: "Baker" },
{ FirstName: "Bert", LastName: "Green" },
{ FirstName: "Larry", LastName: "White" },
{ FirstName: "Victor", LastName: "Fox" },
]
function sortArray(x, y) {
return x.LastName.localeCompare(y.LastName)
}
var tzy = list.sort(sortArray);
console.log(tzy);运行结果如下:

若对象目标键包含标点符号,可调用localeCompare()函数并在比较时忽略标点。
var list = [
{ FirsName: "Aaron", LastName: ",Baker" },
{ FirstName: "Bert", LastName: "Green" },
{ FirstName: "Larry", LastName: ",White" },
{ FirstName: "Victor", LastName: "Fox" },
]
function SortArray(x, y){
return x.LastName.localeCompare(y.LastName, 'fr', {ignorePunctuation: true});
}
var tzy = list.sort(sortArray);
console.log(tzy);运行结果如下:

此外,可将 localeCompare() 函数的灵敏度设为 base 以忽略特殊字符,具体操作如下。
x.LastName.localeCompare(y.LastName, 'en', { sensitivity: 'base' });点击 传送门 获取 localeCompare() 函数的更多详细信息。
Collator() 结合 sort() 方法
var list = [
{ FirsName: "Aaron", LastName: "Baker" },
{ FirstName: "Bert", LastName: "Green" },
{ FirstName: "Larry", LastName: "White" },
{ FirstName: "Victor", LastName: "Fox" },
]
function SortArray(x, y){
return collator.compare(x.LastName, y.LastName);
}
var tzy = list.sort(sortArray);
console.log(tzy);运行结果如下:

至此,关于 JavaScript 对象数组按字母顺序排序的方法详解介绍完毕,更多相关 JavaScript 对象数组排序内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!