JavaScript 将对象数组按字母顺序排序

news2024/11/18 9:30:26

原文链接:JavaScript 将对象数组按字母顺序排序

image.png

这里给出三种解决方案:

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

输出如下:

image.png

按升序排序

var points = [66, 100, 3, 10, 250, 88, 77];
var tzy = points.sort((a, b)=> a - b);
console.log(tzy);

输出如下:

image.png

按降序排序

var points = [66, 100, 3, 10, 250, 88, 77];
var tzy = points.sort((a, b)=> b - a);
console.log(tzy);

输出如下:

image.png

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

输出如下:

image.png

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

输出如下:

image.png

如果对象目标 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);

输出如下:

image.png

你还可以通过将 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);

输出如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-53xjDQMd-1688743766885)(https://upload-images.jianshu.io/upload_images/16684925-497b1597e5c324c0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/729992.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

01-vue的核心和传统开发的区别

前端行业历史发展 &#x1f355;&#x1f355;&#x1f355;最早的网页是没有数据库的&#xff0c;可以理解为在网络上一张 报纸&#xff0c;直到CGI技术的出现&#xff0c;运行一小段代码与数据库或文件 系统进行交互&#xff0c;如98年的 Google Asp,JSP的出现&#xff0…

vscode编写stm32代码

vscode编辑keil项目&#xff0c;无需复杂步骤 keil开发是挺难用的&#xff0c;vscode又是编辑神器&#xff0c;keil调试vscode编辑代码可以大幅度提高效率&#xff0c;因此可以借用vscode来编辑代码。 1安装c插件 安装c与extension pack插件 2配置c_cpp_properties.json文…

OSI参考模型通信处理例子【图解TCP/IP(笔记四)】

文章目录 OSI参考模型通信处理举例7层通信■ 应用层■ 表示层■ 会话层■ 传输层■ 网络层■ 数据链路层、物理层 OSI参考模型通信处理举例 下面举例说明7层网络模型的功能。假设使用主机&#xff08;这里所指的主机是指连接到网络上的计算机。按照OSI的惯例&#xff0c;进行通…

C++——this指针

1.什么是this指针&#xff1f; this指针是C中的一个特殊指针&#xff0c;它指向当前对象的地址。在类的成员函数中&#xff0c;this指针可以用来访问当前对象的成员变量和成员函数。this指针的作用是区分同名的成员变量和局部变量&#xff0c;以及在成员函数中访问其他成员函数…

C# PaddleOCR ch_PP-OCRv3 ch_PP-OCRv4测试

效果 未开启Onnx,V3 未开启Onnx,V4 开启Onnx,V3 开启Onnx,V4 项目 VS2022.net 4.8OpenCvSharp4 Sdcb.PaddleInference/2.5.0-preview.1 Sdcb.PaddleOCR/2.6.0.6-preview.1 代码 using OpenCvSharp; using Sdcb.PaddleInference; using Sdcb.PaddleOCR; using Sdcb.Paddle…

Spark—通过Java、Scala API实现WordCount案例的基本操作

实验原理 Spark的核心就是RDD&#xff0c;所有在RDD上的操作会被运行在Cluster上&#xff0c;Driver程序启动很多Workers&#xff0c;Workers在&#xff08;分布式&#xff09;文件系统中读取数据后转化为RDD&#xff08;弹性分布式数据集&#xff09;&#xff0c;然后对RDD在…

Centos7编译安装ffmpeg

1、准备工作&#xff0c;安装必要的环境 yum install autoconf automake bzip2 cmake freetype-devel gcc gcc-c git libtool make mercurial pkgconfig zlib-devel 2、创建目录 ffmpeg_sources 目录是下载软件包的目录 ffmpeg 目录是安装目录 mkdir /usr/local/ffmpeg_sour…

库表实验操作

目录 1、创建数据库Market&#xff0c;在 Market中创建数据表customers。​编辑 2、在Market中创建数据表orders。 3、创建数据库Team&#xff0c;定义数据表player。 1、创建数据库Market&#xff0c;在 Market中创建数据表customers。 &#xff08;1&#xff09;mysql>…

CentOS7下安装设置MySQL

CentOS7下安装设置MySQL 1.下载MySQL 1.1下载安装MySQL官方yum源配置 wget http://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm 1.2yum下安装MySQL yum -y install mysql57-community-release-el7-11.noarch.rpm 1.3安装MySQL服务器 yum -y install mysq…

一文讲解Linux上部署Web项目(war包)

一文讲解Linux上部署Web项目&#xff08;war包&#xff09; 生成war包 ​ 首先&#xff0c;我们要先将Web项目打成war包 ​ 连接Linux服务器 ​ 这里我们通过SSH客户端&#xff0c;连接远程Linux服务器&#xff0c;需要提前知道Linux的IP地址、登录用户名、密码等&#x…

zabbix基础5——screen屏幕展示、主机模板的使用、用户权限设置

文章目录 一、screen1.1 zabbix屏幕展示1.2 screen命令 二、zabbix模板2.1 创建模板2.2 复制模板2.3 模板导出2.4 模板删除2.5 模板导入 三、主机和主机组3.1 添加主机组3.2 导出主机模板3.3 导入主机模板 四、用户和用户组4.1 创建用户组4.2 创建用户4.3 用户权限设置 一、scr…

ETHERNET/IP 转ETHERCAT连接ethercat总线伺服如何控制

远创智控YC-EIP-ECT网关连接到ETHERNET/IP总线中做为从站使用&#xff0c;连接到ETHERCAT总线中做为从站使用&#xff0c;可以同时满足多种工业生产的需求。支持广泛的设备类型&#xff0c;可以和多种不同的设备进行通讯。 技术参数 ETHERNET/IP 技术参数 ● 网关做为 ETHERN…

LeetCode 方法整理(部分更新中)

1、迭代&#xff0c;链表反转 listNode prev null, next, curr head&#xff1b; while (curr ! null) {next curr.next;curr.next prev;curr next;prev curr;curr next; } return prev;2、递归&#xff0c;链表反转 /*// 两个节点时 head.next.next head; head.next…

苹果手机怎么设置日程安排提醒闹钟?简单几步

在忙碌的工作和生活中&#xff0c;我们经常会忘记重要的约会、会议和任务。这时候&#xff0c;一个可靠的日程提醒闹钟就显得尤为重要了。通过在手机上设置日程安排提醒闹钟&#xff0c;让我们不再错过任何重要的事情。 那么苹果手机怎么设置日程安排提醒闹钟&#xff1f; 敬…

硬件电路设计--运算放大器(一)参数和分类

文章目录 前言一、运放分类1.1 功能分类1.2 按单颗IC封装1.3 第一脚的判断 二、运放参数2.1 理想运放2.2 实际运放2.3 数据手册中的重要参数2.3.1 供电电压Vs&#xff08;power supply&#xff09;2.3.2 虚短虚断2.3.3 输入偏置电流Ib2.3.4 噪声Vn2.3.5 静态电流IQ2.3.6 输入失…

用户端Web测试方法与技术

目录&#xff1a; WEB 测试概念WEB 测试的价值WEB 测试学习路线WEB 基础知识html讲解javascript讲解css讲解web项目测试流程web测试设计思路web端常见bug解析Litemall购物车功能测试用例设计浏览器开发者工具web兼容测试策略Litemall购物车功能测试执行 1.WEB 测试概念 WEB…

【InnoDB 存储引擎】5.4.5 The Slow Query Log(慢日志实验)

文章目录 1 慢日志实验环境准备2 开始实验2.1 实验 1&#xff1a;超过查询时间相关慢日志并观察2.2 实验 2&#xff1a;不使用索引相关慢日志并观察2.3 实验 3&#xff1a;打印额外的慢日志信息2.4 实验 4&#xff1a;使用 mysqldumpslow 工具分析日志文件2.5 实验 5&#xff1…

《UNUX环境高级编程》(7)进程环境

1、引言 2、main函数 main函数的原型/*argc是命令行参数的数目&#xff0c;argv是指向各个指针所构成的数组*/ int main(int argc,char *argv[]);3、进程终止 有八种方式使进程终止。其中5种是正常&#xff0c;它们是&#xff1a; 从main函数返回调用exit调用_exit或_Exit最后…

看一看LRU与LFU

LRU&#xff08;Least recently used&#xff1a;最近最少使用&#xff09;和LFU&#xff08;Least frequently used&#xff1a;最不经常使用&#xff09;&#xff0c;两个都是以链表结构为基础&#xff0c;一般是作为缓存使用&#xff0c;当然&#xff0c;既然是缓存&#xf…

第六章:L2JMobius学习 – 源码讲解网络数据通信

本章节介绍客户端和服务器端的网络数据通信&#xff0c;使用的技术是Java NIO&#xff08;也就是套接字Socket&#xff09;。服务器端和客户端使用Socket通信的原因在于&#xff0c;它是双向的&#xff0c;持久的。也就是说&#xff0c;服务器端可以随时的向客户端发送数据&…