JavaScript で配列から最初の要素を削除する

1. JavaScript で元の配列を変更して、配列の最初の要素を削除する
2. JavaScript で元の配列を変更しないで、配列の最初の要素を削除する

JavaScript プログラミング言語には、開発プロセスを高速化するのに役立つビルド前のメソッドがたくさんあります。あなたが考えるかもしれないどんなタスクに対しても、その特定のタスクを実行するために JavaScript で利用可能な事前に構築されたメソッドが常にあります。たとえば、文字列のスライス、配列からの要素の挿入と削除、1つのデータ型から別のデータ型への変換、乱数の生成など、さまざまなことができます。

同様に、配列を処理する際に、JavaScript で配列データ構造を操作および操作するのに役立つ便利なメソッドがかなりあります。この記事では、配列から最初の要素を削除するための 3つの方法を紹介します。

JavaScript で使用できるメソッドには 2つのタイプがあります。1つのタイプのメソッドは元の配列を変更し、2 番目のタイプのメソッドは元の配列を変更せずに保持します。元の配列が変更されても問題がない場合は、splice() メソッドと shift メソッドを使用してください。ただし、元の配列を変更したくない場合は、filter() メソッドと slice メソッドを使用してください。

JavaScript で元の配列を変更して、配列の最初の要素を削除する

1. splice() メソッド：

splice() メソッドは、配列から既存の要素を削除または置換するために使用されます。このメソッドは、元の配列を変更または変更します。splice() メソッドは、配列から削除された要素も返します。削除された要素を取得する場合は、返された要素を変数に保存して、さらに使用することもできます。

構文：

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)

start パラメータは、どの要素から配列の操作を開始するかを示します。開始は、正の値または負の値のいずれかを取ることができます。正の値（1、2、3 ….、n）を使用すると、配列が左から右に変更され始めます。負の値（-1、-2、-3、..）を使用すると、配列が変更され始めます。。、-n）次に、配列を右から左に変更し始めます。

次に、deleteCount パラメータと item1, item2, ... パラメータもあります。どちらもオプションです。配列からいくつかの要素を削除する場合は、削除する要素の総数を値として deleteCount パラメーターに渡すことができます。0 を渡すと、配列から要素が削除されることはありません。item1, item2, ... では、配列に追加する要素を渡すことができます。詳細については、splice() メソッドのドキュメントを参照してください。

以下に、5 要素で構成される array 変数内に格納された数値の配列を示します。この場合、配列の最初の要素を削除する必要があります。ここでは、開始インデックスと削除する要素の数を指定する必要があります。最初の要素を削除したいので、開始インデックスは 0 になり、削除する必要のある要素の合計は 1 になります。したがって、値 (0, 1) をパラメータとして splice() メソッドに渡します。

let array = [1, 2, 3, 4, 5] let firstElement = array.splice(0, 1);
console.log(array, firstElement);

また、配列から削除された要素を firstElement という変数に格納しています。配列から最初の要素を削除した後、array と firstElement 変数内に格納されている値を出力しています。

上記のコードをブラウザのコンソールに貼り付けることで実行でき、次のような出力が得られます。

出力：

Array(4) [ 2, 3, 4, 5 ]
Array [ 1 ]

出力からわかるように、最初の要素、この場合は 1 が元の配列から正常に削除されています。

2. shift() メソッド：

配列から最初の要素を削除する別の方法は、shift() メソッドを使用することです。splice() メソッドを使用すると、配列から任意のインデックスの要素を追加または削除できますが、shift() メソッドは、0 インデックスの要素を削除するためにのみ使用されます。最初の要素（インデックス 0 に存在する要素）を削除し、配列の残りの要素を左に移動します。

このメソッドは、配列から削除された要素も返します。ここでは、配列から削除された最初の要素を格納する firstElement 変数も作成しました。

let array = [1, 2, 3, 4, 5];
let firstElement = array.shift();
console.log(array, firstElement);

最後に、array 変数と firstElement 変数を出力します。

出力：

Array(4) [ 2, 3, 4, 5 ]
1

JavaScript で元の配列を変更しないで、配列の最初の要素を削除する

1. filter() メソッド：

元の配列を変更または変更するメソッドを見てきました。ここで、元の配列をそのまま保持し、操作の結果を新しい配列に格納するいくつかのメソッドを見てみましょう。そのようなメソッドの 1つが filter() メソッドです。

filter() メソッドは条件に基づいて機能します。また、条件が true か false かに基づいて、要素を新しい配列に追加するかどうかを決定します。

let array_1 = [1, 2, 3, 4, 5];
let array_2 = array_1.filter((element, index) => index > 0);
console.log(array_1, array_2);

filter() メソッドは、引数としてコールバック関数（矢印関数）を取ります。このコールバック関数は、配列の各要素で呼び出されます。この関数は、配列の element とそのインデックスを提供します。

最初の要素を削除したいので、要素のインデックスがゼロより大きいかどうか（index > 0）の条件を追加します。これが当てはまる場合、filter() 関数のみが要素を新しい配列に挿入し、それ以外の場合は挿入しません。インデックス 0 の要素（つまり、最初の要素）を除いて、他のすべての要素が新しい配列に挿入されます。

出力：

Array(5) [ 1, 2, 3, 4, 5 ]
Array(4) [ 2, 3, 4, 5 ]

2. slice() メソッド：

元の配列を保持する次のメソッドは、slice() メソッドです。slice() メソッドは、配列を 2 か所でカットします。そのためには、開始インデックスと終了インデックスを指定する必要があります。start は、配列のスライスを開始する最初のインデックスを表し、スライスは end の前の 1つの要素を停止します。

start および end 内に存在するすべての要素（開始値および終了前に 1つの要素を停止することを含む）は、新しい配列に挿入されます。これらのパラメーターは両方ともオプションです。詳細については、slice() メソッドのドキュメントを参照してください。

let array_1 = [1, 2, 3, 4, 5];
let array_2 = array_1.slice(1);
console.log(array_1, array_2);

配列から最初の要素を削除したいので、start パラメーターのみを渡します。end を指定しないということは、start 値から始まる配列のすべての要素が含まれることを意味します。この場合、slice(1) を渡します。これにより、要素 [2,3,4,5] が元の配列、つまり array_1 から array_2 にコピーされます。最後に、console.log() メソッドを使用して両方の配列を出力します。上記のコードの出力は次のとおりです。

出力：

Array(5) [ 1, 2, 3, 4, 5 ]
Array(4) [ 2, 3, 4, 5 ]