JavaScript・TypeScriptで配列の中身を逆順にする方法

当ページのリンクには広告が含まれている場合があります。

配列を扱っている際に、中身を逆順にしたいと思ったことはありませんか?

場面としては、サーバーからのレスポンスが昇順でくるのかと思っていたら降順だった、とかですかね。

私もプログラミングを始めたばかりのある時に、初めて逆順にしたいと思ったことがありました。

始めは自力で入れ替えようとしていたのですが、もしかしてメソッドとかないかなと思って調べてみたところ、JavaScriptに便利なメソッドがあることに気づき、ちょっと感動した記憶があります。
ただ私が知らなかっただけなんですけどね。

先日後輩に質問をもらったときに昔の自分を思い出したので、せっかくの機会ですし、記事にしておこうと思います。
もちろん、TypeScriptでも使えますよ。

そんなわけで、今回はJavaScript・TypeScriptで配列を反転して逆順にする方法についてご紹介しますね。

目次

JS・TSで配列を逆順にしたい時はreverse()の出番!

JavaScriptには色々と便利メソッドが用意されています。

今回ご紹介するのは「Array.prototype.reverse()」です!

これは名前の通り、配列の中身を逆順にするメソッドで、以下のように説明されています。

配列の要素を In-place アルゴリズム で反転させます。最初の要素は最後に、最後の要素は最初になります。

MDN web docs:Array.prototype.reverse()

百聞は一見に如かず。
早速動きを見てみましょう。

const numbers = [1, 2, 3, 4, 5];
const reverseNum = numbers.reverse();
console.log(reverseNum);
// [ 5, 4, 3, 2, 1 ]

上のコメントに記載したように、配列の中身が反転して出力されています。
簡単ですね!

一点注意すべき箇所としては、もともとの配列自体反転してしまうということです

以下の出力をみてください。

const numbers = [1, 2, 3, 4, 5];
const reverseNum = numbers.reverse();
console.log("reverseNum:", reverseNum);
console.log("numbers:", numbers);
// reversNum: [ 5, 4, 3, 2, 1 ]
// numbers: [ 5, 4, 3, 2, 1 ]

もともとの配列であるnumbersの中身が反転してしまっています。

この動きを覚えておかないと、思わぬところでハマってしまうかもしれないので、気をつけてくださいね。

終わりに

今回はJavaScript・TypeScriptで配列の中身を逆順にする方法についてご紹介しました。

本日のまとめです。

  • JavaScriptとTypeScriptで配列の中身を反転するにはArray.prototype.reverse()が便利。
  • reverse()を使うともともとの配列の中身も反転することに注意。

MDN web docsには便利なメソッドが載っているので、色々と試していこうと思います。

今回はここまでです。それでは。

シェアしていただけると嬉しいです!
目次