javascript在實務上最常用array處理多筆資料,因為彈性大好運用,不論在api取資料、cookie、local storage等,幾乎的用的到。

這邊介紹Array sort,現代網頁技術快速發展,前端經常要用到非同步來取得資料,拿到的陣列資料,經常會需要排序功能,ie.價格排序、新舊排序、同類型排序等。

JavaScript

Array sort 陣列概念

根據w3c介紹 array.sort(compareFunction),參數依照需求帶入不同,另外直接改變陣列資料。

sort會對陣列跑兩個數跑比對條件。例如下面範例第一次會a參數會是Arr[0]、b是Arr[1],然後return a.price-b.price 回傳正數或負數或0,再依據回傳數值調換位置,左至右重複跑到完全符合條件的順序。這就是sort執行的方式。

題外話下面sort內的function則是跑了9次。

ps.return 小於0 將a 放在左邊 b 在右邊、

大於0 將a 放在右邊 b 在左邊、

等於0 不變更位置。

Array sort 範例

針對price數字 陣列排序

let Arr = [{name:'apple',price:50},
{name:'watermelon',price:30},
{name:'mango',price:90},
{name:'banana',price:10},
{name:'peer',price:10}
];
let times = 0;
Arr.sort(function(a,b){
times ++; // 紀錄跑幾次
return a.price - b.price
}); //會針對陣列跑回圈比對
console.log(Arr)
// [{name: "banana", price: 10},
// {name: "peer", price: 20}
// ......
// {name: "mango", price: 90}]
console.log(times) // 9次

針對字串name 陣列排序

let Arr = [{name:'apple',price:50},
{name:'watermelon',price:30},
{name:'mango',price:90},
{name:'banana',price:10},
{name:'peer',price:10}
];
Arr.sort(function(a,b){
if(a.name > b.name) {
return 1; //a 往右 b往左
}else if(a.name < b.name) {
return -1; //a 往左 b往右
}else {
return 0; // 不變順序
}
});
console.log(Arr)
// [{name: "apple", price: 50},
// ......
// {name: "watermelon", price: 30}]

以上就是javascript sort的排序,如果不希望重新要資料,前端是可以用這方法處理排序,如果不是上萬筆的話,是可以來用用client端效能。

建議實際跑一次sort function,用chrome debug 來看看到底葫蘆裡再跑啥米東西。