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

JavaScriptで配列の末尾に要素を追加する方法【push()メソッドの使い方】

JavaScriptの配列の末尾に要素を追加したい場合は、push()メソッドを使用します。push()メソッドは、引数として渡された1つ以上の要素を配列の最後に追加し、追加後の新しい配列の長さを戻り値として返します。

基本的な使い方

push()メソッドの構文は以下のとおりです。

array.push(element1, element2, ...)
  • 複数の要素をカンマ区切りで渡すことで、一度にまとめて追加することも可能です。
  • 元の配列自体が変更される（破壊的メソッド）点に注意してください。

サンプルコード

次のコードは、配列の末尾に要素を追加する実際の例です。

<html>
   <head>
      <title>JavaScript Array push Method</title>
   </head>

   <body>
      <script>
         var numbers = new Array(30, 70, 75, 90);
         var length = numbers.push(100);
         document.write("new numbers are : " + numbers );
         length = numbers.push(200);
         document.write("<br />new numbers are : " + numbers );
     </script>
   </body>

</html>

実行結果

new numbers are : 30,70,75,90,100
new numbers are : 30,70,75,90,100,200

コードの解説

この例では、まず4つの数値（30, 70, 75, 90）を持つ配列「numbers」を作成しています。その後、numbers.push(100)を実行することで、数値100が配列の末尾に追加されます。さらにnumbers.push(200)を実行すると、数値200が新たな末尾に追加され、最終的に「30, 70, 75, 90, 100, 200」という配列になります。

また、push()メソッドは戻り値として追加後の配列の長さを返すため、変数「length」にはそれぞれ5、6という値が格納されます。

まとめ

配列の末尾への要素追加にはpush()メソッドが便利です。先頭に追加したい場合はunshift()メソッド、任意の位置に挿入したい場合はsplice()メソッドを使うとよいでしょう。用途に応じてこれらのメソッドを使い分けることで、配列操作を効率的に行えます。

  1. JavaScriptでクリックした要素にアクティブクラスを追加する方法

    Webページのボタンやタブメニューなどでは、現在選択されている要素を視覚的に強調表示したいケースがよくあります。JavaScriptを使えば、クリックされた要素に「active」クラスを動的に追加し、それまでアクティブだった要素からクラスを外すことで、この処理を簡単に実装できます。実装のポイント基本的な流れは以下のとおりです。querySelectorAll() ですべてのボタン要素を取得する各ボタンに addEventListener() でクリックイベントを登録するクリック時に、既存の「active」クラスを持つ要素からクラスを削除するクリックされた要素に「active」クラスを追加するサ

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

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