JavaScriptで文字列配列の値に基づいてオブジェクト配列をフィルタリングする方法

ここでは、次のように文字列の配列とオブジェクトの配列が1つずつある状況を想定します。

const arr1 = [ '1956888670', '2109171907', '298845084' ];
const arr2 = [
    { KEY: '1262875245', VALUE: 'Vijay Kumar Verma' },
    { KEY: '1956888670', VALUE: 'Sivakesava Nallam' },
    { KEY: '2109171907', VALUE: 'udm analyst' },
    { KEY: '298845084', VALUE: 'Mukesh Nagora' },
    { KEY: '2007285563', VALUE: 'Yang Liu' },
    { KEY: '1976156380', VALUE: 'Imtiaz Zafar' },
];

求められているのは、これら2つの配列を受け取るJavaScript関数です。この関数は、2番目の配列の中から「KEY」プロパティの値が1番目の文字列配列に含まれているオブジェクトのみを抽出し、フィルタリング済みの新しい配列として返す必要があります。

実装例

実際のコードは以下のようになります。

const arr1 = [ '1956888670', '2109171907', '298845084' ];
const arr2 = [
    { KEY: '1262875245', VALUE: 'Vijay Kumar Verma' },
    { KEY: '1956888670', VALUE: 'Sivakesava Nallam' },
    { KEY: '2109171907', VALUE: 'udm analyst' },
    { KEY: '298845084', VALUE: 'Mukesh Nagora' },
    { KEY: '2007285563', VALUE: 'Yang Liu' },
    { KEY: '1976156380', VALUE: 'Imtiaz Zafar' },
];
const filterByKey = (arr1 = [], arr2 = []) => {
    let res = [];
    res = arr2.filter(el => {
        const { KEY } = el;
        const index = arr1.indexOf(KEY);
        return index !== -1;
    });
    return res;
};
console.log(filterByKey(arr1, arr2));

出力結果

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

[
    { KEY: '1956888670', VALUE: 'Sivakesava Nallam' },
    { KEY: '2109171907', VALUE: 'udm analyst' },
    { KEY: '298845084', VALUE: 'Mukesh Nagora' }
]

コードのポイント

• filter()：配列の各要素に対してコールバック関数を実行し、true を返した要素だけで構成される新しい配列を生成します。元の配列は変更されません。
• 分割代入：const { KEY } = el; と書くことで、オブジェクトから KEY プロパティの値を簡潔に取り出せます。
• indexOf()：配列内に指定した値が存在するかを調べます。見つかればそのインデックス、見つからなければ -1 を返すため、「-1 以外であれば一致」という判定ができます。

補足：includes() を使ったより読みやすい書き方

ES2016以降で使える includes() メソッドを利用すると、indexOf() !== -1 といった比較よりも意図が明確になり、コードも短くなります。

const filterByKey = (arr1 = [], arr2 = []) =>
    arr2.filter(({ KEY }) => arr1.includes(KEY));

パフォーマンスを考慮する場合

扱うデータ量が多い場合は、検索対象の文字列配列をあらかじめ Set に変換しておくと効果的です。Set による存在判定は O(1) で行えるため、大規模な配列でも高速に動作します。

const filterByKeyFast = (arr1 = [], arr2 = []) => {
    const keySet = new Set(arr1);
    return arr2.filter(({ KEY }) => keySet.has(KEY));
};