JavaScriptでオブジェクト配列を指定キーワードの部分一致でフィルタリングする方法

はじめに

次のようなオブジェクトの配列があると仮定しましょう。

const arr = [{ 'title': 'Hey',
    'foo': 2,
    'bar': 3
}, {
    'title': 'Sup',
    'foo': 3,
    'bar': 4
}, {
    'title': 'Remove',
    'foo': 3,
    'bar': 4
}];

ここで求められているのは、第一引数に上記のようなオブジェクトの配列を、第二引数に文字列リテラルの配列を受け取るJavaScript関数を作成することです。

この関数は、各オブジェクトのtitleプロパティが、第二引数の文字列のいずれかに部分的または完全に一致している場合にのみ、そのオブジェクトを含む新しい配列を返す必要があります。

実装例

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

const arr = [{ 'title': 'Hey',
    'foo': 2,
    'bar': 3
}, {
    'title': 'Sup',
    'foo': 3,
    'bar': 4
}, {
    'title': 'Remove',
    'foo': 3,
    'bar': 4
}];
const filterTitles = ['He', 'Su'];
const filterByTitle = (arr = [], titles = []) => {
    let res = [];
    res = arr.filter(obj => {
        const { title } = obj;
        return !!titles.find(el => title.includes(el));
    });
    return res;
};
console.log(filterByTitle(arr, filterTitles));

出力結果

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

[ { title: 'Hey', foo: 2, bar: 3 }, { title: 'Sup', foo: 3, bar: 4 } ]

コードの解説

この実装のポイントは、主に次の3つのメソッドにあります。

• Array.prototype.filter()：配列の各要素に対してテスト関数を実行し、trueを返した要素だけで構成される新しい配列を生成します。元の配列は変更されません。
• String.prototype.includes()：対象の文字列が指定した部分文字列を含んでいるかどうかを判定します。これにより、「He」が「Hey」に部分一致する、といった柔軟なマッチングが可能になります。
• Array.prototype.find()：第二引数の文字列配列の中に、titleに一致する要素が1つでも存在するかを確認します。先頭の!!（二重否定）は、見つかった要素を真偽値に変換するためのイディオムです。

補足：some() を使ったより簡潔な書き方

「条件に合う要素が1つでも存在するか」を判定する目的であれば、find()よりもArray.prototype.some()を使用する方が意図が明確になり、コードも簡潔になります。

const filterByTitle = (arr = [], titles = []) =>
    arr.filter(({ title }) => titles.some(el => title.includes(el)));

どちらの書き方でも結果は同じですが、可読性やチーム内のコーディング規約に合わせて選択するとよいでしょう。