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()
js数组排序实用方法集锦的更多相关文章
- Python中os和shutil模块实用方法集锦
Python中os和shutil模块实用方法集锦 类型:转载 时间:2014-05-13 这篇文章主要介绍了Python中os和shutil模块实用方法集锦,需要的朋友可以参考下 复制代码代码如下: ...
- js数组排序sort()方法
一.sort方法升序: <script> var arr=[1,15,10,3,56]; arr.sort(function(num1,num2){ return num1-num2; } ...
- JS 日期实用方法
var DateUtil = function(){ /** * 判断闰年 * @param date Date日期对象 * @return boolean true 或false */ this.i ...
- Python中os和shutil模块实用方法集…
Python中os和shutil模块实用方法集锦 类型:转载 时间:2014-05-13 这篇文章主要介绍了Python中os和shutil模块实用方法集锦,需要的朋友可以参考下 复制代码代码如下: ...
- js实用方法记录-js动态加载css、js脚本文件
js实用方法记录-动态加载css/js 附送一个加载iframe,h5打开app代码 1. 动态加载js文件到head标签并执行回调 方法调用:dynamicLoadJs('http://www.yi ...
- js实用方法记录-简单cookie操作
js实用方法记录-简单cookie操作 设置cookie:setCookie(名称,值,保存时间,保存域); 获取cookie:setCookie(名称); 移除cookie:setCookie(名称 ...
- js实用方法记录-指不定哪天就会用到的js方法
js实用方法记录-指不定哪天就会用到的js方法 常用或者不常用都有 判断是否在微信浏览器中 测试代码:isWeiXin()==false /** * 是否在微信中 */ function isWeix ...
- js数组排序 reverse()和sort()方法的使用
WEB前端|js数组排序reverse()和sort()方法的使用,数组中已经存在两个可以直接用来重排序的方法:reverse()和sort(). reverse()方法会对反转数组项的顺序. var ...
- bootstrapValidator.js,最好用的bootstrap表单验证插件 简单实用方法
实用方法 1.引入 在有jquery和bootstrap的页面里引入bootstrapValidator.js和bootstrapValidator.css文件 2. 按照bootstrap的表单组件 ...
随机推荐
- Django 模板格式化日期
在模板中格式化日期: {{ post.date|date:”Y-m-d H:i:s” }}
- APP-10-文字识别-票据识别
1.Postman测试 2.参数 https://cloud.baidu.com/doc/OCR/OCR-API.html#.E9.80.9A.E7.94.A8.E7.A5.A8.E6.8D.AE.E ...
- using关键字在C#中的3种用法
using 关键字有两个主要用途: (一).作为指令,用于为命名空间创建别名或导入其他命名空间中定义的类型. (二).作为语句,用于定义一个范围,在此范围的末尾将释放对象. (一).作为指令 1. ...
- js模板引擎初级
模板引擎:模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的html文档. 模板引擎的实现方式有 ...
- spring Boot 上传文件,10天后,不能上传的bug
起因 公司研发人员 部署服务在阿里云 ecs 服务器; 上传文件过1周左右文件自动丢失; 排查思路: (1).查询tomcat 启动日志出现如下信息: java.io.IOException: The ...
- ThinkPHP子类继承Controller类的注意事项
在实际的开发中,往往有很多子类都继承自同一个父类,然后该父类再继承自框架内置类的需求. 比如: class Init extends Controller{...} class son1 extend ...
- 使用DDOS deflate抵御少量DDOS攻击
DDoS-Deflate是一款非常小巧的防御和减轻DDoS攻击的工具,它可以通过监测netstat来跟踪来创建大量互联网连接的IP地址信息,通过APF或IPTABLES禁止或阻档这些非常IP地址. 工 ...
- Android构建项目时出现的小bug们(2018年5月19日19:31:20)
问题详情 Error:Execution failed for task ':app:preDebugAndroidTestBuild'. > Conflict with dependency ...
- C++ 与 CDC相关的知识,点滴总结
hdc = GetDC (hwnd) ; GetDc函数:用于获得hWnd参数所指定窗口的客户区域的一个设备环境. 所获得的设备环境可以是通用.类或者私有类型,具体由指定窗口的类风格决定.对于通用设备 ...
- MySQL 数据 导入到 SQL Service
1.下载安装ODBC驱动程序 地址:http://dev.mysql.com/downloads/connector/odbc/ 注意:系统的版本问题( 我的是64位的win7系统,但是SQL Ser ...