【JavaScript】配列から、複数の検索キーのいずれかに該当する要素を抜き出す。

はじめに

データを取り扱う際にはどの言語でも配列を使うことがあると思いますが、そのデータ配列の中から、検索したいキーのいずれかに該当する要素を抜き出す方法があまり見当たらなかったので調べてました。

解決したい課題

データが格納されている配列に対して、検索条件を格納している配列のいずれかにヒットする要素を取り出したい。

上の図は説明を単純化するためにデータも簡素にしていますが、実際は文字列の配列ではなくオブジェクトの配列が検索対象のデータでした。

解決方法

filterとincludesを組み合わせて使うと、コードを短く書いて解決できそうだった。

サンプルコード

filterとincludesを使ったサンプルコード

前述の解決方法に沿ったサンプルコードです。

// データが格納されている配列
const dataList = ['Pig', 'Bear', 'Pig', 'Monkey', 'Goose'];
// 検索キーの配列
const searchList = ['Pig', 'Goose'];

const result = dataList.filter(data => searchList.includes(data));
console.log(result);
// Array ["Pig", "Pig", "Goose"]

6行目：searchList中に、dataListの要素(=data)が含まれるかを確認しています。含まれている場合は要素をfilterの結果から除外せず、次の要素のチェックを行っています。

当初考えていたコード

filterとincludesの組み合わせコードを見つける前に考えていたコードが以下のコードです。

const dataList = ['Pig', 'Bear', 'Pig', 'Monkey', 'Goose'];
const searchList = ['Pig', 'Goose'];

let result = [];

for (let i = 0; i < dataList.length; i++) {
  for (let j = 0; j < searchList.length; j++) {
    if (dataList[i] === searchList[j]) {
      result.push(dataList[i]);
      break;
    }
  }
}
console.log(result);

for文を使って、自前で両配列の要素を比較しながら、結果用の配列に要素を格納していってます。filterとincludesの組み合わせコードとやっていることは変わらないですが、ループカウンタなども用意しないといけないので少し長くなってます。

注意点

includesの比較は完全一致のようです。サンプルコードでいえば以下のような条件を満たす必要があります。

アルファベットの大文字小文字が一致
文字列の長さが一致

完全に一致しない要素を混ぜたサンプルコード

const dataList = ['Pig', 'Bear', 'Pig', 'Monkey', 'Goose'];
const searchList = ['pig', 'ea', 'Goose'];

const result = dataList.filter(data => searchList.includes(data));
console.log(result);
// Array ["Goose"]

上記コードの場合、「pig」はPが大文字でないため一致しませんし、「ea」はBearに含まれますが要素全体とは一致しないため、結果「Goose」のみ抽出されることになります。