Javascript Array sort 陣列排序分類處理

Javascript Array sort 陣列排序分類處理
  1. javascript
    /
  2. Javascript Array sort 陣列排序分類處理

December 16, 2017

·

3 min read

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

javascript