tamakipedia

フロントエンドエンジニア。Typescriptもう特訓中です。一日の振り返りや学んだことをちょっとずつ吐いています。

【typescript】sortを利用して配列を並び替える

sort()メソッドは、配列の要素をソートする関数のこと。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

一般的なuse case

配列にsort() を実行すると昇順に並び替えてくれます。
定義した配列そのものが変更されているので、破壊的変更が加わっていることになります。

const nameList = ["Batto","Atsuki","chieko","Den"];

console.log(nameList.sort())

//["Atsuki", "Batto", "Chieko", "Den"] 

非破壊的ソート

nameList.sort()だと、nameListそのものの配列の順序が変わってしまいます。
それだとイミュータブルの観点からデバックしにくくなってしまいます。

残余構文を利用して、以下のように書き換え

const nameList = ["Batto","Atsuki","chieko","Den"];

const newNameArray = [...nameArray].sort()

//newNameArray → ["Atsuki", "Batto", "Chieko", "Den"] 
//nameArrayはそのまま

ミューテーションについてはこちらの関数型プログラミングお姉さんの動画がおすすめ(笑)
https://www.youtube.com/watch?v=e-5obm1G_FY

比較関数

実はsort()の第一引数に関数を追加することで並び順を制御することができます。

デフォルトの昇順は以下のような比較関数になります。

nameList.sort((a,b) => a + b) //昇順

そして降順は

nameList.sort((a,b) => a - b) //昇順

配列の中身をオブジェクトにし、特定の値でソート

以下のようなオブジェクトでもソートできるということ。。。すごいですよね、、

const stations = [
  {name: "池袋", users: 55223},
  {name: "新宿", users: 10000},
  {name: "渋谷", users: 300},
  {name: "東京", users: 400000},
]

const stationsOriginal = stations.sort((a, b)=> a.users - b.users)


//結果
const stations = [{
  "name": "渋谷",
  "users": 300
}, {
  "name": "新宿",
  "users": 10000
}, {
  "name": "池袋",
  "users": 55223
}, {
  "name": "東京",
  "users": 400000
}] 

//うおおお