JavaScriptで配列の要素を削除する5つの方法を紹介！

システム
エンジニア

JavaScriptで配列の要素を削除するためには、どのような方法があるのでしょうか？

プロジェクト
マネージャー

先頭や末尾、要素を指定・検索する方法などをご紹介していきましょう。

配列とは？

配列は、複数の値を順番に格納できるオブジェクトです。格納しているそれぞれの値のことを「要素」と呼びます。

配列に格納されている要素は、様々な方法で取得・表示することができるので、連続して値を表示したい場合や、特定の条件の値を抽出したい場合などに、効率的に使用することができます。

基本的な配列の使用方法

JavaScriptで実際に配列を操作する場合には、下記のような記述になります。

【配列を作成する】
var cats = ["三毛", "シャム", "ペルシャ"];

【配列の要素を取得する】
var my_cat = cats[0];

【配列の先頭に要素を追加する】
cats.unshift("マンチカン");

配列の要素を削除する方法

JavaScriptでは、配列にメソッドを使用することで、要素を削除することができます。削除に使われるメソッドにはいくつか種類があり、用法や用途が若干異なります。ここでは、配列の削除に使用できるメソッドを5つ取り上げて見ていきたいと思います。

shift() – 先頭の要素を削除

JavaScriptで「shift()」は、先頭の先頭要素を削除する場合に使用します。

var cats = ["三毛", "シャム", "ペルシャ"];
var cats_before = cats.shift();

「shift()」は適用した配列の要素を削除して、返り値に削除した要素を返すので、それぞれ出力してみると、

console.log( cats ); // ["シャム","ペルシャ"] console.log( cats_before ); // 三毛

先に宣言した配列「cat」からは要素「三毛」が削除され、返り値を格納している「cat_before」には、「三毛」が格納されているのが分かります。

pop() – 末尾の要素を削除

JavaScriptで「pop()」は、末尾の要素を削除する場合に使用します。

var cats = ["三毛", "シャム", "ペルシャ"];
var cats_before = cats.pop();

「pop()」は適用した配列の末尾の要素を削除して、返り値に削除した要素を返すので、それぞれ出力してみると、

console.log( cats ); // ["三毛","シャム"] console.log( cats_before ); // ペルシャ

先に宣言した配列「cat」からは要素「ペルシャ」が削除され、返り値を格納している「cat_before」には、「ペルシャ」が格納されているのが分かります。

splice() – 要素を指定して削除

JavaScriptで「splice()」は、削除する要素の位置と個数を指定して削除します。メソッドに指定する引数は、splice( 削除位置, 個数 )になります。

var cats = ["三毛", "シャム", "ペルシャ"];
var cats_before = cats.splice(1,2);

「splice(1,2)」と指定したので、削除位置「1」から要素を「2」個削除します。指定要素を削除して、返り値に削除した要素を配列で返すので、それぞれ出力してみると、

console.log( cats ); // ["三毛"] console.log( cats_before ); // ["シャム","ペルシャ"]

先に宣言した配列「cat」からは要素「シャム、ペルシャ」が削除され、返り値を格納している「cat_before」には、「シャム、ペルシャ」が格納されているのが分かります。

「splice()」は、第3引数に追加要素を設定して、削除位置に要素を追加することもできます。

var cats = ["三毛", "シャム", "ペルシャ"];
var cats_before = cats.splice(1,2,"マンチカン");

filter() – 要素を検索して削除

JavaScriptで「filter()」は、要素を順番に検索して、条件に当てはまる要素を抽出します。引数には「式」を設定するので、さまざまな条件を指定することができます。

このメソッドは、適応した配列からは要素を削除せず、条件に当てはまる要素を返します。この返り値で新たに配列を作成することで、条件に当てはまらない要素を削除します。

文字列で検索

下記は、要素を文字列で検索して、「シ」を含む要素を抽出します。
var cats = ["三毛", "シャム", "ペルシャ"];
var cats_before = cats.filter(item => item.match(/シ/));
console.log( cats_before ); // ["シャム","ペルシャ"]

反対に「シ」を含まない要素を抽出したい場合には、「filter()」の行を下記のように書き換えます。
var cats_before = cats.filter(item => (item.match(/シ/)) == null);

数値で検索

下記は、数値で検索して「70」以下の要素を削除しています。

var scores = [40,66,80,55,95,15,100,33];
result = scores.filter(item=> item > 70);
console.log(result); //[80, 95, 100]

連想配列(ハッシュ)と多次元配列の要素を削除

下記のような連想配列(ハッシュ)が複数格納されている「会員リスト」があるとします。

var members = [
{ name: "山田 太郎", age: 25, place: "埼玉"},
{ name: "田中 景子", age: 37, place: "東京"},
{ name: "鈴木 四郎", age: 52, place: "神奈川"},
{ name: "林 次郎", age: 19, place: "東京"},
{ name: "大木 春美", age: 66, place: "千葉"}]

これを、「place」が「東京」以外の会員削除する場合には、下記のように指定します。

var result = members.filter((member) => {
return (member.place == "東京");
});
console.log(result) // [{name: "田中 景子",...},{name: "林 次郎"},...]

さらに、「age」が「30」以下の会員も削除する場合には、

var result = members.filter((member) => {
return ((member.place == "東京") && (member.age > 30));
});
console.log(result); // [{name: "田中 景子",...}]

と指定します。

配列の要素を全て削除する

JavaScriptでは、配列に「length = 0」を設定すると、配列の要素を全て削除します。配列オブジェクト自体を削除するわけではないので、要素が格納されていない、配列「cats」は存在しています。

var cats = ["三毛", "シャム", "ペルシャ"];
cats.length = 0; // []

システム
エンジニア

JavaScriptで配列の要素を削除する方法を理解しておけば、効率化できそうですね。

プロジェクト
マネージャー

そうですね。さまざまなパターンを理解しておくことで、作業の進みも早くなるはずですよ。

目的に合ったメソッドを正しく使用しよう

shift() – 先頭の要素を削除
pop() – 末尾の要素を削除
splice() – 要素を指定して削除
filter() – 要素を検索して削除
length – 0を設定すると、配列要素を全て削除

JavaScriptのメソッドには、適応させた配列の要素を直接削除するものと、適応させた配列の変更はせず、返り値で新しく配列を作成するものがあるので、目的に合ったメソッドを正しく使用する必要があります。