JS實用ToolKit--NO1.陣列排序
阿新 • • 發佈:2018-10-31
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();">
<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);
}
好了,到現在降序排序以及升序排序陣列的方法都已經完成,點選試試吧!