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

JavaScriptで配列の最後の要素を削除して返す方法（popメソッドの使い方）

JavaScriptで配列の最後の要素を削除したい場合は、pop() メソッドを使用します。pop() メソッドは、配列から最後の要素を取り除き、その削除された要素を戻り値として返します。

pop() メソッドの基本

pop() メソッドは元の配列を直接変更する（破壊的メソッド）ため、呼び出し後には配列の長さが1つ短くなります。削除された値が必要な場合は、戻り値を変数に代入して受け取ります。

サンプルコード

以下のコードを実行すると、配列の最後の要素を順番に削除して表示できます。

<html>
<head>
  <title>JavaScript Array pop Method</title>
</head>
<body>
  <script>
    var numbers = [40, 70, 80, 100];
    var element = numbers.pop();
    document.write("element is : " + element);
    var element = numbers.pop();
    document.write("<br />element is : " + element);
  </script>
</body>
</html>

実行結果

element is : 100
element is : 80

解説

この例では、初期状態の配列 numbers は [40, 70, 80, 100] です。

  • 1回目の numbers.pop() で最後の要素「100」が削除され、変数 element に返されます。この時点で配列は [40, 70, 80] になります。
  • 2回目の numbers.pop() では、新しく末尾となった「80」が削除され、同様に返されます。配列は [40, 70] になります。

補足：空の配列に pop() を使った場合

すでに空の配列に対して pop() を呼び出した場合、エラーにはならず undefined が返されます。また、配列の先頭の要素を削除・取得したい場合は shift() メソッドを、逆に末尾へ要素を追加したい場合は push() メソッドを使うと便利です。

  1. JavaScript配列で要素を検索する方法を徹底解説！find()メソッドの使い方

    JavaScriptで配列の中から特定の要素を検索したい場面は非常に多くあります。本記事では、最もよく使われるfind()メソッドを中心に、実際に動作するサンプルコードとともに分かりやすく解説します。 find()メソッドとは find()メソッドは、配列の各要素に対して指定したテスト関数（コールバック関数）を実行し、条件を満たした最初の要素の値を返します。条件に一致する要素が存在しない場合は undefined を返します。 基本構文 arr.find(callback(element[, index[, array]])[, thisArg]) callback: 各要素をテストする関数

  2. JavaScriptで配列の最後の要素を取得・表示する方法

    配列の最後の要素を取得して画面に表示するには、pop()メソッドを利用するのが手軽です。以下に、ボタンをクリックすると配列の最後の要素を表示するサンプルコードを示します。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &