js數組排序實用方法集錦

前言：

據說程序員三個月就能忘記自己寫的代碼，所以最好是在有空的時候及時做些總結，記錄下來，這樣后邊遇到類似問題的話，就可以直接先查看自己的博客了。寫技術博客，對自己是一種總結，對別人，是一種參考。

對於數組排序，這里主要介紹sort()方法（sort基本上已經能滿足絕大多數數組的排序了）。

array.sort():

sort() 方法用於對數組的元素進行排序，默認按“字母”升序，即使數組的元素是數字，因此，對於數字，就需要特殊的寫法了。

普通數組：

1. 字符串數組：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();//默認升序　　Apple,Banana,Mango,Orange
fruits.sort().reverse();//降序　　Orange,Mango,Banana,Apple

2. 數字數組：

由於sort()方法默認按“字母”升序，所以對於數字組成的數組，就需要使用特殊的寫法來進行排序了。

先上代碼，具體寫法如下：

arr.sort((a,b)=>{return a-b})//升序
arr.sort((a,b)=>{return b-a})//降序

如上，使用數字對數組進行排序，就需要通過一個函數作為參數來調用。

對象數組：

使用場景——已知某品牌門店列表數據（含距當前位置的距離），需要按距離由僅及遠排序，具體實現方法如下：

var shoplist = [{
  "name": "上塘中海錦城",
  "distance": 14307.0275
}, {
  "name": "漢堡王深圳華強北店",
  "distance": 16606.5901
}, {
  "name": "漢堡王深圳蔡屋圍店",
  "distance": 18062.4395
}, {
  "name": "漢堡王深圳金豐城店",
  "distance": 18468.4439
}, {
  "name": "漢堡王深圳地王店",
  "distance": 18484.8283
}, {
  "name": "漢堡王深圳龍崗寶能店",
  "distance": 39006.9269
}, {
  "name": "漢堡王深圳龍華綠景香頌店",
  "distance": 15356.4863
}, {
  "name": "漢堡王深圳西薈城店",
  "distance": 24990.1325
}, {
  "name": "漢堡王深圳魅力時代店",
  "distance": 8228.8474
}, {
  "name": "漢堡王深圳福華三路店",
  "distance": 12693.439
}]
shoplist.sort((a, b) => {
  return a.distance - b.distance
})

如上，關鍵代碼就一句： 

shoplist.sort((a,b)=>{return a.distance-b.distance})

簡單分析不難發現，這跟上面數字數組排序用法是一樣的，只不過是這里使用了數組中對象元素的 distance 這一數字字段進行比較排序的。

經過排序后的數據如下圖，門店列表已經按距離字段進行升序排列，根據這些排序后的數據進行展示就OK了：

反序排序：

與上面排序不同，反轉排序方法 reverse() 將一個數組中的元素的順序反轉排序。

這個方法單獨使用的場景不多，但是結合sort()排序方法使用的場景比較多一些，特別是對於一些復雜的數組。

如網上商城商品搜索列表頁面的正序、反序，有根據價格的，有根據銷量的，還有根據評價的，如果單單是正序，或者是排序，那么直接用sort()方法就好了。但如果正序排序之后又需要進行反序排列，那么直接用reverse()進行反轉就OK了，沒必要再用sort()進行反序排列，無論是在寫法上，還是計算速度上都要快好多的：

//1. sort()進行反序
shoplist.sort((a,b)=>{return b.distance-a.distance})
//2. reverse()反序
shoplist.reverse()