【JavaScript入門】配列要素を削除する方法のすべて!

こんにちは、ライターのマサトです!

今回は、配列要素を削除するための方法について学習をしていきましょう。よく似たメソッドがいくつか出てくるので、それぞれの特性や使い分けについてしっかり学べるように構成しました。

この記事では、

  • 配列要素の「削除」とは?
  • 「shift()」による削除
  • 「pop」による削除
  • 配列の指定要素を削除
  • 「delete」による削除
  • 「filter()」による削除

などの基本的な内容から、応用的な使い方に関しても解説していきます。この記事で、配列要素の削除方法をしっかり学習して自分のスキルアップを目指しましょう!

配列要素の「削除」とは?

それでは、まず最初に配列要素の「削除」について基本的な知識から勉強していきましょう! 配列は通常の変数と違って複数の値を格納しているのが特徴です。

var items = [1, 2, 3, 4, 5];

console.log( items[2] ); // => 3

そのため、配列要素を削除する場合は「何番目の値を削除するか?」というのが重要なポイントになります。JavaScriptでは、配列要素の先頭や末尾・特定の要素を指定しての削除などさまざまなメソッドが用意されています。

本記事では、それぞれの特徴や使い分けについて体系的に学べるように構成しているのでぜひ参考にしてみてください!

「shift()」による削除

この章では、「shift()」メソッドを使った配列要素の削除方法について学習しましょう。構文や基本的な使い方から、返り値の取得方法や削除された要素の再追加について見ていきます。

「shift()」の構文と書き方について

まずは、「shift()」メソッドの構文と基本的な書き方について学習しましょう!

使い方は非常に簡単で、配列データに「shift()」メソッドを付与するだけで利用できます。一般的な使い方の構文は次の通りです!

var items = 配列データ;

items.shift();

このように、配列データに「shift()」メソッドを付与するだけです。これにより配列要素の「先頭」にある値だけが削除され、後ろの要素は先頭に詰められます。(インデックス番号も更新されます)

配列要素を「shift()」で削除する方法

それでは、実際に「shift()」メソッドを使った削除方法を試してみましょう! サンプル例として、いくつかの文字列を格納した配列要素を削除してみます。

var items = ['リンゴ', 'メロン', 'イチゴ', 'スイカ'];

//配列の先頭要素を削除する
items.shift();

console.log( items );

実行結果

["メロン", "イチゴ", "スイカ"]

このサンプルでは、配列要素の先頭にある「リンゴ」だけが削除されているのが分かります。これにより、「items[0]」の値が「メロン」へと変更されており、配列データから「リンゴ」が完全に削除されたことになります。

返り値を使った要素の取得方法

「shift()」メソッドは、返り値として削除した要素を取得することもできます。これによりJavaScript側で削除した配列要素の値を制御することができるようになります。

次のサンプル例を見てください!

var items = ['リンゴ', 'メロン', 'イチゴ', 'スイカ'];

//削除した要素を返り値として「result」に代入する
var result = items.shift();

console.log( result );

実行結果

リンゴ

この例では、配列要素を「shift()」で削除して変数「result」に代入しているのがわかります。結果的に、配列の先頭にあった「リンゴ」要素を返り値として受け取っているのが実行結果からも分かります。

削除した配列要素を「unshift()」で再追加する方法

今度は、削除した配列要素を再び配列へ追加する方法を見ていきましょう! これを実現するには、「shift()」メソッドの逆である「unshift()」を活用する必要があります。

次のサンプル例を見てください!

var items = ['メロン', 'イチゴ', 'スイカ'];
var target = items.shift();

items.unshift( target );

console.log( items );

実行結果

['メロン', 'イチゴ', 'スイカ']

この例では、まず最初にこれまで通り「shift()」メソッドで配列要素の先頭を削除します。その削除した値を「unshift()」メソッドで再び配列要素の先頭に追加しているのです。実行結果を見ると、先頭の値が再び元に戻っているのがわかりますね。

「pop」による削除

この章では、「pop()」メソッドを使った配列要素の削除方法について見ていきましょう! 基本的な構文から削除例および返り値の取得方法まで学んでいきます。

「pop()」の構文と書き方について

まずは、「pop()」メソッドの基本的な構文と書き方について見ていきましょう! 使い方は、先ほど学んだ「shift」と同じなので簡単です。

一般的な構文は次のとおりです!

var items = 配列データ;

items.pop();

配列データに「pop」メソッドを繋げれば、要素の末尾だけが削除されます。「shift()」メソッドが配列要素の先頭だけを削除するので、よくペアで使われることもあります。

配列要素を「pop()」で削除する方法

次に、実際のサンプル例で具体的な使い方を見てみましょう!

いくつかの文字列が格納された配列に「pop()」を使う例は次の通りです!

var items = ['リンゴ', 'メロン', 'イチゴ', 'スイカ'];

items.pop();

console.log( items );

実行結果

["リンゴ", "メロン", "イチゴ"]

このサンプルでは、配列データに「pop」メソッドを付与して、要素の末尾にある「スイカ」だけを削除されているのが分かります。

返り値を使った要素の取得方法

「pop()」メソッドも返り値を取得することが可能です。返り値は、配列要素を削除した末尾の値を受けとることが出きるようになります。

次のサンプル例を見てください!

var items = ['リンゴ', 'メロン', 'イチゴ', 'スイカ'];

var result = items.pop();

console.log( items );

実行結果

スイカ

この例では、配列要素の末尾にある「スイカ」を削除して、その要素を「result」に代入しています。結果的に「スイカ」要素を取得できているのが実行結果からも分かりますね。ちなみに、「pop」メソッドにも反対の意味である「要素の追加」として「push」メソッドが提供されています。

次の記事では、「push」メソッドのさまざまな使い方を詳しく解説しているので、ぜひ参考にしてみてください!

配列の指定要素を削除

この章では、「splice()」メソッドを使った配列要素の削除について見ていきましょう! 基本的な構文や削除方法、複数の配列要素の削除や置換について学んでいきます。

「splice()」の構文と書き方について

まずは、「splice()」メソッドの基本的な構文から見ていきましょう!「splice()」を使うと、配列要素内の指定した要素だけを削除することができるようになります。

一般的な構文は次のとおりです。

var items = 配列データ;

items.splice( 開始位置, 要素数 );

「開始位置」で、配列内の削除したい要素のインデックス番号を指定し、何個の要素を削除するかを「要素数」で指定します。これにより、1つだけでなく複数の配列要素を削除することが可能になります。

指定した配列要素を削除して詰める方法

それでは、実際に「splice()」メソッドを使った配列要素の削除例を見ていきいましょう!

次のサンプル例を見てください!

var items = ['リンゴ', 'メロン', 'イチゴ', 'スイカ'];

//1番目の要素を削除する
items.splice( 1, 1 );

console.log( items );

実行結果

["リンゴ", "イチゴ", "スイカ"]

このサンプルでは、配列「items」の1番目の要素「メロン」を削除しています。「splice( 1, 1 )」と記述することで、1番目の要素を1個だけ削除するという意味になります。要素を削除すると、後ろの要素が詰められて新しい配列として上書きされるのが特徴です!

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

次に、「splice()」メソッドの特徴を活かして、複数の配列要素を削除してみましょう! 具体的には、第2引数の個数を変更することで複数要素の削除に対応していきます。

次のサンプルを見てください!

var items = ['リンゴ', 'メロン', 'イチゴ', 'スイカ'];

//1番目から2個の要素を削除した値を「result」に代入
var result = items.splice( 1, 2 );

console.log( result );

実行結果

["メロン", "イチゴ"]

変数「result」に、削除した要素「メロン」「イチゴ」が代入されているのが分かりますね。このように、第2引数の個数を変化させることで複数の要素に対応した削除が実現します。

「splice()」で置換を行う方法

「splice」は削除だけでなく「置換」を行うことも可能でご紹介しておきます! 実は、「splice()」には第3引数を設定することが可能で「置換要素」を指定できます。

具体的には、次のサンプルを見てください!

var items = ['リンゴ', 'メロン', 'イチゴ', 'スイカ'];

//1番目の要素を「ブドウ」に置き換える
items.splice( 1, 1, 'ブドウ' );

console.log( items );

実行結果

["リンゴ", "ブドウ", "イチゴ", "スイカ"]

この例では、1番目の要素を抽出して「ブドウ」という文字列に置換しています。第3引数に置換したい値を指定することで、その要素に置き換わるようになるわけです。配列要素に「追加」するのではなく、あくまで「置換」であるという点に注意しましょう!

「delete」による削除

この章では、「delete」演算子による配列要素の削除方法を見ていきましょう! 基本的な削除方法、返り値の取得方法、連想配列の削除について学んでいきます。

「delete」演算子で配列要素を削除する方法

まずは、「delete」演算子を使った基本的な削除方法について見ていきましょう! 「delete」は、対象となる配列要素を続けて記述するだけで削除できます。ただし、注意するポイントもあるので一緒に詳しく見てみましょう。

まずは、次のサンプル例を見てください!

var items = ['リンゴ', 'メロン', 'イチゴ', 'スイカ'];

delete items[1];

console.log( items[1] );

実行結果

undefined

このサンプルでは、「delete」演算子を使って要素の1番目(items[1])を削除しています。その結果として「undefined」が返っているのが実行結果からも分かりますね。ただし、注意が必要なのは、「delete」で削除した配列要素の「インデックス番号」は変わらないという点です!

次のサンプルを見てください!

var items = ['リンゴ', 'メロン', 'イチゴ', 'スイカ'];

delete items[1];

console.log( items );

実行結果

["リンゴ", undefined, "イチゴ", "スイカ"]

実行結果に注目してください!

1番目の要素は確かに削除されているのですが、値が「undefined」になっているだけでインデックス番号に変化はありません。このような仕様を知らないで使うと、思わぬバグに悩まされるので気をつけましょう!

返り値を「true / false」で取得する

「delete」演算子も返り値を取得することが可能なのでご紹介しておきます! 「delete」の返り値は、削除に成功したかどうかを「true / false」で取得することになります。

この事実を、簡単な例で確認してみましょう!

var items = ['リンゴ', 'メロン', 'イチゴ', 'スイカ'];

var result = delete items;

console.log( result );

実行結果

false

「delete」演算子は、配列の各要素を削除できるのですが配列全体を削除することはできません。その証拠として、このサンプルでは配列全体を「delete」演算子で削除しようとしていますが、結果として「false」が返っているのが分かります。
(この場合、削除処理は行われません)

連想配列のキーを削除する方法

今度は、連想配列の削除について見ていきましょう!

JavaScriptにおける連想配列は、基本的にオブジェクト構造と同じで次のようになります。

var myUser = { name: '太郎', age: 32, tel: '090-1234-5678' };

このような「キー」と「値」がペアになった連想配列があるとします。

例えば、「age」というキーの要素を削除するには次のように記述します。

//チェーンで指定する方法
delete myUser.age;

//添字で指定する方法
delete myUser['age'];

このように種類の削除方法があります。

「.(ドット)」を使ってキーをチェーンで繋いで指定するか、添字を使う方法によって削除可能です。

一般的にキーが文字列のような場合には添字による指定方法が適しているでしょう。

「filter()」による削除

この章では、「filter()」による配列要素の削除方法について見ていきいましょう! 基本的なループ処理による削除方法と、特定の複数要素を抽出して削除する手法について学んでいきます。

「filter()」のループ処理で配列を削除する書き方

まずは、「filter()」を使った基本的なループ処理の方法について見ていきましょう!「filter()」を使うと、配列要素内の値を検索しながら指定の要素だけを抽出して削除することが可能です。

次のサンプル例を見てください!

var items = ["リンゴ", "バナナ", "メロン", "バナナ"];

var result = items.filter(function( item ) {
  
  return item === 'バナナ';
  
});

console.log( result );

実行結果

["バナナ", "バナナ"]

「filter()」メソッド内の処理に注目してください!

文字列「バナナ」と引数「item」を比較することで、配列要素に含まれる「バナナ」だけを抽出しています。実行結果を見ると、見事に「バナナ」だけが抽出されて他の値は削除されているのが分かりますね。ちなみに条件式を「item !== 'バナナ'」のように否定にすれば、バナナだけを削除することも可能です!

まとめ

今回は、JavaScriptで配列要素の削除を行う方法について学習しました!

最後に、もう一度ポイントをおさらいしておきましょう!

  • 配列の先頭を削除する「shift()」 と末尾を削除する「pop()」がある
  • 指定の配列要素を削除するには「splice()」を使う
  • 「delete」演算子でも削除できるがインデックス番号は変化しない
  • 「filter()」を使うと条件によって特定の要素を削除できる

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

LINEで送る
Pocket

SEからWebエンジニアへ転職した理由

侍エンジニア塾卒業生の小池さんは、以前は社内SEとして約5年ほど勤務していました。しかし業務内容は社内のヘルプデスク対応など、プログラムを書く仕事は全くなかったそうです。

SEながらプログラムを書けない現状に「将来仕事がなくなるんじゃないか」と不安を感じ、プログラミング学習を決意。

弊社スクールで学習し、無事ベンチャー企業のプログラマーとして転職に成功しました。そんな小池さんの学習法や転職体験談を伺いましたので、是非ご覧ください。

「プログラミングができないSEは仕事がなくなる」不安を感じたSEが未経験から転職成功するまで
更新日 : 2019年10月7日

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説