JavaScriptの配列から特定の要素を削除する方法【Array.prototype.remove()の実装】

Array.prototype.remove()メソッドの実装

JavaScriptの標準APIには、配列から「特定の要素を指定して削除する」メソッドは用意されていません。splice()を使えば削除自体は可能ですが、削除したい要素のインデックスを事前に調べる必要があります。そこでこの記事では、値または条件関数を渡すだけで要素を削除できるカスタムメソッドArray.prototype.remove()を実装する方法を解説します。

関数の仕様

この関数は引数を1つ受け取ります。引数には、コールバック関数、または配列の要素となり得る値のいずれかを指定します。

• 引数が関数の場合：その関数の戻り値に基づいて配列内の該当要素を特定し、見つかった要素を元の配列から直接（in place）削除します。
• 引数が値の場合：その値と一致する要素を配列から探して削除します。
• 要素が見つかって削除できた場合はtrueを、見つからなかった場合はfalseを返します。

コード例

それでは、実際のコードを見てみましょう。

const arr = [12, 45, 78, 54, 1, 89, 67];
const names = [{
    fName: 'Aashish',
    lName: 'Mehta'
}, {
    fName: 'Vivek',
    lName: 'Chaurasia'
}, {
    fName: 'Rahul',
    lName: 'Dev'
}];
const remove = function(val){
    let index;
    if(typeof val === 'function'){
        index = this.findIndex(val);
    }else{
        index = this.indexOf(val);
    };
    if(index === -1){
        return false;
    };
    return !!this.splice(index, 1)[0];
};
Array.prototype.remove = remove;
console.log(arr.remove(54));
console.log(arr);
console.log(names.remove((el) => el.fName === 'Vivek'));
console.log(names);

出力結果

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

true
[ 12, 45, 78, 1, 89, 67 ]
true
[
    { fName: 'Aashish', lName: 'Mehta' },
    { fName: 'Rahul', lName: 'Dev' }
]

コードの解説

• typeof val === 'function'で引数の型を判定し、関数であればfindIndex()で条件に合う要素のインデックスを、値であればindexOf()で一致する要素のインデックスを取得します。
• インデックスが-1（要素が見つからない）の場合はfalseを返します。
• splice(index, 1)で元の配列から該当要素を1つだけ削除し、削除された要素を!!で真偽値に変換して返します。

注意点

この実装では、削除した要素が0や""（空文字列）、nullなどのfalsyな値だった場合、削除は成功しても戻り値がfalseになってしまう点に注意が必要です。戻り値の正確性が重要なケースでは、return this.splice(index, 1).length > 0;のように、削除された件数を基に真偽値を返す方法も検討するとよいでしょう。