javascript 利用Array的sort方法，對Array進行排序（Array裡面放的是對象而不是字串）

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

利用Array的sort方法，對Array進行排序（Array裡面放的是對象而不是字串）。

寫了一個sample程式。

使用了jquery做了一下頁面的處理，亂七八糟一大堆，其實真正有用的代碼也就那麼幾句話。

這篇文章沒什麼技術含量，僅僅是自己做一個實驗，並留作備忘。

（程式是可以跑得，只要引入一個jquery-1.6.2.js的包就可以了。）

而且css寫的也稍微有點兒亂，這個大家看看就可以了，css不太值得借鑒！ ^ - ^

<!DOCTYPE html>  <html>  <head>      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      <script src="./js/jquery-1.6.2.js"></script>        <title>數組的sort</title>    <style>    .studentinfo ul{        list-style: none outside none;    }    .studentinfo li{        clear:both;        height:30px;    }    .studentinfo li span{        width:100px;        display:block;        float:left;        border:solid 1px;        height:100%;    }    .infotitle span{        background-color:yellow;        border-color: transparent #FFFFFF transparent transparent;             text-align:center;            height:100%;    }    .infotitle span div{       height:100%;       margin-top:5px;    }    .upicon{       height:0;       width:0;       border-bottom:10px solid orange;       border-left:10px solid transparent;       border-right:10px solid transparent;       margin-top:3px;       margin-left:2px;       position:absolute;    }    .downicon{       height:0;       width:0;       border-top:10px solid orange;       border-left:10px solid transparent;       border-right:10px solid transparent;       margin-top:3px;       margin-left:2px;       position:absolute;    }    </style>    <script>         // 定義一個學生類    var Student = function() {       this.name;       this.age;       this.score;    };         // 將學生類壓入到待排序的數組中去。    var objArray = new Array();    var student = new Student();    student.name = "AAA";    student.age = 16;    student.score = 98;    objArray.push(student);        student = new Student();    student.name = "BBB";    student.age = 14;    student.score = 92;    objArray.push(student);        student = new Student();    student.name = "CCC";    student.age = 17;    student.score = 96;    objArray.push(student);        // 通過jquery載入畫面    $(function(){        // 設定初始值        for (var i = 0; i < objArray.length; i++) {            $('.studentinfo ul').append($('<li><span>' + objArray[i].name+'</span><span>' + objArray[i].age +'</span><span>' +  objArray[i].score + '</span></li>'));        }                // 按下排序按鈕之後        $('.infotitle span').each(function() {            $(this).click(function() {                                // 三角形箭頭去掉                $('.infotitle b').removeClass('upicon').removeClass('downicon');                $('.infotitle div').css('margin-left','0px');                var sortColum = $(this).attr('id');                var updown = 1;                // 如果本次選擇的排序列和前一次選擇的不一樣                if ($('.studentinfo').attr('sortColum') != sortColum) {                    // 捆綁當前排序列                    $('.studentinfo').attr('sortColum', sortColum);                    // 捆綁當前升降序區分（升序）                    $('.studentinfo').attr('updown', 1);                // 如果本次選擇的排序列和前一次選擇的一樣                } else {                    updown = $('.studentinfo').attr('updown');                    updown = parseInt(updown, 10) * -1;                     //捆綁當前升降序區分（將升序降序對調一下）                    $('.studentinfo').attr('updown', updown);                }                                // 加上向上向下的箭頭                if (updown == 1) {                    $(this).find('b').addClass('upicon');                } else {                    $(this).find('b').addClass('downicon');                }                $(this).find('div').css('margin-left','-10px');                // 真正的排序演算法                objArray = SortArray.sort(sortColum, updown, objArray);                                // 重新設定排序之後的值                $('.studentinfo li:gt(0)').remove();                for (var i = 0; i < objArray.length; i++) {                    $('.studentinfo ul').append($('<li><span>' + objArray[i].name+'</span><span>' + objArray[i].age +'</span><span>' +  objArray[i].score + '</span></li>'));                }            })        })    });          // 排序類    var SortArray = function(){    };    // 排序方法    // sortColum 當前排序列    // updown 升降序區分    // 需要排序的對象數組    SortArray.sort = function(sortColum, updown, objArray) {        return objArray.sort(sortproc);                // 排序內部處理        function sortproc(a, b) {            switch(sortColum) {                case "name" :                    return strcmp(a.name,b.name) * updown;                case "age" :                    return (a.age - b.age) * updown;                case "score" :                    return (a.score - b.score) * updown;            }        }                // 字串比較大小        function strcmp ( str1, str2 ) {            return ( ( str1 == str2 ) ? 0 : ( ( str1 > str2 ) ? 1 : -1 ) );        }    };     </script>  </head>    <body>      <section class="studentinfo">        <ul>            <li class="infotitle"><span id="name"><div><label>姓名</label><b></b></div></span><span id="age"><div><tt>年齡</tt><b></b></div></span><span id="score"><div><tt>得分</tt><b></b></div></span></li>        </ul>    </section></body>  </html>

運行結果如：

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More