JS 对象数组排序方法测试

输出 

一.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 一定等于 breturn 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.rhkb.cn/news/270830.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

编写dockerfile挂载卷、数据容器卷

编写dockerfile挂载卷 编写dockerfile文件 [rootwq docker-test-volume]# vim dockerfile1 [rootwq docker-test-volume]# cat dockerfile1 FROM centosVOLUME ["volume01","volume02"]CMD echo "------end------" CMD /bin/bash [rootwq dock…

高级控件

1.下拉列表 package com.tiger.chapter08;import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle; import android.view.View; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.Spinner;public class Spi…

【系统学习】2-Java进阶知识总结-3-集合-1-补充【泛型、树、数据结构】

文章目录 泛型什么是泛型&#xff1f;常见的泛型标识符泛型类泛型方法泛型接口通配符 树树的基本概念什么是二叉树&#xff1f;二叉树--普通二叉树二叉树--二叉查找树定义规则优缺点 二叉树--平衡二叉树定义规则旋转机制 二叉树--红黑树定义规则红黑规则 常见数据结构总体特点结…

【北京迅为】《iTOP-3588开发板网络环境配置手册》第3章 开发板直连电脑配置方法(不能上外网)

RK3588是一款低功耗、高性能的处理器&#xff0c;适用于基于arm的PC和Edge计算设备、个人移动互联网设备等数字多媒体应用&#xff0c;RK3588支持8K视频编解码&#xff0c;内置GPU可以完全兼容OpenGLES 1.1、2.0和3.2。RK3588引入了新一代完全基于硬件的最大4800万像素ISP&…

Vue:双token无感刷新

文章目录 初次授权与发放Token&#xff1a;Access Token的作用&#xff1a;Refresh Token的作用&#xff1a;无感刷新&#xff1a;安全机制&#xff1a;后端创建nest项目AppController 添加login、refresh、getinfo接口创建user.dto.tsAppController添加模拟数据 前端Hbuilder创…

20240306-1-大数据的几个面试题目

面试题目 1. 相同URL 题目: 给定a、b两个文件&#xff0c;各存放50亿个url&#xff0c;每个url各占64字节&#xff0c;内存限制是4G&#xff0c;让你找出a、b文件共同的url&#xff1f; 方案1&#xff1a;估计每个文件的大小为50G64320G&#xff0c;远远大于内存限制的4G。所以…

【UE 材质 Niagara】爆炸效果

目录 效果 步骤 一、材质部分 二、Niagara部分 效果 步骤 一、材质部分 1. 创建一个材质&#xff0c;这里命名为“M_Burst” 打开“M_Burst”&#xff0c;设置混合模式为半透明&#xff0c;设置着色模型为无光照&#xff0c;勾选双面显示 在材质图表中首先创建扰动效果 其…

【center-loss 中心损失函数】 参数与应用

文章目录 前言简单总结一下参数对比解释参数权重衰减&#xff08;L2正则化&#xff09;动量其他参数运行 前言 之前我们已经完全弄明白了中心损失函数里的代码是什么意思&#xff0c;并且怎么用的了&#xff0c;现在我们来运行它。 论文&#xff1a;https://ydwen.github.io/…

如何配置通过Steam启动SMAPI

想要通过Steam启动SMAPI需要两个步骤&#xff1a; 获取启动选项文本在steam中填写启动选项文本 1 获取启动选项文本 1.1 如果你是通过小火星露谷管理器安装的SMAPI 如果你是通过小火星露谷管理器安装的SMAPI&#xff0c;你可以在SMAPI管理的扩展卡片里面看见一个【小贴士】…

【Web】浅聊JDBC的SPI机制是怎么实现的——DriverManager

目录 前言 分析 前言 【Web】浅浅地聊JDBC java.sql.Driver的SPI后门-CSDN博客 上篇文章我们做到了知其然&#xff0c;知道了JDBC有SPI机制&#xff0c;并且可以利用其Driver后门 这篇文章希望可以做到知其所以然&#xff0c;对JDBC的SPI机制的来源做到心里有数 分析 先是…

VS2022打包C#安装包(最新、最全)

开发c#的一个小工具到打包环境碰壁了&#xff0c;在网上找了很多资料耶踩了很多坑&#xff0c;耗时1hour才打包完毕&#xff0c;避免以后碰到类似的问题再次记录&#xff0c;自认为步骤比较全面&#xff0c;如果有帮助麻烦点个赞呗&#xff01;&#xff01;&#xff01; 一、Mi…

WPF LinearGradientBrush立体效果

WPF LinearGradientBrush立体效果 渐变方向 1. 默认是左上角到右下角 2.从左到右 <Border Height"35" Width"120"><Border.Background><LinearGradientBrush EndPoint"1,0"><GradientStop Color"Yellow"Offs…

经典目标检测网络Yolo——原理部分

目标检测问题 分为两个子问题: 找到图片中哪些位置、哪些区域含有目标对象识别这些区域中的目标对象是什么基于CNN的目标检测算法能够很好的解决第二个问题,在一张图片仅含一个对象,且该对象占据了整张图片绝大部分面积时,基于CNN的对象识别算法具有很高的准确率。 一种定…

Spring Boot 3核心技术与最佳实践

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 highlight: a11y-dark 引言 Spring Boot作为…

SAP PP学习笔记07 - 简单BOM,派生BOM,多重BOM,批量修改工具 CEWB

上一章讲了BOM的操作。 SAP PP学习笔记06 - BOM操作&#xff08;BOM 展开&#xff0c;BOM 使用先一览&#xff0c;BOM比较&#xff0c;批量更改BOM&#xff09;-CSDN博客 本章延续上一章&#xff0c;继续讲BOM操作。 主要讲 派生BOM&#xff0c;多重BOM&#xff0c;以及BOM批…

支部管理系统微信小程序(管理端+用户端)flask+vue+mysql+微信小程序

系统架构如图所示 高校D支部管理系统 由web端和微信小程序端组成&#xff0c;由web端负责管理&#xff0c;能够收缴费用、发布信息、发布问卷、发布通知等功能 部分功能页面如图所示 微信小程序端 包含所有源码和远程部署&#xff0c;可作为毕设课设

AMDGPU KFD Test 编译使用

ROCT-Thunk-Interface是一个用于在ROCm软件堆栈中提供设备无关性的层。它是ROCm的一部分&#xff0c;允许不同的硬件平台&#xff08;如AMD GPU和Intel CPU&#xff09;使用相同的API进行计算。 要安装ROCT-Thunk-Interface&#xff0c;首先需要创建一个新的目录&#xff0c;并…

Java开发从入门到精通(一):Java的基础语法进阶

Java大数据开发和安全开发 &#xff08;一&#xff09;Java注释符1.1 单行注释 //1.2 多行注释 /* */1.3 文档注释 /** */1.4 各种注释区别1.5 注释的特点1.5 注释的快捷键 &#xff08;二&#xff09;Java的字面量&#xff08;三&#xff09;Java的变量3.1 认识变量3.2 为什么…

离散数学——(1)数理逻辑,命题的概念,命题联结词,条件联结词,命题公式,命题的翻译

目录 1.数理逻辑 2.命题的概念 1.命题的判断 ​2.命题的真值 ​ 3.原子命题和复合命题 3.命题联结词 1.否定联结词 2.合取联结词 3.析取联结词 4.条件联结词 ​1.双条件联结词 5.命题公式 1.合式公式 6.命题的翻译 1.数理逻辑 2.命题的概念 1.命题的判断 2.命…

Kakarot:当今以太坊的未来

1. 引言 前序博客&#xff1a; Kakarot&#xff1a;部署在Starknet上的ZK-EVM type 3 随着 Kakarot zkEVM 即将发布测试网&#xff0c;想重申下 Kakarot zkEVM 的愿景为&#xff1a; 为什么在rollup空间中还需要另一个 zkEVM&#xff1f; 开源代码见&#xff1a; https:/…