【JavaScript】配列の並び替えを行う【sort】 │ コジマノテック

1. はじめに
2. 文字列のソート
3. 数値のソート
4. オブジェクトのソート
5. さいごに

はじめに

コジマです。

配列の並び替えを行うsort関数についてサンプルソースをまとめようかと思います。
JavaScriptのsort関数はちょっとで、
引数２つとり、数値を返す関数を用意することで、

a-b<0・・・aが前
a-b=0・・・なにもしない
a-b>0・・・aが後

という風にソートします。

言葉で言ってもややこしいので、サンプルをたくさん用意した方がわかりやすいかなと思ってこの形をとることにしました。

文字列のソート
数値のソート
オブジェクトのソート

についてまとめます。

文字列のソート

sort関数はデフォルトで文字列のソートをします。

const names = ['Kojima', 'Aida', 'Yoshida', 'Tanaka']

// 文字列のソートは引数不要
names.sort()

console.log(names)
// -> ["Aida", "Kojima", "Tanaka", "Yoshida"]

数値のソート

数値の場合は、引数に関数を入れる必要があります。
そのサンプルをいくつか載せておきます。

const heights = [173, 160, 153, 180]

// 数値のソートは関数が必要
heights.sort(function(a, b){
  const result = a - b
  if(result > 0){
    // aはbの後ろになる
    return 1
  }else if(result < 0){
    // aはbの前になる
    return -1
  }else{
    // 変わらない
    return 0
  }
})

console.log(heights)
// -> [153, 160, 173, 180]

このサンプルは以下のように簡略化可能

const heights = [173, 160, 153, 180]

// 数値のソートは関数が必要
heights.sort(function(a, b){
  // 簡略化
  return a - b
})

console.log(heights)
// -> [153, 160, 173, 180]

逆順にしたいときは-1をかけてあげればよい

const heights = [173, 160, 153, 180]

// 数値のソートは関数が必要
heights.sort(function(a, b){
  // 簡略化
  return (a - b) * -1
})

console.log(heights)
// -> [180, 173, 160, 153]

オブジェクトのソート

オブジェクトをソートする場合は、ソート基準のキーを指定します。

const users = [
  { name: 'Kojima', height: 173 },
  { name: 'Aida', height: 160 },
  { name: 'Yoshida', height: 153 },
  { name: 'Tanaka', height: 180 }
]

// オブジェクトの場合は要素を指定する
// ここではheightでやってみる
users.sort(function(a, b){
  return a.height - b.height
})

console.log(JSON.stringify(users))
// -> [{"name":"Yoshida","height":153},
//     {"name":"Aida","height":160},
//     {"name":"Kojima","height":173},
//     {"name":"Tanaka","height":180}]