JavaScriptの可変長引数（レスト構文）を使って配列から複数の要素を削除する方法

はじめに

JavaScriptでは、配列から特定の要素を削除したい場面はよくあります。本記事では、可変長引数（レストパラメータ）を活用して、元の配列から指定した文字列をすべて直接削除する関数の実装方法を解説します。

まず、次のような文字列リテラルの配列を用意します。

const arr = ['cat','dog','elephant','lion','tiger','mouse'];

ここで求められているのは、第一引数に対象の配列を受け取り、第二引数以降には削除したい文字列を任意の個数だけ渡せるJavaScript関数を作成することです。

そして、この関数は引数として渡された文字列が元の配列に存在する場合、その要素を元の配列から直接（in place）削除する必要があります。

実装コード

以下がそのコード例です。レスト構文「...removeArr」により、渡されたすべての引数がひとつの配列としてまとめられます。

const arr = ['cat','dog','elephant','lion','tiger','mouse'];

const removeFromArray = (arr, ...removeArr) => {
    removeArr.forEach(item => {
        const index = arr.indexOf(item);
        if(index !== -1){
            arr.splice(index, 1);
        };
    });
}

removeFromArray(arr, 'dog', 'lion');
console.log(arr);

コードのポイント

• レストパラメータ（...removeArr）： 第二引数以降に渡された値を自動的に配列として受け取るため、削除したい要素はいくつでも指定できます。
• indexOf()： 各文字列が配列内のどの位置にあるかを検索します。見つからない場合は -1 が返されます。
• splice(index, 1)： 見つかった位置の要素を1件だけ削除し、元の配列を直接変更します。

出力結果

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

[ 'cat', 'elephant', 'tiger', 'mouse' ]

このように、レスト構文と splice() を組み合わせることで、柔軟かつ簡潔に配列から複数の要素を削除することができます。なお、元の配列を変更せず新しい配列を作りたい場合は、filter() メソッドを使う方法も検討するとよいでしょう。