js数组排序实用方法集锦

前言:

据说程序员三个月就能忘记自己写的代码,所以最好是在有空的时候及时做些总结,记录下来,这样后边遇到类似问题的话,就可以直接先查看自己的博客了。写技术博客,对自己是一种总结,对别人,是一种参考。

对于数组排序,这里主要介绍sort()方法(sort基本上已经能满足绝大多数数组的排序了)。

array.sort():

sort() 方法用于对数组的元素进行排序,默认按“字母”升序,即使数组的元素是数字,因此,对于数字,就需要特殊的写法了。

普通数组:

1. 字符串数组:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();//默认升序  Apple,Banana,Mango,Orange
fruits.sort().reverse();//降序  Orange,Mango,Banana,Apple

2. 数字数组:

由于sort()方法默认按“字母”升序,所以对于数字组成的数组,就需要使用特殊的写法来进行排序了。

先上代码,具体写法如下:

arr.sort((a,b)=>{return a-b})//升序
arr.sort((a,b)=>{return b-a})//降序

如上,使用数字对数组进行排序,就需要通过一个函数作为参数来调用。

对象数组:

使用场景——已知某品牌门店列表数据(含距当前位置的距离),需要按距离由仅及远排序,具体实现方法如下:

复制代码
var shoplist = [{"name": "上塘中海锦城","distance": 14307.0275
}, {"name": "汉堡王深圳华强北店","distance": 16606.5901
}, {"name": "汉堡王深圳蔡屋围店","distance": 18062.4395
}, {"name": "汉堡王深圳金丰城店","distance": 18468.4439
}, {"name": "汉堡王深圳地王店","distance": 18484.8283
}, {"name": "汉堡王深圳龙岗宝能店","distance": 39006.9269
}, {"name": "汉堡王深圳龙华绿景香颂店","distance": 15356.4863
}, {"name": "汉堡王深圳西荟城店","distance": 24990.1325
}, {"name": "汉堡王深圳魅力时代店","distance": 8228.8474
}, {"name": "汉堡王深圳福华三路店","distance": 12693.439
}]
shoplist.sort((a, b) => {return a.distance - b.distance
})
复制代码

如上,关键代码就一句: 

shoplist.sort((a,b)=>{return a.distance-b.distance})

简单分析不难发现,这跟上面数字数组排序用法是一样的,只不过是这里使用了数组中对象元素的 distance 这一数字字段进行比较排序的。

经过排序后的数据如下图,门店列表已经按距离字段进行升序排列,根据这些排序后的数据进行展示就OK了:

反序排序:

与上面排序不同,反转排序方法 reverse() 将一个数组中的元素的顺序反转排序。

这个方法单独使用的场景不多,但是结合sort()排序方法使用的场景比较多一些,特别是对于一些复杂的数组。

如网上商城商品搜索列表页面的正序、反序,有根据价格的,有根据销量的,还有根据评价的,如果单单是正序,或者是排序,那么直接用sort()方法就好了。但如果正序排序之后又需要进行反序排列,那么直接用reverse()进行反转就OK了,没必要再用sort()进行反序排列,无论是在写法上,还是计算速度上都要快好多的:

//1. sort()进行反序
shoplist.sort((a,b)=>{return b.distance-a.distance})
//2. reverse()反序
shoplist.reverse()

转载于:https://www.cnblogs.com/Guernicas/p/10641872.html

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

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

相关文章

运行 100 万个并发任务究竟需要多少内存?

Laf 公众号已接入了 AI 绘画工具 Midjourney&#xff0c;可以让你轻松画出很多“大师”级的作品。同时还接入了 AI 聊天机器人&#xff0c;支持 GPT、Claude 以及 Laf 专有模型&#xff0c;可通过指令来随意切换模型。欢迎前来调戏&#x1f447; <<< 左右滑动见更多 &…

MyBatis 环境搭建+基本使用

目录 MyBatis创建MyBatis环境搭建MyBatis模式开发MyBatis 获取动态参数&#xff08;查询操作&#xff09;${} 直接替换#{} 占位符模式替换like查询&#xff08;模糊查询&#xff09;多表查询一对一的表映射一对多的表映射 增、删、改操作改操作删除操作增加操作添加用户添加用户…

Spring事务与事务传播

文章目录 一、什么是事务?二、Spring事务实现编程式事务声明式事务 三、Transactional的使用参数作用Spring事务的隔离级别事务失效的场景Transactional工作原理 四、Spring事务传播机制Spring有哪些事务传播机制&#xff1f; 一、什么是事务? 事务&#xff1a;事务是一组操…

mybatis分页中的报错

1 Cause: org.apache.ibatis.builder.BuilderException: Error parsing SQL Mapper Configuration. Cause: java.lang.NoSuchMethodException: com.github.pagehelper.BoundSqlInterceptor.<init>() 出错的原因就是上面的那句话 Error parsing SQL Mapper Configuration…

Mybatis分页方式及实现原理

一、mybatis的4种分页方式(物理分页、逻辑分页) 1、借助Sql语句Q进行分页(物理分页) 2、拦截器分页(物理分页)通过拦截器给sq语句末尾加Eimt语句来查询 3、借助 数组Q进行分页(逻辑分页) 4、RowBounds分页插件实现分页(逻辑分页) 二、mybatis分页的原理 mybatis分页原理是&…

Ora提示词版ChatGPT机器人

Ora可以自己创建一个ChatGPT机器人&#xff0c;可以设置自己的提示词例如我创建的AI佛祖https://ora.ai/aesthetic-red-nfa4/ai%E4%BD%9B%E7%A5%96 提示词 创建机器人的时候&#xff0c;需要设定自己的提示词&#xff0c;例如&#xff1a; 假设你是佛祖&#xff0c;名字叫做释迦…

mybatis分页查询插件

1.引入jar包 <dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>5.3.0</version></dependency> 2.在mybatis的核心配置文件mybatis.xml中配置分页插件 3.使用pageHec publi…

Mybatis分页查询——四种传参方式

目录 相关导读 一、顺序传参 1. 持久层接口方法 2. UserMapper.xml映射文件新增标签 3. 新增测试方法 4. 运行结果 二、param传参 1. 持久层接口方法 2. UserMapper.xml映射文件新增标签 3. 新增测试方法 4. 运行结果 三、自定义POJO类传参 1. 自定义POJO类 2. 持…

MyBatis分页插件

目录 分页插件 Mybatis插件典型适用场景 实现思考 第一个问题 第二个问题 自定义分页插件 分页插件使用 添加pom依赖 插件注册 调用 代理和拦截是怎么实现的 PageHelper 原理 分页插件 MyBatis 通过提供插件机制&#xff0c;让我们可以根据自己的需要去增强MyBati…

Mybatis——分页

1.为什么要分页&#xff1f; 减少数据的处理量使用Limit分页 select * from user limit startIndex,pageSize;使用Mybatis实现分页&#xff0c;核心SQL 1.数据库文件-db.properties drivercom.mysql.jdbc.Driver urljdbc:mysql://localhost:3306/mybatis?useSSLfalse&…

Mybatis实现分页的三种方式

文章目录 1、Limit实现分页2、RowBounds分页&#xff08;不建议使用&#xff09;3、MyBatis分页插件PageHelper&#xff08;了解即可&#xff09; 1、Limit实现分页 sql语句 SELECT * from user limit startIndex,pageSize简单示例&#xff1a; user表 查询一&#xff1a;从第…

Mybatis的四种分页方式详解

LIMIT关键字 mapper代码 select * from tb_user limit #{pageNo}, #{pageSize} 业务层直接调用 public List findByPageInfo(PageInfo info) { return userMapper.selectByPageInfo(info); } 3&#xff0c;优点 灵活性高&#xff0c;可优化空间大 mysql分页语句优化 4&…

mybatis实现分页的几种方式

本文目录 借助数组进行分页借助Sql语句进行分页拦截器分页RowBounds实现分页 借助数组进行分页 原理&#xff1a;进行数据库查询操作时&#xff0c;获取到数据库中所有满足条件的记录&#xff0c;保存在应用的临时数组中&#xff0c;再通过List的subList方法&#xff0c;获取到…

【分布式应用】ELK企业级日志分析系统

一、ELK 简介 ELK平台是一套完整的日志集中处理解决方案&#xff0c;将 ElasticSearch、Logstash 和 Kiabana 三个开源工具配合使用&#xff0c; 完成更强大的用户对日志的查询、排序、统计需求。 1.1 ELK各组件介绍 ElasticSearch&#xff1a; 是基于Lucene&#xff08;一个…

Rust每日一练(Leetday0016) 全排列I\II、旋转图像

目录 46. 全排列 Permutations &#x1f31f;&#x1f31f; 47. 全排列 II Permutations II &#x1f31f;&#x1f31f; 48. 旋转图像 Rotate Image &#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 专…

win10操作系统官网如何下载ios境像文件安装操作系统

1.打开官网 2.立即下载工具 3.正在准备进行工作 4.接收条款 5.根据需求选择安装合适的位置 6.等待创建成功 7.右键选择装载 8.双击安装setup.exe文件 8 使用微Pe安装过程中发现需要联网更新解决 winR 然后cmd 输入 OOBE\BYPASSNRO 9 或者关闭此进程 电脑不要插网线&#xff…

虚拟机系统iso镜像下载_如何下载正版系统镜像

许多网友想装系统&#xff0c;可是不会装(后期会推装系统的文章)&#xff0c;而且网上的系统有的装有全家桶&#xff0c;有的又有捆绑软件&#xff0c;严重的还有病毒。那么&#xff0c;在哪里去下载正版&#xff0c;安全的系统镜像呢 "MSDN&#xff0c;我告诉你"这个…

自定义IOS系统弹框

写在之前 系统的弹框虽然很好看&#xff0c;但是有时候无法完全满足UI设计的需求&#xff0c;比如说中间要显示一个输入框&#xff0c;或者要放置一张图片&#xff0c;这里介绍一个很早之前的自定义弹框库&#xff0c;这个自定义弹框sdk写的很细致&#xff0c;定制性很强&…

华为vivo小米魅族oppo荣耀安卓手机刷IOS苹果系统

现在的刷机教程层出不穷&#xff0c;但是没有哪个大神可以开发出一款安卓刷IOS的工具&#xff0c;使得安卓手机或者安卓平板变成IOS苹果系统&#xff0c;这个工具除了可以刷安卓手机也可以刷安卓平板&#xff0c;网友实测&#xff0c;如果设备不支持的话软件会提醒不支持&#…

android高仿ios11系统,安卓仿ios11桌面全套文件

安卓手机想要苹果11的桌面的话&#xff0c;安卓仿ios11桌面全套文件app就可以帮您实现哦。安卓仿ios11桌面全套文件app是一款超级优质的手机桌面工具软件&#xff0c;平台上面拥有海量的壁纸资源&#xff0c;大家可以任意选取哦。 应用说明 修改负一屏效果 修改dock栏模糊度 修…