JavaScriptで配列から値指定で要素削除する２つの方法

タイトルの通り、

JavaScriptには配列系メソッドが沢山あります。

でもこういうメソッドは用意されてません。

特定の値で要素を削除する
複数の値で要素を削除する

そこで配列から値指定で要素削除する方法を紹介。

いくらか工夫すれば難しくありません。

このページの目次

方法１．単体の値なら splice を使って要素削除
方法２．複数値なら filter を使って要素削除
配列から値指定で削除のまとめ

方法１．単体の値なら splice を使って要素削除

まずは値が１つの場合の削除について。

これには Array.splice を使うのが簡単でした。

▼ Array.spliceとは何？どういうの？

splice() メソッドは、 (in place で) 既存の要素を取り除いたり、置き換えたり、新しい要素を追加したりすることで、配列の内容を変更します。

let arrDeletedItems = array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

引用元　：　https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

第１引数は配列変更の開始インデックス。

第２引数が削除したい要素数。

第３引数以降は追加要素なので、ここでは不要です。

これを使った要素削除のやり方はこちら。

▼ ある値で要素削除のコード例

var fruits = [
  'apple',
  'banana',
  'cherry'
];

var val = 'apple';
var index = fruits.indexOf(val);
fruits.splice(index, 1)
console.log('fruits : ', fruits);

var fruits = [

'apple',

'banana',

'cherry'

];

var val = 'apple';

var index = fruits.indexOf(val);

fruits.splice(index, 1)

console.log('fruits : ', fruits);

▼ このコードのコンソール出力結果

fruits : 
 (2)["banana", "cherry"]

1 2	fruits : (2)["banana", "cherry"]

ただし配列に重複値がないことが前提です。

もし複数値を削除するなら、次の方法もあります。

方法２．複数値なら filter を使って要素削除

もし複数値をまとめて削除したいなら・・・

その場合は Array.filter を使うのが確実です。

▼ MDNでの Array.filter の説明

filter() メソッドは、与えられた関数によって実装されたテストに合格したすべての配列からなる新しい配列を生成します。

let newArray = arr.filter(callback(element[, index, [array]])[, thisArg])

callback 配列の各要素に対して実行するテスト関数です。この関数が true を返した要素は残され、false を返した要素は取り除かれます。

引用元　：　https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

この関数を使えば値の一括削除が可能。

あと重複値（ダブリ）があっても確実に削除できます。

実際に複数値を削除するコードを書いてみました。

▼ たとえばこんなコード...

var animals = [
  'dog',
  'cat',
  'pig',
  'cat',
  'fox',
  'kid'
];

var removals = ['cat', 'fox'];
animals = animals.filter(function(v){
  return ! removals.includes(v);
});
console.log('animals : ', animals);

var animals = [

'dog',

'cat',

'pig',

'cat',

'fox',

'kid'

];

var removals = ['cat', 'fox'];

animals = animals.filter(function(v){

return ! removals.includes(v);

});

console.log('animals : ', animals);

▼ このコードの出力結果

animals :  
 (3) ["dog", "pig", "kid"]

1 2	animals : (3) ["dog", "pig", "kid"]

ちゃんと 'cat' と 'fox' が削除されてます。

重複値があっても確実に削除可能。

配列から値指定で削除のまとめ

最後に２つの方法を簡単にまとめ。

単体の値なら splice を使って要素削除
もし配列が重複を含まないなら var index = fruits.indexOf('apple'); で削除値のインデックスを取得し、 fruits.splice(index, 1); のようにspliceメソッドで削除すればOK。
複数値なら filter を使って要素削除
もし重複値を含む配列なら animals = animals.filter(function(v){ return ! removals.includes(v); }); のようにfilterメソッドを使えばOK。