JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【初心者向け】JavaScriptのreverse()メソッドで配列を逆順にする方法

JavaScriptのreverse()メソッドは、配列の要素を元の順序と逆順に入れ替えるための便利な関数です。このメソッドを呼び出すと、配列の最初の要素が最後に、最後の要素が最初に移動し、配列全体が反転されます。

reverse()メソッドの基本

reverse()は配列そのものを変更する「破壊的メソッド」である点に注意してください。つまり、元の配列の順序が直接書き換えられます。元の配列を保持したい場合は、あらかじめslice()やスプレッド構文（[...arr]）などでコピーを作成してからreverse()を使用するのがおすすめです。

サンプルコード

以下は、ボタンをクリックすると配列の要素が逆順に表示される簡単なデモです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Array reverse</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScript Array reverse</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、配列が逆順になります
</h3>
<script>
    let fillEle = document.querySelector(".sample");
    let arr = ["H", "E", "L", "L", "O"];
    fillEle.innerHTML = arr;
    document.querySelector(".Btn").addEventListener("click", () => {
        fillEle.innerHTML = arr.reverse();
    });
</script>
</body>
</html>

コードのポイント

  • 初期状態では、配列["H", "E", "L", "L", "O"]の内容がそのまま画面に表示されます。
  • 「CLICK HERE」ボタンをクリックすると、イベントリスナー内でarr.reverse()が実行されます。
  • その結果、配列は["O", "L", "L", "E", "H"]となり、画面の表示も反転します。

実行結果

ページ読み込み直後の表示：

【初心者向け】JavaScriptのreverse()メソッドで配列を逆順にする方法

「CLICK HERE」ボタンをクリックした後の表示：

【初心者向け】JavaScriptのreverse()メソッドで配列を逆順にする方法

まとめ

reverse()メソッドを使えば、わずか1行のコードで配列の要素順を反転できます。ただし元の配列が変更されるため、必要に応じてコピーを作成してから使用しましょう。並び替えやデータの表示順を切り替えたい場面などで、ぜひ活用してみてください。

  1. JavaScriptのshift()メソッドとは？配列の先頭要素を削除する方法を解説

    JavaScriptのshift()メソッドとはJavaScriptのshift()メソッドは、配列から先頭（最初）の要素を取り除き、その要素を返すメソッドです。この操作により配列の長さは1つ減少します。なお、末尾の要素を削除したい場合はpop()メソッドを使用し、先頭に要素を追加したい場合はunshift()メソッドを使います。shift()メソッドのコード例以下は、ボタンをクリックすると配列の先頭要素が削除されるサンプルコードです。<!DOCTYPE html> <html lang="ja"> <head> <meta cha

  2. JavaScriptにおける配列の分割代入（Destructuring）の基本と使い方

    分割代入（Destructuring）とは、配列から値を取り出して個別の変数に展開するための構文です。ES2015（ES6）で導入されたこの機能を使うと、配列の各要素を簡潔かつ読みやすく変数に割り当てることができます。 配列の分割代入のサンプルコード 以下は、JavaScriptで配列の分割代入を行うコード例です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport&quo