javascript实现数组排序的方法

怪獣發表於 2019-10-5 13:40:00

<h1>前言</h1>
排序是计算机内经常进行的一种操作，其目的是将一组“无序”的记录序列调整为“有序”的记录序列，当然排序也是算法中的一种，javascript内置的sort函数是多种排序算法的集合，数组在原数组上进行排序。JavaScript实现多维数组、对象数组排序，其实用的就是原生的sort()方法，用于对数组的元素进行排序。
<h4>I.简单排序</h4>
<div class="cnblogs_code">
<pre><!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></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1475945/201910/1475945-20191005124649407-1143849366.png" alt="">
 虽说我们实现了排序，也达到了我们想要的结果，但是这种排序有问题，我们看下下面这个例子
<div class="cnblogs_code">
<pre><!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></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1475945/201910/1475945-20191005125722829-1650646464.png" alt="">
 为什么呢？且听我一一道来，本身sort()这个方法是没有问题的，在默认情况下，sort()方法按升序排列数组项，即最小的值位于最前面，最大的值排在最后面。为了实现升序，sort()方法会调用每个数组项的toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值，sort()方法比较的也是字符串。为了更好的实现排序，sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于那个值的前面，我们看下下面的案例。
<h4>II.简单数组自定义排序</h4>
<div class="cnblogs_code">
<pre><!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></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1475945/201910/1475945-20191005131756187-997366661.png" alt="">
在这里我们定义了一个compare比较函数，当a>b的结果为整数时则为升序，当a>b的结果为负数时则为降序。
<h4>III.简单对象自定义属性排序</h4>
<div class="cnblogs_code">
<pre><!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></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1475945/201910/1475945-20191005132712972-1058804338.png" alt="">
<h4>IV.通用的排序方法</h4>
<div class="cnblogs_code">
<pre><!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>y){
 return 1*(isAsc?1:-1);

 }else if(x<y){
 return -1*(isAsc?1:-1);
 }else{
 return 0;
 }

 }else{
 return (x-y)*(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></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1475945/201910/1475945-20191005133657531-329840558.png" alt="">

</div>
<div id="MySignature" role="contentinfo">
<table style="background: rgb(230, 250, 230); padding: 10px 10px 10px 10px; border: 1px dashed rgb(224, 224, 224); font-family: 微软雅黑; font-size: 13px;width:100%" >
<tdstyle="padding-left:20px">作者：一只流浪的kk 
 出处：https://www.cnblogs.com/jjgw/ 
 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留原文链接，否则将追究法律责任 
</td>
<td align="right">
 <div id="qr_bg" style="text-align:center">
<img src="https://mp.weixin.qq.com/mp/qrcode?scene=10000004&size=102&__biz=MzU1ODg0MTQ4Mw==&mid=2247483677&idx=1&sn=01da5cff4b650661576c0fdf3c925530&send_time=">
微信扫一扫 关注公众号
</div>
</td>
</table> 
来源：https://www.cnblogs.com/jjgw/p/11129913.html

頁: [1]

琼殿技术论坛's Archiver

javascript实现数组排序的方法