.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. Javascript
  5. JavaScriptで配列の要素を削除する5つの方法を紹介!

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

  • Javascript
  • プログラミング言語
公開日時:   更新日時:
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のメソッドには、適応させた配列の要素を直接削除するものと、適応させた配列の変更はせず、返り値で新しく配列を作成するものがあるので、目的に合ったメソッドを正しく使用する必要があります。

    FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
    株式会社オープンアップシステムロゴ

    株式会社オープンアップシステムはこんな会社です

    秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

    • 充実した研修制度

      充実した研修制度

      毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

    • 資格取得を応援

      資格取得を応援

      スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    株式会社オープンアップシステムに興味を持った方へ

    株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

    年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
    まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    新着案件New Job