JS实现数组排序的方法
前言
排序是计算机内经常进行的一种操作，其目的是将一组“无序”的记录序列调整为“有序”的记录序列，当然排序也是算法中的一种，javascript内置的sort函数是多种排序算法的集合，数组在原数组上进行排序。JavaScript实现多维数组、对象数组排序，其实用的就是原生的sort()方法，用于对数组的元素进行排序。
I.简单排序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单排序</title>
</head>
<body>
<script type="text/javascript">
var numbers=[4,6,8,0,1,2,3,7,9];
numbers.sort();//调用数组内置排序方法
console.log(numbers);//0,1,2,3,4,6,7,8,9
numbers.reverse();//将数组进行反转
console.log(numbers);//9,8,7,6,4,3,2,1,0
</script>
</body>
</html>
虽说我们实现了排序，也达到了我们想要的结果，但是这种排序有问题，我们看下下面这个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单排序</title>
</head>
<body>
<script type="text/javascript">
var numbers=[4,6,8,0,1,2,3,7,9];
numbers.sort();//调用数组内置排序方法
console.log(numbers);//0,1,2,3,4,6,7,8,9
numbers.reverse();//将数组进行反转
console.log(numbers);//9,8,7,6,4,3,2,1,0 var num=[0,1,5,10,15];
num.sort();//调用数组内置的排序方法
console.log(num);//0,1,10,15,5
num.reverse();//调用数组内置的反转方法
console.log(num);//5,15,10,1,0
</script>
</body>
</html>
为什么呢？且听我一一道来，本身sort()这个方法是没有问题的，在默认情况下，sort()方法按升序排列数组项，即最小的值位于最前面，最大的值排在最后面。为了实现升序，sort()方法会调用每个数组项的toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值，sort()方法比较的也是字符串。为了更好的实现排序，sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于那个值的前面，我们看下下面的案例。
II.简单数组自定义排序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单数组自定义排序</title>
</head>
<body>
<script type="text/javascript">
var number=[0,1,10,15,5];
function arrAsc(a,b){ //实现数组升序的方法
if(a>b){
return 1;
}else if(a<b){
return -1;
}else{
return 0;
}
}
number.sort(arrAsc);//调用数组升序的方法
console.log(number);//0.1,5,10,15
function arrDesc(a,b){ //实现数组降序的方法
if(a>b){
return -1;
}else if(a<b){
return 1;
}else{
return 0;
}
}
number.sort(arrDesc);//调用数组降序的方法
console.log(number);//15,10,5,1,0 </script>
</body>
</html>
在这里我们定义了一个compare比较函数，当a>b的结果为整数时则为升序，当a>b的结果为负数时则为降序。
III.简单对象自定义属性排序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单对象自定义属性排序</title>
</head>
<body>
<script type="text/javascript">
var friuts=[
{
name:'apple',
price:18.5,
count:10
},
{
name:'pear',
price:1.5,
count:5,
},
{
name:'banana',
price:20.5,
count:20
},
]
console.log(JSON.stringify(friuts));//未排序前
//按价格升序排序
friuts.sort(function(x,y){
return x.price-y.price;
});
console.log(JSON.stringify(friuts));
//按名称排序
friuts.sort(function(x,y){
if(x.name>y.name){
return 1;
}else if(x.name<y.name){
return -1;
}else{
return 0;
}
});
console.log(JSON.stringify(friuts));
</script>
</body>
</html>
IV.通用的排序方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通用的排序方法</title>
</head>
<body>
<script type="text/javascript">
var friuts=[
{
name:'apple',
price:18.5,
count:10
},
{
name:'pear',
price:1.5,
count:5,
},
{
name:'banana',
price:20.5,
count:20
},
]
var sortExp=function(key,isAsc){
return function(x,y){
if(isNaN(key)){
if(x[key]>y[key]){
return 1*(isAsc?1:-1); }else if(x[key]<y[key]){
return -1*(isAsc?1:-1);
}else{
return 0;
} }else{
return (x[key]-y[key])*(isAsc?1:-1)
}
}
}
//价格升序
friuts.sort(sortExp('price',true));
console.log(JSON.stringify(friuts));
//价格降序
friuts.sort(sortExp('price',false));
console.log(JSON.stringify(friuts));
//名称升序
friuts.sort(sortExp('name',true));
console.log(JSON.stringify(friuts));
//名称降序
friuts.sort(sortExp('name',false));
console.log(JSON.stringify(friuts));
//数量升序
friuts.sort(sortExp('count',true));
console.log(JSON.stringify(friuts));
//数量降序
friuts.sort(sortExp('count',false));
console.log(JSON.stringify(friuts)); </script>
</body>
</html>
JS实现数组排序的方法的更多相关文章
- js多种去重的方法总结
第一种是比较常规的方法 思路: 1.构建一个新的数组存放结果 2.for循环中每次从原数组中取出一个元素,用这个元素循环与结果数组对比 3.若结果数组中没有该元素,则存到结果数组中 Array.pro ...
- 由js apply与call方法想到的js数据类型（原始类型和引用类型）
原文地址:由js apply与call方法想到的js数据类型(原始类型和引用类型) js的call方法与apply方法的区别在于第二个参数的不同,他们都有2个参数,第一个为对象(即需要用对象a继承b, ...
- iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ
iOS之在webView中引入本地html,image,js,css文件的方法 2014-12-08 20:00:16CSDN-sky_2016-点击数:10292 项目需求 最近开发的项 ...
- 原生js获取鼠标坐标方法全面讲解-zmq
原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...
- js巧用apply方法实现数组最值以及合并
尽管js的apply方法在平常的使用中并不多见,但是在某些地方使用的还是很有帮助性的,这里就和大家说两个比较实用的例子:1.数组最大最小值 求数组中的最大最小值,js有相应的方法:Math.min() ...
- <js>实现回车键登陆方法，并处理谷歌与火狐不兼容的问题
1.在body中添加onkeydown事件 <body onkeydown="keyLogin(event);">2.使用js相应登陆添加方法//添加回车登陆事件 fu ...
- js中的tostring()方法
http://blog.sina.com.cn/s/blog_85c1dc100101bxgg.html js中的tostring()方法 (2013-11-12 11:07:43) 转载▼ 标签: ...
- js跳转页面方法大全
js跳转页面方法大全<span id="tiao">3</span><a href="javascript:countDown"& ...
- 常见JS(JavaScript)冲突解决方法
1.一般JS冲突解决办法 a．最容易出现的就是js的命名冲突 ①.变量名冲突 变量有全局变量和局部变量当全局变量变量和局部变量名称一致时,就会js冲突,由于变量传递数值或地址不同就会产生JavaScr ...
随机推荐
- Java 安全之：csrf防护实战分析
上文总结了csrf攻击以及一些常用的防护方式,csrf全称Cross-site request forgery(跨站请求伪造),是一类利用信任用户已经获取的注册凭证,绕过后台用户验证,向被攻击网站发送 ...
- 洛谷 P2341 【受欢迎的牛】
题库:洛谷 题号:2341 题目:受欢迎的牛 link:https://www.luogu.org/problemnew/show/P2341 思路:因为奶牛的爱慕关系具有传递性,所以每个环(强连通分 ...
- Codeforces Round #486 (Div. 3)988E. Divisibility by 25技巧暴力||更暴力的分类
传送门 题意:给定一个数,可以对其做交换相邻两个数字的操作.问最少要操作几步,使得可以被25整除. 思路:问题可以转化为,要做几次交换,使得末尾两个数为00或25,50,75: 自己一开始就是先for ...
- There is No Alternative CSU - 2097 最小生成树
Description ICPC (Isles of Coral Park City) consist of several beautiful islands. The citizens reque ...
- Erlang模块ets翻译
概要: 内置的存储 描述: 这个模块是Erlang内置存储BIFs的接口.这些提供了在Erlang运行时系统中存储大量数据的能力,并且能够对数据进行持续的访问时间.(在ordered_set的情况下, ...
- 【Spring】AOP注解方式实现机制
一.概述 二.@EnableAspectJAutoProxy 注解分析 三.分析AnnotationAwareAspectJAutoProxyCreator 四.执行流程 1. registerBea ...
- Scrum团队的最佳规模？
无论你在小型创业公司工作还是在大公司的新产品线工作,当团队人数越来越多时总会达到一个临界点.尽早识别这个临界点可以让您的团队避免进入低效阶段.每个产品都是不同的,团队合作也是如此.因此,拆分团队也需要 ...
- java架构之路-（源码）mybatis基本使用
我们今天先来简单了解一下我们持久层框架,mybatis的使用.而且现在的注解成为趋势,我主要说一下注解方向的使用吧(配置文件也会说) 从使用角度只要是三个部分,mybatis-config.xml,m ...
- @Qualifier高级应用---按类别批量依赖注入【享学Spring】
每篇一句 罗斯:选秀状元可能有水货,但MVP绝对没有 前言 在上篇文章(讲解@LoadBalanced负载均衡)的末尾,我抛出了一个很重要的问题,建议小伙伴自己深入思考一番:本文主要针对此问题,作出一 ...
- Spring Boot 自定义 Banner 教程
我们在启动 SpringBoot 时,控制台会打印 SpringBoot Logo 以及版本信息.有的时候我们需要自己弄个有个性的文本图片.Spring Boot 为我们提供了自定义接口. . ___ ...