【JavaScript】配列の並び替えを行う【sort】

はじめに

コジマです。

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

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

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

についてまとめます。

文字列のソート

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}]

さいごに

このくらいわかればsort関数については問題ないんじゃないかと思います。

sort関数のリファレンス貼っておくので参考にしてください。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです！

もっと学びたい人はこちら

JavaScriptをもっと学びたいエンジニアのためにおすすめのUdemy講座を紹介いたします！

JavaScript初心者向けの講座です。
HTML、CSSと合わせて学ぶことができます。
フロントエンド開発の基本的な知識を網羅的に学ぶことができます。
個人的には著作権表記についても触れているところが推せますね。
ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！

JavaScriptをより深く学びたい人はこちらがおすすめです。
JavaScript初心者を脱するとよりよいコードを書かなければなりません。
つまずきがちなオブジェクト操作や、非同期処理の仕組みについて学ぶこともできるため、JavaScriptの仕組みから深く学ぶことができます。
【JS】ガチで学びたい人のためのJavaScriptメカニズム

気になった人はぜひ見てみてくださいね！

以上、コジマでした。