.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分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

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

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