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