javascript實現數組排序的方法

時間 2019-11-05

原文原文鏈接

前言

排序是計算機內常常進行的一種操做，其目的是將一組「無序」的記錄序列調整爲「有序」的記錄序列，固然排序也是算法中的一種，javascript內置的sort函數是多種排序算法的集合，數組在原數組上進行排序。JavaScript實現多維數組、對象數組排序，其實用的就是原生的sort()方法，用於對數組的元素進行排序。javascript

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>

雖然說咱們實現了排序，也達到了咱們想要的結果，可是這種排序有問題，咱們看下下面這個例子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()方法能夠接收一個比較函數做爲參數，以便咱們指定哪一個值位於那個值的前面，咱們看下下面的案例。java

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>