JS 对象数组排序方法测试

news2024/12/21 3:22:12

输出 

一.Array.prototype.sort()

1.默认排序 sort()

sort() 方法就地对数组的元素进行排序,并返回对相同数组的引用。默认排序是将元素转换为字符串,然后按照它们的 UTF-16 码元值升序排序。

由于它取决于具体实现,因此无法保证排序的时间和空间复杂度。

如果想要不改变原数组的排序方法,可以使用 toSorted()。

说明:两个重点。1、会改变原数组。2、默认按将元素转换为字符串排序。

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// Expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// Expected output: Array [1, 100000, 21, 30, 4]

2.比较函数 sort(compareFn)

定义排序顺序的函数。返回值应该是一个数字,其符号表示两个元素的相对顺序:如果 a 小于 b,返回值为负数,如果 a 大于 b,返回值为正数,如果两个元素相等,返回值为 0NaN 被视为 0

说明:自定义比较函数返回一个数值。一般为1,-1,0.

function compareFn(a, b) {
  if (根据排序标准,a 小于 b) {
    return -1;
  }
  if (根据排序标准,a 大于 b) {
    return 1;
  }
  // a 一定等于 b
  return 0;
}
const stringArray = ["Blue", "Humpback", "Beluga"];
const numberArray = [40, 1, 5, 200];
const numericStringArray = ["80", "9", "700"];
const mixedNumericArray = ["80", "9", "700", 40, 1, 5, 200];

function compareNumbers(a, b) {
  return a - b;
}

stringArray.sort(); // ['Beluga', 'Blue', 'Humpback']

numberArray.sort(compareNumbers); // [1, 5, 40, 200]

numericStringArray.sort(); // ['700', '80', '9']
numericStringArray.sort(compareNumbers); // ['9', '80', '700']

mixedNumericArray.sort(compareNumbers); // [1, 5, '9', 40, '80', 200, '700']

二.对象数组

let arr = [  
  { name: 'Zhang', age: 25, score: 85 },  
  { name: 'Li', age: 20, score: 90 },  
  { name: 'Wang', age: 22, score: 80 },  
  { name: 'Zhao', age: 22, score: 92 }  
];  
  
// 按 age 升序排序,如果 age 相同则按 score 降序排序  
arr.sort((a, b) => {  
  if (a.age !== b.age) {  
    return a.age - b.age; // 按 age 升序排序  
  } else {  
    return b.score - a.score; // 如果 age 相同,按 score 降序排序  
  }  
});  
  
console.log(arr);
[  
  { name: 'Li', age: 20, score: 90 },  
  { name: 'Wang', age: 22, score: 80 },  
  { name: 'Zhao', age: 22, score: 92 },  
  { name: 'Zhang', age: 25, score: 85 }  
]

三.通用方法

1.指定单一对象元素属性

function sortObjectsByProperty(array, property) {
    return array.sort(function(a, b) {
        if (a[property] < b[property]) {
            return -1;
        } else if (a[property] > b[property]) {
            return 1;
        } else {
            return 0;
        }
    });
}
var objects = [
    { name: 'Apple', price: 15 },
    { name: 'Banana', price: 10 },
    { name: 'Cherry', price: 20 }
];

var sortedObjects = sortObjectsByProperty(objects, 'price');
console.log(sortedObjects);

输出:

[
  { name: 'Banana', price: 10 },
  { name: 'Apple', price: 15 },
  { name: 'Cherry', price: 20 }
]

2.指定对象元素多属性

function sortObjectsByProperties(array, ...properties) {  
    return array.sort((a, b) => {  
        for (const property of properties) {  
            if (a[property] < b[property]) {  
                return -1;  
            } else if (a[property] > b[property]) {  
                return 1;  
            }  
            // 如果属性相等,则继续比较下一个属性  
        }  
        // 所有属性都相等  
        return 0;  
    });  
}  
  
// 示例对象数组  
const employees = [  
    { name: 'Alice', age: 30, salary: 50000 },  
    { name: 'Bob', age: 25, salary: 60000 },  
    { name: 'Charlie', age: 35, salary: 55000 },  
];  
  
// 使用剩余参数传入多个属性进行排序  
const sortedEmployees = sortObjectsByProperties(employees, 'age', 'salary');  
  
console.log(sortedEmployees);

输出:

[  
    { name: 'Bob', age: 25, salary: 60000 }, // 年龄最小  
    { name: 'Alice', age: 30, salary: 50000 }, // 年龄次小,但薪水低于Charlie  
    { name: 'Charlie', age: 35, salary: 55000 } // 年龄最大,薪水也最高(在同龄人中)  
]

四. 对象数组汉字按拼音排序

1.使用stringObject.localeCompare(target)

const chinesePeople = [  
    { name: '张三', age: 30 },  
    { name: '李四', age: 25 },  
    { name: '王五', age: 35 },  
    { name: '赵六', age: 40 },  
];  
  
// 使用 localeCompare 对名字属性进行排序  
chinesePeople.sort((a, b) => a.name.localeCompare(b.name, 'zh-CN'));  
  
console.log(chinesePeople);

输出:

[
  { name: '李四', age: 25 },
  { name: '王五', age: 35 },
  { name: '张三', age: 30 },
  { name: '赵六', age: 40 } 
]

2.使用第三方库

如果你想要根据汉字拼音对对象数组进行排序,你需要先将汉字转换为拼音,然后根据拼音进行排序。这通常需要使用到第三方库来实现汉字到拼音的转换,比如 pinyin 库。

npm install pinyin
const pinyin = require('pinyin');  
  
function sortObjectsByChinesePinyin(array, propertyName) {  
    return array.sort((a, b) => {  
        const aPinyin = pinyin(a[propertyName], { style: pinyin.STYLE_NORMAL, heteronym: false }).join('');  
        const bPinyin = pinyin(b[propertyName], { style: pinyin.STYLE_NORMAL, heteronym: false }).join('');  
        return aPinyin.localeCompare(bPinyin);  
    });  
}  
  
// 示例对象数组  
const chineseNames = [  
    { name: '张三', age: 30 },  
    { name: '李四', age: 25 },  
    { name: '王五', age: 35 },  
];  
  
// 使用汉字拼音对名字进行排序  
const sortedChineseNames = sortObjectsByChinesePinyin(chineseNames, 'name');  
  
console.log(sortedChineseNames);

输出:

[  
  { name: '李四', age: 25 }, // 'lǐ sì'  
  { name: '王五', age: 35 }, // 'wáng wǔ'  
  { name: '张三', age: 30 }  // 'zhāng sān'  
]

强调:如果用VS调试,别忘记了在luanch.jsion文件中添加  "console": "integratedTerminal",这句话,不然会报错。还看不到运行结果。

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

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

相关文章

将六西格玛设计融入汽车制造:实践之路

在快节奏的现代生活中&#xff0c;汽车早已不再仅仅是一种交通工具&#xff0c;而是成为了展现个性、追求品质生活的重要象征。为了满足消费者日益增长的品质需求&#xff0c;汽车制造商们纷纷将目光投向了六西格玛设计这一先进的质量管理方法。那么&#xff0c;如何将六西格玛…

现在如何才能开通微信公众号留言功能?

为什么公众号没有留言功能&#xff1f;2018年2月12日之后直到现在&#xff0c;新注册公众号的运营者会发现一个问题&#xff1a;无论是个人还是企业的公众号&#xff0c;在后台都找不到留言功能了。这对公众号来说绝对是一个极差的体验&#xff0c;少了一个这么重要的功能&…

AWS的S3存储桶设置生命周期规则

业务场景&#xff1a;周期性备份数据到s3存储桶&#xff0c;设置定期删除&#xff0c;只保留一定周期内的存储数据&#xff0c;节省存储空间减少花费 1. 点击存储桶选择管理--->创建生命周期规则 2. 设置名称等参数 点击创建即可

VUE实现Office文档在线编辑,支持doc/docx、xls/xlsx、ppt/pptx、pdf等

1.微软提供的在线Office预览&#xff08;只能预览&#xff0c;不能编辑&#xff09; https://view.officeapps.live.com/op/view.aspx?src服务器上文档地址&#xff08;http开头&#xff09; 2.国内在线Office方案&#xff1a; 腾讯文档、石墨文档、飞书 优势&#xff1a;跨…

光路科技:工业以太网交换机引领工业互联网新篇章

随着全球范围内工业4.0的浪潮不断涌动&#xff0c;工业互联网作为其核心驱动力&#xff0c;正引领着工业生产向智能化、网络化的崭新阶段迈进。在这一转型的浪潮中&#xff0c;光路科技凭借其卓越的工业互联设备与创新解决方案&#xff0c;正为工业互联网领域的发展注入新的活力…

Unity 常用的4种灯光、制作镜子、灯光的调用修改数值、

创建灯光时&#xff0c;一般用4种&#xff1a;定向光、点光源、聚光、区域光、 定向光&#xff1a;太阳 点光源&#xff1a;灯泡 聚光灯&#xff1a;手电筒 区域光&#xff1a;烘焙-贴图 灯光选择已烘焙 需要先选择被烘焙的物体&#xff0c;然后再选择Contribute GI 等待进…

网络工程师笔记7

路由器需要知道下一跳和出接口才能把数据转发出去 各个协议的优先级 直连&#xff1a;0 OSPF&#xff1a;10 ISIS&#xff1a;15 静态&#xff1a;60 RIP :100 静态路由 ip route-static <目的ip地址> 掩码 下一跳地址 例…

一文彻底搞懂Redis持久化

文章目录 1. Redis持久化方式2. RDB(快照)2.1 手动方式2.2 自动方式2.3 何时触发 RDB 持久化2.4 RDB 相关配置 3. AOF(追加日志文件)3.1 AOF 文件解读3.2 AOF 的写入与同步3.3 AOF 重写3.4 AOF 重写面临的问题3.5 AOF相关配置 4. 混合持久化 1. Redis持久化方式 Redis持久化是…

你知道什么是 BitMap 吗?

&#x1f449;博主介绍&#xff1a; 博主从事应用安全和大数据领域&#xff0c;有8年研发经验&#xff0c;5年面试官经验&#xff0c;Java技术专家&#xff0c;WEB架构师&#xff0c;阿里云专家博主&#xff0c;华为云云享专家&#xff0c;51CTO 专家博主 ⛪️ 个人社区&#x…

哪个超声波清洗机品牌值得入手?销量榜品牌值得选购!

在科技日益发展的今天&#xff0c;超声波清洗技术以其高效、便捷和深度清洁的特点&#xff0c;已经深入到生活的诸多领域&#xff0c;从精密仪器到珠宝首饰&#xff0c;从眼镜框到假牙&#xff0c;甚至是厨房用品的日常护理&#xff0c;都能见到超声波清洗机的身影。面对市场上…

第105讲:Mycat垂直分表实战:从规划到解决问题的完整指南

文章目录 1.垂直分表的背景2.垂直分表案例实战2.1.垂直分表规划2.2.配置Mycat实现垂直分表2.3.重启Mycat2.4.在Mycat命令行中导入数据结构2.5.查看由Mycat分表后每个分片上存储的表2.6.Mycat垂直分表后可能遇到的问题2.7.垂直分表完成 1.垂直分表的背景 我们的商城系统数据库&…

基于JavaWEB SpringBoot婚纱影楼摄影预约网站设计和实现

基于JavaWEB SSM SpringBoot婚纱影楼摄影预约网站设计和实现 博主介绍&#xff1a;多年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言…

两天学会微服务网关Gateway-Gateway工作原理

锋哥原创的微服务网关Gateway视频教程&#xff1a; Gateway微服务网关视频教程&#xff08;无废话版&#xff09;_哔哩哔哩_bilibiliGateway微服务网关视频教程&#xff08;无废话版&#xff09;共计17条视频&#xff0c;包括&#xff1a;1_Gateway简介、2_Gateway工作原理、3…

Vulnhub靶机:Bellatrix

一、介绍 运行环境&#xff1a;Virtualbox 攻击机&#xff1a;kali&#xff08;10.0.2.4&#xff09; 靶机&#xff1a;Bellatrix&#xff08;10.0.2.9&#xff09; 目标&#xff1a;获取靶机root权限和flag 靶机下载地址&#xff1a;https://www.vulnhub.com/entry/hogwa…

【LangChain学习之旅】—(11) 记忆:通过Memory记住用户上次的对话细节

【LangChain学习之旅】—&#xff08;11&#xff09; 记忆&#xff1a;通过Memory记住客户上次买花时的对话细节 使用 ConversationChain使用 ConversationBufferMemory使用 ConversationBufferWindowMemory使用 ConversationSummaryMemory使用 ConversationSummaryBufferMemor…

VsCode搭建Spring Boot项目环境

VsCode搭建Spring Boot项目环境 1、前提条件&#xff1a;配置Java环境 下载安装JDK配置环境变量 2、VsCode配置SpringBoot环境 安装扩展 配置Maven 找到Maven配置文件&#xff0c;进行打开settings.json&#xff0c;添加如下代码&#xff1a; "workbench.iconThem…

码界深潜:全面解读软件工程的艺术与科学

&#x1f3e1; 基石构筑篇——软件工程基础理论及技能 &#x1f522; 编程语言选型与精修 于软件工程之浩瀚宇宙中&#xff0c;编程语言犹如各色画笔&#xff0c;每种语言的特性对应不同的创作领域。譬如Java倚仗跨平台兼容性和强大的面向对象机制&#xff0c;在企业级应用程序…

《GitHub新手入门指南:从零开始掌握基本用法》

在现代软件开发和技术社区中,GitHub已经成为了一个不可或缺的平台。它不仅是一个代码托管平台,更是一个技术交流、学习分享的社交平台。但对于初学者来说,GitHub可能会有些令人望而却步。本文将详细介绍GitHub的基本用法,帮助新手快速入门并融入这个充满活力的技术社区。 …

while 循环

语法格式&#xff1a; while (表达式) { 若干语句 } 执行规则 STEP1&#xff1a;计算表达式的值&#xff0c;如果 该值是true时&#xff0c;就进行STEP2&#xff0c; 否则执行STEP3。 STEP2&#xff1a;执行循环体&#xff0c;再进行 STEP1。 STEP3&#xff1a;结束while语句的…

WhatsApp API号注册平台价格对比:帮你选择性价比最高的服务

WhatsApp作为全球使用人数众多的即时通讯工具&#xff0c;推出的API服务为企业提供了强大的客户互动能力。然而面对众多提供WhatsApp API号注册的平台&#xff0c;企业在选择时很容易感到困惑。这篇文章将会对目前市面上比较主流的WhatsApp API号注册平台进行价格对比&#xff…