JavaScript 配列内の特定の値・要素を削除する方法

どうもフロントエンドエンジニアのまさぴょんです！

今回は、実務で必要になって活用した配列内の特定のvalue(値・要素)を削除する方法について、解説していきます。

それでは、まず結論から、、、

1 結論
2 配列から特定の1つのvalue(値)を削除する: indexOf() & splice()
3 配列から複数のvalue(同じvalueの重複も含む)を削除する: filter() & includes()
4 番外編：findIndex() & splice() で値の削除
5 まとめ
6 JavaScript書籍 Ver. 中級-上級者向け
7 JavaScript書籍 Ver. 初級者向け
8 参考・引用
9 最近の投稿

結論

配列から特定の1つのvalue(値)を削除したいのなら、「 indexOf() & splice() 」を利用したvalueの削除がBestです。

配列から複数のvalue(同じvalueの重複も含む)を削除したいのなら、「 fileter() & includes() 」を利用したvalueの削除がBestです。

今回は、たくさんのArray系統のメソッドを紹介します。ぜひ実際に使ってみてください。

配列から特定の1つのvalue(値)を削除する: indexOf() & splice()

indexOf() は、引数に渡したvalueと同じvalueを最初に発見したindex番号を返します。

また、splice() は、valueを削除したり、置換したり、追加できるメソッドですが、ここでは単純に指定したindexのvalueを削除するために使っています。

// 配列の特定のvalueを削除する方法-その1: indexOf() & splice()
// 特定の1つの値だけを削除したい時に向いている。

const TondeSaitama = [
    "robotama",
    "momo",
    "tama",
    "milk",
    "apple",
    "saitama"
];

const removeTarget = "saitama";

// 1. indexOf()で該当のindex番号を取得する。
const index = TondeSaitama.indexOf(removeTarget);

// 2. 番号を指定して、削除する。
TondeSaitama.splice(index, 1);

console.log({TondeSaitama});

配列から複数のvalue(同じvalueの重複も含む)を削除する: filter() & includes()

配列から複数のvalueを削除するなら、filter() と include() を使うのがBestです。

filter() の実行結果(返り値)は、CallBack関数内の条件に合致するtrueのvalueのみの新しい配列です。

そして、includes() は、引数に渡した値が配列に存在するかどうかをCheckするメソッドで実行結果はBooleanです。

この2つのメソッドを次のように組み合わせると、重複も含む複数の値を削除することができます。

// 配列の特定のvalueを削除する方法-その2: filter() & includes()
// 複数の値を削除したいときに向いている。

let cats = [
    "robotama",
    "momo",
    "hakutou",
    "tama",
    "milk",
    "apple",
    "saitama"
];

const noCats = [ "milk", "apple" ];

// noCatsに含まれるvalueがincludes()によってfalseになる => filter()で新しく作られる配列は、noCats以外のvalueの配列
cats = cats.filter( v => { return ! noCats.includes(v) });

console.log({cats});

番外編：findIndex() & splice() で値の削除

番外編として、findIndex() と splice() でも特定の値を探して、削除できるのでご紹介します。

findIndex()は、第一引数にCallBack関数を持って、条件に合致するvalueのindex番号を返してくれるメソッドです。

使い方としては、indexOf() & splice() の組み合わせと同じく特定の値を削除するときに使えます。

const TondeRobotama = [
    "robotama",
    "momo",
    "tama",
    "milk",
    "apple",
    "saitama"
];

const removeRobotama = "robotama";

// 1. findIndex()で条件にMatchするvalueのindex番号を取得する。
const indexR = TondeRobotama.findIndex(value => value === removeRobotama);
console.log({indexR});

// 2. 番号を指定して、削除する。
TondeRobotama.splice(indexR, 1);

console.log({TondeRobotama});