JavaScript学习总结之数组排序的方法

本文主要是介绍JavaScript学习总结之数组排序的方法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

先点赞后关注，防止会迷路
寄语：没有一个冬天不会过去，没有一个春天不会到来。

前言

排序是计算机内经常进行的一种操作，其目的是将一组无序的记录序列调整为有序的记录序列，当然排序也是算法中的一种，JavaScript内置的sort函数是多种排序算法的集合，数组在原数组上进行排序。JavaScript实现多维数组、对象数组排序，其实用的就是原生的sort()方法，用于对数组的元素进行排序。

简单排序

 1<!DOCTYPE html>
 2<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>
16</html>
复制代码

虽说我们实现了排序，也达到了我们想要的结果，但是这种排序有问题，我们看下下面这个例子。

 1<!DOCTYPE html>
 2<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>
22</html>
复制代码

为什么呢？且听我一一道来，

本身sort()这个方法是没有问题的，在默认情况下，sort()方法按升序排列数组项，即最小的值位于最前面，最大的值排在最后面。为了实现升序，sort()方法会调用每个数组项的toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值，sort()方法比较的也是字符串。为了更好的实现排序，sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于那个值的前面，

简单数组自定义排序

 1<!DOCTYPE html>
 2<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>
35</html>
复制代码

在这里我们定义了一个compare比较函数，

当a>b的结果为整数时则为升序，当a>b的结果为负数时则为降序。

简单对象自定义属性排序

 1<!DOCTYPE html>
 2<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>
45</html>
复制代码

通用的排序方法

 1<!DOCTYPE html>
 2<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>
65</html>
复制代码

结尾

如果觉得本篇文章对您有用的话，麻烦您给笔者点亮那个点赞按钮。

对于二太子木吒(一只流浪的KK)这个暖男来说：真的非常有用，您的支持就是我前进的动力，我们下篇文章见。

注意：博客园、CSDN等其它网站上含有一只流浪的KK的呢称，均属于笔者，至于为什么使用二太子木吒这个昵称，我觉得到时候会有相关文章进行解释。

作者：一只流浪的KK|二太子木吒

原创不易，请勿白嫖。
二太子木吒，一个在互联网前端苟且偷生的小白一枚，专注于前端开发，善于分享技术。
如需转载，请联系作者或者保留原文链接，微信公众号搜索二太子木吒

这篇关于JavaScript学习总结之数组排序的方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Java教程

JavaScript学习总结之数组排序的方法

前言

简单排序

简单数组自定义排序

简单对象自定义属性排序

通用的排序方法

结尾

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯