.net column
.NET開発者のためのブログメディア

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

2020年06月05日

配列はJavaScriptのさまざまな場面で使用されています。WEBアプリケーションで実際に運用する場面では、多くのデータを扱うシステムは少なくありません。扱うデータ量が多くなるほど、JavaScriptのメソッドをより適切に使用していくことが重要となります。配列は、多くのデータを効率よく扱うための、1つの大きな手段となります。ここでは、「配列の要素を削除する方法」について解説していきたいと思います。

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

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

配列とは?

配列は、複数の値を順番に格納できるオブジェクトです。格納しているそれぞれの値のことを「要素」と呼びます。配列に格納されている要素は、様々な方法で取得・表示することができるので、連続して値を表示したい場合や、特定の条件の値を抽出したい場合などに、効率的に使用することができます。

基本的な配列の使用方法

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; // []

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

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

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

shift() – 先頭の要素を削除pop() – 末尾の要素を削除splice() – 要素を指定して削除filter() – 要素を検索して削除length – 0を設定すると、配列要素を全て削除JavaScriptのメソッドには、適応させた配列の要素を直接削除するものと、適応させた配列の変更はせず、返り値で新しく配列を作成するものがあるので、目的に合ったメソッドを正しく使用する必要があります。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags

Jobs