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

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

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 來看看到底葫蘆裡再跑啥米東西。