1. 程式人生 > >JS實用ToolKit--NO1.陣列排序

JS實用ToolKit--NO1.陣列排序

JS實用ToolKit–NO1.陣列排序

首先,核心的JS程式碼塊,一個降序的方法,一個升序的方法

    //降序排序陣列物件
    var compareDesc = function (prop) {
    return function (obj1, obj2) {
        var val1 = obj1[prop];
        var val2 = obj2[prop];
        if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
            val1 = Number
(val1); val2 = Number(val2); } if (val1 > val2) { return -1; } else if (val1 < val2) { return 1; } else { return 0; } } }

    //升序排序陣列的方法
    var compareAsc = function (prop) {
    return function (obj1, obj2)
{
var val1 = obj1[prop]; var val2 = obj2[prop]; if (!isNaN(Number(val1)) && !isNaN(Number(val2))) { val1 = Number(val1); val2 = Number(val2); } if (val1 < val2) { return -1; } else if (val1 > val2) { return
1; } else { return 0; } } }

緊接著,我們需要用來顯示的HTML標籤,並將排序方法寫入標籤中

<span style="color:red" id="spanTip"></span><br/>
<input type='button' value="降序排序" onclick="SortArrayDesc();"> &nbsp;&nbsp;
<input type='button' value="升序排序" onclick="SortArrayAsc();">   

在例子中,我們在標籤中宣告全域性陣列變數var obj=[].
接著,在頁面載入函式中寫入以下程式碼

window.onload=function(){
    obj=[{"a":"test1","b":1,"c":"2016-1-5"},{"a":"test2","b":5,"c":"2016-1-5"},{"a":"test3","b":2,"c":"2016-1-5"},{"a":"test4","b":3,"c":"2016-1-5"}];
    var temp="";
    for(var i=0;i<obj.length;i++)
    {
        temp+=obj[i].b.toLocaleString()+',';
    }
    document.getElementById("spanTip").innerHTML="原陣列b欄位順序:"+temp.substring(0,temp.length-1);
}


好了,到現在降序排序以及升序排序陣列的方法都已經完成,點選試試吧!