配列を扱っている際に、中身を逆順にしたいと思ったことはありませんか？
場面としては、サーバーからのレスポンスが昇順でくるのかと思っていたら降順だった、とかですかね。
私もプログラミングを始めたばかりのある時に、初めて逆順にしたいと思ったことがありました。
始めは自力で入れ替えようとしていたのですが、もしかしてメソッドとかないかなと思って調べてみたところ、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には便利なメソッドが載っているので、色々と試していこうと思います。
今回はここまでです。それでは。
