JavaScriptで配列から要素を削除する方法｜pop・shift・spliceの使い方

JavaScriptで配列から要素を削除する場面は大きく分けて3つあります。まず配列の末尾から要素を削除する方法、次に配列の先頭から要素を削除する方法、そして指定したインデックス(位置)から要素を削除する方法です。

それぞれのケースに対応した標準組み込みメソッドが用意されているため、目的に応じて使い分けることができます。ここでは、実際のコード例とともに各メソッドの使い方を順番に見ていきましょう。

配列の末尾から要素を削除する(pop)

配列の末尾から要素を削除するには、popメソッドを使用します。popは配列の最後の要素を取り除き、取り除かれた要素を戻り値として返します。

let veggies = ["Onion", "Raddish"];
veggies.pop();
console.log(veggies);

このコードを実行すると、コンソールには次のように表示されます。

["Onion"]

配列の先頭から要素を削除する(shift)

配列の先頭から要素を削除するには、shiftメソッドを使用します。shiftは配列の最初の要素を取り除き、その要素を戻り値として返します。なお、先頭に要素を追加する場合はunshiftメソッドを使うので、両者を混同しないよう注意しましょう。

let veggies = ["Onion", "Raddish"];
veggies.shift();
console.log(veggies);

このコードを実行すると、コンソールには次のように表示されます。

["Raddish"]

配列の指定した位置から要素を削除する(splice)

配列の中間など、任意の位置にある要素を削除したい場合はspliceメソッドを使用します。第1引数に削除を開始するインデックス、第2引数に削除する要素の個数を指定します。

let veggies = ["Onion", "Raddish", "Broccoli"];
veggies.splice(0, 1); // インデックス0から1個の要素を削除
console.log(veggies);

このコードを実行すると、コンソールには次のように表示されます。

["Raddish", "Broccoli"]

spliceメソッドは、削除された要素を格納した新しい配列を戻り値として返します。また、第2引数を省略すると、指定したインデックス以降のすべての要素が削除されます。さらに、第3引数以降に値を渡すことで、要素を削除しながら同時に新しい要素を挿入することも可能です。