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

JavaScriptのunshift()とpush()の違いとは？配列への要素追加方法を徹底解説

JavaScriptには、配列へ新しい要素を追加するためのメソッドがいくつかありますが、特によく使われるのが push() と unshift() の2つです。

どちらも配列に要素を追加するという点では共通していますが、決定的な違いは要素が追加される位置です。push()メソッドは配列の末尾に要素を追加するのに対し、unshift()メソッドは配列の先頭に要素を追加します。

それでは、それぞれの使い方を具体的なコード例とともに確認していきましょう。

1) push()メソッド ― 配列の末尾に要素を追加

Array.push()メソッドは、キューのように配列の末尾へ要素を追加します。引数は1つだけでなく、複数渡すことで一度に複数の要素を追加することも可能です。

サンプルコード

<html>
<body>
<script>
   var cars = ["Benz", "Lamborghini", "Tata safari"];
   cars.push("Ferrari");
   document.write(cars);
</script>
</body>
</html>

実行結果

Benz,Lamborghini,Tata safari,Ferrari

このように、「Ferrari」が元の配列の一番最後に追加されているのがわかります。

2) unshift()メソッド ― 配列の先頭に要素を追加

Array.unshift()メソッドは、配列の先頭に要素を追加します。こちらも複数の引数を渡すことで、複数の要素を同時に追加できます。

サンプルコード

<html>
<body>
<script>
   var cars = ["Benz", "Lamborghini", "Tata safari"];
   cars.unshift("Ferrari");
   document.write(cars);
</script>
</body>
</html>

実行結果

Ferrari,Benz,Lamborghini,Tata safari

今度は「Ferrari」が配列の最初に追加されました。

push()とunshift()の違いまとめ

メソッド追加される位置戻り値
push()配列の末尾追加後の配列の長さ（length）
unshift()配列の先頭追加後の配列の長さ（length）

なお、どちらのメソッドも戻り値として「要素追加後の配列の長さ」を返します。また、unshift()は既存の全要素のインデックスを1つずつ後ろへずらす必要があるため、要素数が非常に多い配列ではpush()よりも処理コストが高くなる傾向があります。パフォーマンスが重要な場面では、この点にも留意してメソッドを選択するとよいでしょう。

  1. JavaScriptにおける関数とメソッドの違いとは？わかりやすく解説

    JavaScriptにおいて、関数とメソッドは本質的には同じものです。両者の違いは、メソッドがオブジェクトのプロパティとして定義された関数であるという点にあります。つまり、独立して定義されたものを「関数」、オブジェクトに紐づけられたものを「メソッド」と呼びます。 JavaScriptの関数の基本形 まず、一般的な関数の定義方法を見てみましょう。 function functionname(param1, param2){ // 処理内容 } JavaScriptのメソッドの例 メソッドは、オブジェクトに関連付けられた関数です。次の例では、employeeオブジェクトの中にdetails

  2. Windows 10とWindows 11の違いを徹底比較!アップグレードすべきか判断するポイント

    Microsoft(マイクロソフト)は、数々の新機能と改善点を盛り込んだ最新OS「Windows 11」をリリースしました。一方で、これまで数多くのパッチやアップデートが適用されてきたWindows 10は、新しいWindows 11よりも安定したOSと言えます。Microsoftによると、Windows 10のサポートは2025年以降に終了する予定のため、Windows 11へアップグレードするか、Windows 10を使い続けるかを検討する時間は十分にあります。この記事では、Windows 10とWindows 11の性能・機能・改善点を比較し、新しいOSへ移行すべきか、それともWindo