JavaScriptでArray.prototype.filter()風のカスタム関数を実装する方法

問題

JavaScriptで、Arrayクラスのプロトタイプオブジェクト上に実装する関数を作成する必要があります。

この関数はコールバック関数を唯一の引数として受け取り、配列の各要素に対してそのコールバック関数を呼び出します。

コールバック関数は「現在の要素」と「そのインデックス」の2つの引数を受け取るものとします。コールバック関数がtrueを返した場合は対応する要素を出力配列に含め、そうでない場合は除外します。

実装例

以下が実際のコードです。

const arr = [5, 3, 6, 2, 7, -4, 8, 10];
const isEven = num => num % 2 === 0;

Array.prototype.customFilter = function(callback){
    const res = [];
    for(let i = 0; i < this.length; i++){
        const el = this[i];
        if(callback(el, i)){
            res.push(el);
        };
    };
    return res;
};

console.log(arr.customFilter(isEven));

出力結果

[ 6, 2, -4, 8, 10 ]

コードの解説

このcustomFilterメソッドの動作は次のとおりです。

• まず、結果を格納するための空の配列resを用意します。
• forループで配列を先頭から末尾まで走査し、各要素this[i]とそのインデックスiを引数としてコールバック関数に渡します。
• コールバック関数の戻り値がtruthyであれば、その要素をpush()で結果配列に追加します。
• 走査が完了したら、条件を満たす要素だけを含んだ新しい配列を返します。

この例では、偶数かどうかを判定するisEvenをコールバックとして渡しているため、元の配列から偶数のみが抽出された[ 6, 2, -4, 8, 10 ]が出力されます。

なお、ネイティブのfilter()とは異なり、この簡易実装では疎な配列（スパース配列）の扱いや、第2引数によるthisの指定（thisArg）には対応していません。実運用で使う場合は必要に応じて拡張するとよいでしょう。