【JavaScript】sort()で指定した配列や連想配列の値を並び替える!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2022年10月29日に投稿されました。)

JavaScriptで配列の値を並び替える方法としてsort()があります。

sort()とは、指定した配列の値を並び替えるメソッドになります。

値を並び替えることから、「並び替えた後の配列」を返り値として返すようになります。

しかし、sort()を使用すると元の配列の順番も変わってしまうので注意が必要です。

そして、sort()にはパラメータとして関数を使用することができ、値の昇順や降順に並び替えることができます。

また、配列だけでなく、オブジェクトにも使用することができるので、複数のデータが格納された変数や定数の中身を整理したい場合はsort()を使用しましょう。

今回はJavaScriptのsort()で指定した配列や連想配列の値を並び替える方法について紹介していきます。

この記事はこんな方におすすめ
・配列の値を並び替えて画面に表示したい場合
・配列の中身を整理したい場合

sort()とは

sort()とは、指定した配列の値の順番を並び替えるメソッドになります。

あいうえお順やアルファベット順に並び替えますが、実際にはUnicodeの順番に並び替えるようになります。

しかし、使用すると元の配列の並び順も変更してしまい、バックアップが取れなくなるので注意してください。(破壊的メソッド)

sort()の処理イメージ""

sort()の書き方

sort()の書き方は下記のようになります。

対象の配列の後ろにsort()と追記します。

また、任意なパラメータを1つ指定することができます。

sort()のパラメータ

sort()のパラメータは下記のようになります。

  1. コールバック関数(任意):
    並び替える処理を関数で指定する

sort()を使用する際に、必須パラメータはありません。

しかし、任意なパラメータとして「コールバック関数」を指定することができます。

sort()の返り値

sort()の返り値は「並び替えた後の配列」となります。

そして、元の配列の並び順も変更されてしまいます。

sort()で指定した配列の値を並び替えるサンプルコード

sort()で指定した配列の値を並び替えるサンプルコードをご紹介します。

ここでは、下記の4つのパターンでsort()を使用します。

  1. アルファべの値を並び替える場合
  2. ひらがなの値を並び替える場合
  3. カタカナの値を並び替える場合
  4. 数値の値を並び替える場合

アルファベットの値を並び替える場合

アルファべットの値を並び替える場合にsort()を使用します。

⚫︎ Main.js

実行結果

アルファベットの値を並び替える場合にsort()を使用した結果

sort()によってアルファベットの値を並び替えています。

そのため「Dracovish」が先頭になり、「Pikachu」が末尾になって表示されています。

また、大文字と小文字では大文字の方が先に並び替えられるようになります。

ひらがなの値を並び替える場合

ひらがなの値を並び替える場合にsort()を使用します。

⚫︎ Main.js

実行結果

ひらがなの値を並び替える場合にsort()を使用した結果

sort()によってひらがなの値を並び替えています。

そのため「かいりゅー」が先頭になり、「るかりお」が末尾になって表示されています。

カタカナの値を並び替える場合

カタカナの値を並び替える場合にsort()を使用します。

⚫︎ Main.js

実行結果

カタカナの値を並び替える場合にsort()を使用した結果

sort()によってカタカナの値を並び替えています。

そのため「カイリュー」が先頭になり、「ルカリオ」が末尾になって表示されています。

数値の値を並び替える場合

数値の値を並び替える場合にsort()を使用します。

⚫︎ Main.js

実行結果

数値の値を並び替える場合にsort()を使用した結果

sort()によって数値の値の並び順を小さい順に並び替えています。

そのため「1」が先頭になり、「6」が末尾になって表示されています。

sort()で連想配列の値を並び替えるサンプルード

sort()で連想配列の値を並び替えるサンプルードについてご紹介します。

sort()は、連想配列に直接使用することができません。

そのため、キーと値を別々の配列に分けて使用する必要があります。

連想配列のキーを並び替える場合

連想配列のキーを並び替える場合にsort()を使用します。

キーを取り出す場合はObject.keys()を使用します。

⚫︎ Main.js

実行結果

連想配列のキーを並び替える場合にsort()を使用した結果

sort()によって連想配列のキーを並び替えています。

そのため、「001」が先頭になり、「005」が末尾になって表示されています。

連想配列の値を並び替える場合

連想配列の値を並び替える場合にsort()を使用します。

連想配列の値を取り出す場合はObject.values()を使用します。

⚫︎ Main.js

実行結果

連想配列の値を並び替える場合にsort()を使用した結果

sort()によって連想配列の値を並び替えています。

そのため、「ヒトカゲ」が先頭になり、「リザードン」が末尾になって表示されています。

sort()でコールバック関数を指定して配列の値を並び替える場合

コールバック関数を指定してsort()で値の並び順を変更してみます。

コールバック関数を使用することで、並び順の基準を設定することができます。

また、sort()のコールバック関数は「比較関数」とも呼ばれています。

昇順で並び替える場合

昇順で並び替える場合は、sort()のコールバック関数で返す返り値を「0未満の値」に設定します。

⚫︎ Main.js

実行結果

sort()のコールバック関数を指定して昇順で並び替えた結果

sort()によって、配列の値を昇順で並び替えています。

そのため、1番大きい数値の「7890」が先頭になり、1番小さい「5」が末尾になって表示されています。

降順で並び替える場合

昇順で並び替える場合は、sort()のコールバック関数で返す返り値を「0より大きい値」に設定します。

⚫︎ Main.js

実行結果

sort()でコールバック関数を指定して降順で並び替えた結果

sort()によって、配列の値を降順で並び替えています。

そのため、1番小さい数値の「5」が先頭になり、1番大きい「7890」が末尾になって表示されています。

sort()で多次元配列の値を並び替える場合

sort()で多次元配列の値を並び替えてみます。

2次元配列の場合

2次元配列に対してsort()を使用します。

⚫︎ Main.js

実行結果

sort()で2次元配列の値を並び替えた結果

sort()によって2次元配列内にある配列の値を並び替えています。

また、map()の中でsort()を使用すると2次元配列内にある全ての値を並び替えることができます。

もし、map()について詳しく知りたい場合は下記の記事をご参考下さい。

3次元配列の場合

3次元配列に対してsort()を使用します。

⚫︎ Main.js

実行結果

sort()で3次元配列の値を並び替えた結果

sort()によって3次元配列にある配列の値を並び替えています。

また、こちらもmap()の中でsort()を使用すると3次元配列内にある全ての値を並び替えることができます。

sort()でオブジェクトの値を並び替える場合

sort()は、オブジェクトの値を並び替える場合にも使用することができます。

例えば、オブジェクトのデータをidの小さい順に並び替えたとします。

⚫︎ Main.js

実行結果

sort()ででオブジェクトの値を並び替えた結果

sort()によってオブジェクトのデータの並び順をidによって並び替えています。

そのため、idが「007」である「ゼニガメ」が先頭になり、idが「012」である「バタフリー」が末尾になっています。

もし、オブジェクトについて詳しく知りたい場合は下記の記事をご参考ください。

sort()を使用した実際のケース

sort()を使用した実際のケースについてご紹介します。

例えば、ボタンを押してゲーム機の値段の高い順や低い順に並び替えることができるような画面を作成することができます。

⚫︎ index.html

⚫︎ main.js

実行結果

sort()でゲーム機の値段の並び替えができる画面を作成した結果

sort()によって配列の値のから単一の値を並び替えています。

そのため、「安い順」のボタンを押すと、価格が安い順に表示され、「高い順」のボタンを押すと、価格が高い順に表示されます。

また、今回はcreateElement()を使用してliタグの要素を作成しています。

もし、createElement()について詳しく知りたい場合は下記の記事をご参考ください。

sort()で配列の値を文字列の順番で並び替える場合

sort()で配列の値を文字列の順番で並び替える場合は、localeCompare()を使用します。

localeCompare()とは、文字列の順番を比較するメソッドであり、使用することでsort()内でアルファベットの大文字小文字関係なく値を並び替えることができるようになります。

⚫︎ Main.js

実行結果

localeCompare()でルファベットの大文字小文字関係なく値を並び替えた結果

localeCompare()によって、アルファベットの大文字小文字関係なくsort()で値を並び替えています。

そのため、「Dracovish」先頭になり、「pikachu」が末尾になって表示されています。

まとめ

⚫︎ sort()とは配列の順番を並び替えるメソッドである

⚫︎ sort()は下記のようなパラメータを指定して使用する
・コールバック関数(任意)

⚫︎ アルファベットの値にsort()を使用すると、大文字のAからZ、小文字のAからZの順番で並び替える

⚫︎ ひらがなの値にsort()を使用すると、あいうえおの順番で並び替える

⚫︎ カタカナ値にsort()を使用すると、アイウエオの順番で並び替える

⚫︎ 数値の値にsort()を使用すると、1から9の順番で並び変える

⚫︎ sort()にコールバック関数を指定して使用すると、並び替えを設定することができる
(昇順や降順の並び替えが可能になる)

⚫︎ sort()で多次元配列の値を並び替えることができる
(多次元配列の全ての値を対象とするならmap()の中でsort()を使用する)

⚫︎ sort()でオブジェクトの中にあるデータを並び替えることができる

⚫︎ アルファベットの大文字小文字関係なく、配列の値を並び替えるにはsort()の中でlocaleCompare()を使用する