JavaScriptのshift()メソッドで配列の先頭要素を削除する方法

JavaScript の shift() メソッドは、配列の先頭（最初）の要素を取り除くために使用されます。取り除かれた要素は戻り値として返されるため、「削除」と「取得」を同時に行える便利なメソッドです。

shift() メソッドの構文

array.shift()

shift() は引数を必要とせず、呼び出すだけで配列の最初の要素が削除されます。
なお、元の配列自体が変更される（破壊的メソッド）点には注意が必要です。また、空の配列に対して shift() を呼び出した場合は undefined が返されます。

それでは、実際に shift() メソッドを使ったサンプルコードを見ていきましょう。

例1：配列の最初の要素を削除して表示する

<!DOCTYPE html>
<html>
<body>
   <h2>デモ見出し</h2>
   <p id="test"></p>
   <script>
      var arrStud = ["Laptop", "Desktop", "Tablet"];
      document.getElementById("test").innerHTML =
        "初期の配列 = " + arrStud + ", <br>削除された最初の要素 = " + arrStud.shift();
   </script>
</body>
</html>

この例では、3つの要素を持つ配列から shift() を呼び出すことで、先頭の「Laptop」が削除され、同時にその値が画面に出力されます。

実行結果

JavaScriptのshift()メソッドで配列の先頭要素を削除する方法

例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.shift();
         document.getElementById("test").innerHTML = "1番目の要素を削除した後の配列 = " + car;
      }
   </script>
</body>
</html>

実行結果

JavaScriptのshift()メソッドで配列の先頭要素を削除する方法

上の「結果を表示」ボタンをクリックすると −

JavaScriptのshift()メソッドで配列の先頭要素を削除する方法

ボタンを押すたびに shift() が実行され、配列の先頭要素が1つずつ取り除かれていくのが確認できます。

JavaScriptのshift()メソッドで配列の先頭要素を削除する方法

shift() メソッドの構文

例1：配列の最初の要素を削除して表示する

実行結果

例2：ボタンをクリックして先頭要素を削除する

実行結果

関連する配列メソッドとの違い