JavaScriptで配列から特定の数値要素を削除する方法【再帰とfilter活用】

はじめに

本記事では、「数値の配列」と「削除対象の数値」を受け取り、その数値と一致するすべての要素を元の配列から直接（in-place）削除する関数をJavaScriptで実装する方法を解説します。

このような処理を実現するには、再帰呼び出しを利用する方法が効果的です。指定した要素のすべての出現箇所を配列から取り除く再帰関数は、以下のように記述できます。

コード例

const numbers = [1, 2, 0, 3, 0, 4, 0, 5];
const removeElement = (arr, element) => {
  if (arr.indexOf(element) !== -1) {
    arr.splice(arr.indexOf(element), 1);
    return removeElement(arr, element);
  }
  return;
};
removeElement(numbers, 0);
console.log(numbers);

実行結果

コンソールには以下のように出力されます。

[ 1, 2, 3, 4, 5 ]

コードの解説

この関数の動作を順を追って確認してみましょう。

1. 要素の検索： indexOf()メソッドを使って、削除したい要素が配列内に存在するかどうかを判定します。要素が存在しない場合は-1が返されます。

2. 要素の削除： 要素が見つかった場合は、splice()メソッドでその位置から1つ分の要素を削除します。splice()は元の配列を直接変更するため、in-placeな操作が可能です。

3. 再帰呼び出し： 同じ要素がまだ配列内に残っている可能性があるため、自分自身を再度呼び出して処理を繰り返します。

4. 終了条件： indexOf()が-1を返した時点で該当要素はすべて削除済みとなるため、再帰を終了します。

filter()を使った代替方法

元の配列を変更せず、新しい配列として結果を受け取ってもよい場合は、filter()メソッドを使うとより簡潔に記述できます。

const numbers = [1, 2, 0, 3, 0, 4, 0, 5];
const filtered = numbers.filter(num => num !== 0);
console.log(filtered); // [ 1, 2, 3, 4, 5 ]

filter()は、コールバック関数がtrueを返した要素だけで構成される新しい配列を返します。上記の例では「0以外の要素」だけを抽出しているため、意図した結果が得られます。

まとめ

元の配列を直接変更したい場合はindexOf()とsplice()を組み合わせた再帰処理が有効です。一方、イミュータブルなアプローチを取りたい場合や、コードの簡潔さを重視する場合はfilter()の利用がおすすめです。用途に応じて使い分けるとよいでしょう。