【JavaScript】reverse()で配列や連想配列の並び順を逆順にする!

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

JavaScriptで配列の要素の並び替える関数として、reverse()があります。

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

例えば、「[1, 2, 3, 4]」という配列に使用すると、「[4, 3, 2, 1]」というように、配列の要素を逆にして並び替えることができます。

要素を逆にして並び替えることから、空配列や1つしかない配列に対して使用すると、そのままの配列が返されるようになります。

こちらの関数は、どのような配列にも使用できると思いがちですが、連想配列に直接使用することはできませんので注意してください。

しかし、どうしても並び替えたい場合は、キーと値を配列にそれぞれ取り出してからreverse()を使用するようにしましょう。

また、reverse()は1次元配列だけでなく、2次元配列や3次元配列のような多次元配列にも使用できたりします。

今回はJavaScriptのreverse()で配列や連想配列の並び順を逆順にする方法について紹介していきます。

この記事はこんな方におすすめ
・配列の並びを逆順にしたい人
・連想配列の並びを逆順にしたい人




reverse()とは

冒頭でも言いましたが、reverse()とは指定した配列の要素の順番を逆に並び替えるメソッドになります。

逆順になるため、一番右が先頭で一番左が最後尾になるよう並び替えられます。

reverse()の書き方

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

配列名の後ろにreverse()を指定することで、指定した配列の要素の並び順を逆順にすることができます。

reverse()のパラメータ

reverse()にパラメータはありません。

reverse()の返り値

reverse()の返り値は逆順になった後の配列となります。

reverse()で配列の要素を逆順にするサンプルコード

reverse()で配列の要素を逆順にするサンプルコードをご紹介します。

ここでは下記の3つの場合でreverse()を使用します。

  1. 配列に複数の要素が存在する場合
  2. 配列に要素が1つだけ存在する場合
  3. 配列に要素が存在しない場合

配列に複数の要素が存在する場合

配列に複数の要素が存在する場合にreverse()を使用してみます。

⚫︎ Main.js

⚫︎ 実行結果

配列に複数の要素が存在する場合にreverse()を使用した結果

複数の要素が存在するため、reverse()によって配列の要素の並び順が逆順に並び替えられます。

そのため、配列の先頭が「JavaScript」から「Swift」へと並び替えられて表示されています。

配列に要素が1つだけ存在する場合

配列に要素が1つだけ存在する場合にreverse()を使用してみます。

⚫︎ Main.js

⚫︎ 実行結果

配列に要素が1つだけ存在する場合にreverse()を使用した結果

配列に要素が1つしかないため、reverse()を使用しても逆順に並び替えられません。

そのため、「JavaScript」のみの配列が表示されています。

配列に要素が存在しない場合

配列に要素が存在しない場合にreverse()を使用してみます。

⚫︎ Main.js

⚫︎ 実行結果

配列に要素が存在しない場合にreverse()を使用した結果

配列に要素が存在しないため、こちらもreverse()を使用しても逆順に並び替えられません。

そのため、空の配列が表示されています。

reverse()で連想配列の要素を逆順にするサンプルコード

reverse()で連想配列の要素を逆順にするサンプルコードをご紹介します。

結論からいうと、reverse()は連想配列に使用することができません。

しかし、値やキーのみを配列形式で取り出すと、使用することができます。

そのため、今回は値やキーのみを取り出した配列に対してreverse()を使用します。

連想配列の値を逆順にする場合

連想配列の値を逆順にする場合にreverse()を使用してみます。

⚫︎ Main.js

⚫︎ 実行結果

reverse()で連想配列の値を逆順にした結果

reverse()によって連想配列の値の配列の要素の並び順を逆順に並び替えています。

また、Object.values()によって連想配列の値を配列にしています。

そのため、配列の先頭が「React」から「Flutter」へと並び替えられて表示されています。

連想配列のキーを逆順にする場合

連想配列のキーを逆順にする場合にreverse()を使用してみます。

⚫︎ Main.js

⚫︎ 実行結果

reverse()で連想配列のキーを逆順にした結果

reverse()によって連想配列の値の配列の要素の並び順を逆順に並び替えています。

また、Object.keys()によって連想配列のキーを配列にしています。

そのため、配列の先頭が「JavaScript」から「Swift」へと並び替えられて表示されています。

reverse()で多次元配列の要素を逆順にするサンプルコード

reverse()で多次元配列の要素を逆順にするサンプルコードをご紹介します。

2次元配列に使用する場合

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

⚫︎ Main.js

⚫︎ 実行結果

reverse()を2次元配列に使用した結果

reverse()によって2次元配列の要素が逆順に並び替えられています。

また、配列の後ろにインデックスを1つ指定することで、2次元配列の中にある1次元配列の要素を逆順に並び替えることができます。

3次元配列に使用する場合

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

⚫︎ Main.js

⚫︎ 実行結果

reverse()を3次元配列に使用した結果

reverse()によって3次元配列の要素が逆順に並び替えられています。

そして、配列の後ろにインデックスを1つ指定することで、3次元配列の中にある2次元配列の要素を逆順に並び替えることができます。

また、配列の後ろにインデックスを2つ指定することで、3次元配列の中にある1次元配列の要素を逆順に並び替えることができます。

配列の要素を昇順や降順で並び替える場合

配列の要素を昇順や降順で並び替える場合は、sort()を使用します。

sort()とは配列を比較関数に従って、並び替えることができるメソッドになります。

比較関数によって並び替える基準を設定することができるので、昇順、降順に並び替えることが可能になります。

⚫︎ Main.js

⚫︎ 実行結果

sort()で配列の要素を昇順や降順で並び替えた結果

sort()によって配列の要素が昇順や降順で並び替えられています。

まとめ

⚫︎ reverse()とは指定した配列の要素の順番を逆に並び替えるメソッドである

⚫︎ reverse()にはパラメータはない

⚫︎ reverse()は、逆順になった後の配列を返り値として返す

⚫︎ 配列に複数の要素が存在する場合にreverse()を使用すると、逆順になって配列が返される

⚫︎ 配列に要素が1つだけ存在する場合にreverse()を使用すると、配列がそのまま返される

⚫︎ 配列に要素が存在しない場合にreverse()を使用すると、空の配列が返される

⚫︎ reverse()で連想配列の要素の並びを逆順にすることができる
(直接使用できないため、値とキーで分ける必要がある)

⚫︎ reverse()は多次元配列の要素の並びを逆順にすることができる

⚫︎ 配列の要素を昇順や降順で並び替える場合は、sort()を使用する

コメントを残す

メールアドレスが公開されることはありません。