先点赞后关注，防止会迷路
寄语：没有一个冬天不会过去，没有一个春天不会到来。
前言简单排序简单数组自定义排序简单对象自定义属性排序通用的排序方法结尾
前言
排序是计算机内经常进行的一种操作，其目的是将一组无序的记录序列调整为有序的记录序列，当然排序也是算法中的一种，JavaScript内置的sort函数是多种排序算法的集合，数组在原数组上进行排序。JavaScript实现多维数组、对象数组排序，其实用的就是原生的sort()方法，用于对数组的元素进行排序。
简单排序
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="UTF-8">
5 <title>简单排序</title>
6 </head>
7 <body>
8 <script type="text/javascript">
9 var numbers=[4,6,8,0,1,2,3,7,9];
10 numbers.sort();//调用数组内置排序方法
11 console.log(numbers);//0,1,2,3,4,6,7,8,9
12 numbers.reverse();//将数组进行反转
13 console.log(numbers);//9,8,7,6,4,3,2,1,0
14 </script>
15 </body>
16</html>
虽说我们实现了排序，也达到了我们想要的结果，但是这种排序有问题，我们看下下面这个例子。
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="UTF-8">
5 <title>简单排序</title>
6 </head>
7 <body>
8 <script type="text/javascript">
9 var numbers=[4,6,8,0,1,2,3,7,9];
10 numbers.sort();//调用数组内置排序方法
11 console.log(numbers);//0,1,2,3,4,6,7,8,9
12 numbers.reverse();//将数组进行反转
13 console.log(numbers);//9,8,7,6,4,3,2,1,0
14
15 var num=[0,1,5,10,15];
16 num.sort();//调用数组内置的排序方法
17 console.log(num);//0,1,10,15,5
18 num.reverse();//调用数组内置的反转方法
19 console.log(num);//5,15,10,1,0
20 </script>
21 </body>
22</html>
为什么呢？且听我一一道来，
本身sort()这个方法是没有问题的，在默认情况下，sort()方法按升序排列数组项，即最小的值位于最前面，最大的值排在最后面。为了实现升序，sort()方法会调用每个数组项的toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值，sort()方法比较的也是字符串。为了更好的实现排序，sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于那个值的前面，
简单数组自定义排序
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="UTF-8">
5 <title>简单数组自定义排序</title>
6 </head>
7 <body>
8 <script type="text/javascript">
9 var number=[0,1,10,15,5];
10 function arrAsc(a,b){ //实现数组升序的方法
11 if(a>b){
12 return 1;
13 }else if(a<b){
14 return -1;
15 }else{
16 return 0;
17 }
18 }
19 number.sort(arrAsc);//调用数组升序的方法
20 console.log(number);//0.1,5,10,15
21 function arrDesc(a,b){ //实现数组降序的方法
22 if(a>b){
23 return -1;
24 }else if(a<b){
25 return 1;
26 }else{
27 return 0;
28 }
29 }
30 number.sort(arrDesc);//调用数组降序的方法
31 console.log(number);//15,10,5,1,0
32
33 </script>
34 </body>
35</html>
在这里我们定义了一个compare比较函数，
当a>b的结果为整数时则为升序，当a>b的结果为负数时则为降序。
简单对象自定义属性排序
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="UTF-8">
5 <title>简单对象自定义属性排序</title>
6 </head>
7 <body>
8 <script type="text/javascript">
9 var friuts=[
10 {
11 name:'apple',
12 price:18.5,
13 count:10
14 },
15 {
16 name:'pear',
17 price:1.5,
18 count:5,
19 },
20 {
21 name:'banana',
22 price:20.5,
23 count:20
24 },
25 ]
26 console.log(JSON.stringify(friuts));//未排序前
27 //按价格升序排序
28 friuts.sort(function(x,y){
29 return x.price-y.price;
30 });
31 console.log(JSON.stringify(friuts));
32 //按名称排序
33 friuts.sort(function(x,y){
34 if(x.name>y.name){
35 return 1;
36 }else if(x.name<y.name){
37 return -1;
38 }else{
39 return 0;
40 }
41 });
42 console.log(JSON.stringify(friuts));
43 </script>
44 </body>
45</html>
通用的排序方法
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="UTF-8">
5 <title>通用的排序方法</title>
6 </head>
7 <body>
8 <script type="text/javascript">
9 var friuts=[
10 {
11 name:'apple',
12 price:18.5,
13 count:10
14 },
15 {
16 name:'pear',
17 price:1.5,
18 count:5,
19 },
20 {
21 name:'banana',
22 price:20.5,
23 count:20
24 },
25 ]
26 var sortExp=function(key,isAsc){
27 return function(x,y){
28 if(isNaN(key)){
29 if(x[key]>y[key]){
30 return 1*(isAsc?1:-1);
31
32 }else if(x[key]<y[key]){
33 return -1*(isAsc?1:-1);
34 }else{
35 return 0;
36 }
37
38 }else{
39 return (x[key]-y[key])*(isAsc?1:-1)
40 }
41 }
42 }
43 //价格升序
44 friuts.sort(sortExp('price',true));
45 console.log(JSON.stringify(friuts));
46 //价格降序
47 friuts.sort(sortExp('price',false));
48 console.log(JSON.stringify(friuts));
49 //名称升序
50 friuts.sort(sortExp('name',true));
51 console.log(JSON.stringify(friuts));
52 //名称降序
53 friuts.sort(sortExp('name',false));
54 console.log(JSON.stringify(friuts));
55 //数量升序
56 friuts.sort(sortExp('count',true));
57 console.log(JSON.stringify(friuts));
58 //数量降序
59 friuts.sort(sortExp('count',false));
60 console.log(JSON.stringify(friuts));
61
62
63 </script>
64 </body>
65</html>
结尾
如果觉得本篇文章对您有用的话，麻烦您给笔者点亮那个点赞按钮。
对于二太子木吒(一只流浪的KK)这个暖男来说：真的非常有用，您的支持就是我前进的动力，我们下篇文章见。
注意：博客园、CSDN等其它网站上含有一只流浪的KK的呢称，均属于笔者，至于为什么使用二太子木吒这个昵称，我觉得到时候会有相关文章进行解释。
作者：一只流浪的KK|二太子木吒
原创不易，请勿白嫖。
二太子木吒，一个在互联网前端苟且偷生的小白一枚，专注于前端开发，善于分享技术。
如需转载，请联系作者或者保留原文链接，微信公众号搜索二太子木吒
