JavaScriptの配列reverse()メソッドとは？使い方とサンプルコードを解説
JavaScriptのreverse()メソッドは、配列の要素を逆順に並べ替えるために使用されるメソッドです。呼び出すと元の配列そのものが反転され、その結果の配列が戻り値として返されます。
構文
array.reverse()
reverse()メソッドのポイント
- 引数は不要で、呼び出した配列自体を直接書き換えます（破壊的なメソッド）。
- 戻り値は、要素が反転された配列への参照です。
- 元の配列を変更せずに反転したい場合は、ES2023で追加されたtoReversed()メソッドを使うと便利です。
それでは、実際にJavaScriptでreverse()メソッドを実装してみましょう。
例1：基本的な使い方
<!DOCTYPE html>
<html>
<body>
<h2>デモ見出し</h2>
<p id="test"></p>
<script>
var arrStud = ["Laptop", "Desktop", "Tablet"];
document.getElementById("test").innerHTML = "初期の配列 = "+arrStud+", <br>反転後の配列 = "+arrStud.reverse();
</script>
</body>
</html>実行結果
この例では、「Laptop」「Desktop」「Tablet」の3つの要素を持つ配列に対してreverse()を実行しており、画面には初期の配列と反転後の配列が表示されます。
例2：ボタンクリックで配列を反転させる
<!DOCTYPE html>
<html>
<body>
<h2>車のタイプ</h2>
<button onclick="display()">反転</button>
<p id="test"></p>
<script>
var car = ["Hatchback", "Convertible", "SUV", "AUV", "MUV"];
document.getElementById("test").innerHTML = "初期の配列 = "+car;
function display() {
car.reverse();
document.getElementById("test").innerHTML = "反転後の配列 = "+car;
}
</script>
</body>
</html>実行結果
上の「反転」ボタンをクリックすると、display()関数が呼び出され、配列の要素が逆順に並べ替えられて表示されます。
このようにreverse()メソッドを使えば、ワンライナーで配列の順序を簡単に反転できます。ただし元の配列が変更されるため、必要に応じてスプレッド構文などでコピーを作成してから使用すると安全です。
-
【初心者向け】JavaScriptのreverse()メソッドで配列を逆順にする方法
JavaScriptのreverse()メソッドは、配列の要素を元の順序と逆順に入れ替えるための便利な関数です。このメソッドを呼び出すと、配列の最初の要素が最後に、最後の要素が最初に移動し、配列全体が反転されます。reverse()メソッドの基本reverse()は配列そのものを変更する「破壊的メソッド」である点に注意してください。つまり、元の配列の順序が直接書き換えられます。元の配列を保持したい場合は、あらかじめslice()やスプレッド構文（[...arr]）などでコピーを作成してからreverse()を使用するのがおすすめです。サンプルコード以下は、ボタンをクリックすると配列の要素が逆順
-
JavaScriptにおける配列の分割代入（Destructuring）の基本と使い方
分割代入（Destructuring）とは、配列から値を取り出して個別の変数に展開するための構文です。ES2015（ES6）で導入されたこの機能を使うと、配列の各要素を簡潔かつ読みやすく変数に割り当てることができます。 配列の分割代入のサンプルコード 以下は、JavaScriptで配列の分割代入を行うコード例です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport&quo