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

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

JavaScriptのshift()メソッドとは

JavaScriptのshift()メソッドは、配列から先頭（最初）の要素を取り除き、その要素を返すメソッドです。この操作により配列の長さは1つ減少します。

なお、末尾の要素を削除したい場合はpop()メソッドを使用し、先頭に要素を追加したい場合はunshift()メソッドを使います。

shift()メソッドのコード例

以下は、ボタンをクリックすると配列の先頭要素が削除されるサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</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 Shift</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", () => {
        arr.shift();
        fillEle.innerHTML = arr;
    });
</script>
</body>
</html>

実行結果

ページを開いた直後は、配列「H, E, L, L, O」が画面に表示されます。

「CLICK HERE」ボタンをクリックすると、shift()メソッドによって配列の先頭にある「H」が削除され、画面には「E, L, L, O」と表示されます。ボタンを押すたびに、先頭の要素が順番に取り除かれていきます。

ポイントまとめ

  • shift()は配列の先頭の要素を削除する
  • 戻り値として削除された要素を返す
  • 元の配列自体が変更される（破壊的メソッド）
  • 空の配列に対して実行した場合はundefinedを返す
  1. 【初心者向け】JavaScriptのreverse()メソッドで配列を逆順にする方法

    JavaScriptのreverse()メソッドは、配列の要素を元の順序と逆順に入れ替えるための便利な関数です。このメソッドを呼び出すと、配列の最初の要素が最後に、最後の要素が最初に移動し、配列全体が反転されます。reverse()メソッドの基本reverse()は配列そのものを変更する「破壊的メソッド」である点に注意してください。つまり、元の配列の順序が直接書き換えられます。元の配列を保持したい場合は、あらかじめslice()やスプレッド構文（[...arr]）などでコピーを作成してからreverse()を使用するのがおすすめです。サンプルコード以下は、ボタンをクリックすると配列の要素が逆順

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

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