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

タイトルの通り、

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

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

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

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

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

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

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

これには 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

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

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

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

 

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

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

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

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

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

方法2.複数値なら 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

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

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

 

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

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

▼ このコードの出力結果

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

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

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

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

以上、JSで配列から値指定で削除する方法でした。

もし間違いがあればご指摘ください。ではまた(^^)/~~~

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください