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

JavaScriptのunshift()メソッドで配列の先頭に新しい要素を追加する方法

JavaScriptのunshift()メソッドを使用すると、配列の先頭に1つ以上の新しい要素を追加できます。このメソッドは、要素を追加した後の配列の新しい長さを戻り値として返します。

配列の末尾に要素を追加するpush()メソッドとは対照的に、unshift()は配列の先頭に要素を挿入するため、既存の要素はすべて後ろにシフトされます。

サンプルコード

以下のコードを実行すると、配列の先頭に新しい要素を追加する方法を確認できます。

<html>
<head>
  <title>JavaScript Array unshift Method</title>
</head>
<body>
  <script>
    var arr = new Array("orange", "mango", "banana", "sugar");
    var length = arr.unshift("water");
    document.write("Returned array is : " + arr);
    document.write("<br /> Length of the array is : " + length);
  </script>
</body>
</html>

この例では、最初に「orange」「mango」「banana」「sugar」の4つの要素を持つ配列を作成しています。その後、unshift()メソッドを使って「water」を配列の先頭に追加し、戻り値として配列の新しい長さを受け取っています。

実行結果

Returned array is : water,orange,mango,banana,sugar
Length of the array is : 5

実行結果からわかるように、「water」が配列の先頭に追加され、元の4つの要素は1つずつ後ろに移動しています。また、unshift()メソッドの戻り値として、追加後の配列の長さ「5」が返されていることが確認できます。

複数の要素を一度に追加する

unshift()メソッドは、複数の要素をカンマで区切って渡すことで、一度に先頭へ追加することも可能です。

var arr = new Array("orange", "mango");
arr.unshift("water", "apple");
document.write(arr); // water,apple,orange,mango

このように、複数の要素を渡した場合は、渡した順番のまま配列の先頭に挿入されます。

  1. JavaScriptで配列の要素を同じ配列内に複製する方法

    JavaScriptでは、concat()メソッドとsort()メソッドを組み合わせることで、既存の配列の要素を同じ配列内に複製することができます。ここでは、実際に動作するサンプルコードを使って、その手順をわかりやすく解説します。 コード例 以下は、配列の要素を同じ配列内に複製するためのコード例です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" cont

  2. 複数の値でJavaScript配列の要素を検索する方法

    JavaScriptである配列（arr）が、別の配列（arr1）の複数の値・すべての要素を含んでいるかどうかを確認したい場面はよくあります。そんなときは、every()メソッドとincludes()メソッドを組み合わせることで、シンプルに判定できます。以下はそのサンプルコードです。 コード例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content=