JavaScript将对象数组按字母顺序排序的方法详解

更新时间：2023年07月10日 09:27:16 作者：唐志远

这篇文章主要介绍了JavaScript如何将对象数组按字母顺序排序，本文介绍了三种解决方案，if条件语句 + sort()，localeCompare() + sort()，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 的值。

参数

描述

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);

输出如下：

如果对象目标 key 中存在标点符号，在这种情况下，我们可以使用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 对象数组排序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

在uni-app中踩过的坑及解决
这篇文章主要介绍了在uni-app中踩过的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
js实现常用排序算法
这篇文章主要为大家详细介绍了js实现常用排序算法的代码，感兴趣的小伙伴们可以参考一下
2016-08-08
深入理解JavaScript和TypeScript中的class
class 声明创建一个基于原型继承的具有给定名称的新类，下面这篇文章主要给大家介绍了关于JavaScript和TypeScript中class的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
2018-04-04
制作微信小程序的小白简单入门教程
这篇文章主要介绍了制作微信小程序的小白简单入门教程。本文就是小程序学习笔记，整理成教程的形式，希望对于初学者有用。需要学会的主要知识点都会讲到，目标是你读完这个教程，就能学会怎么写小程序。
2022-12-12
js 原生判断内容区域是否滚动到底部的实例代码
下面笔者就为大家分享一篇js 原生判断内容区域是否滚动到底部的实例代码，具有很好的参考价值，希望对大家有所帮助
2017-11-11
Bootstrap缩略图与警告框学习使用
这篇文章主要为大家详细介绍了Bootstrap缩略图与警告框学习使用的相关资料，希望通过这篇文章和大家更多的去学习Bootstrap缩略图与警告框，从中得到收获
2017-02-02
JavaScript几种形式的树结构菜单
今天我主要讲3种不同展示的JavaScript树结构菜单，分别是悬浮层树(Tree)、右键菜单树(ContextMenu)和节点树(TreeMenu)，目前都支持无限级层次。
2010-05-05
微信小程序获取微信运动步数的实例代码
本篇文章主要介绍了微信小程序微信运动步数的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
微信小程序实现简单计算器
这篇文章主要为大家详细介绍了微信小程序写简单计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
微信小程序实现日历效果
这篇文章主要为大家详细介绍了微信小程序实现日历效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-12-12