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

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」のみ抽出されることになります。

最後に

世間一般に公開されているWebAPIを使おうと思ったのですが、公開されている検索キーが自分が使いたい用途にあまり合わず(というより絞り込みがおおざっぱすぎて)、データを取り出した後に自分でfilterかけようと思ったのが最初のきっかけでした。

複数検索キーがあっていずれかを抽出する、は結構ありそうだと思っていたのですが、検索が下手なのかなかなか見つからなかったのです。まぁデータ取得時点で検索キーを指定して取り出すパターンが多いですよね。

参考資料

Array.prototype.filter() - JavaScript | MDN
filter() メソッドは、与えられた関数によって実装されたテストに合格したすべての配列からなる新しい配列を生成します。
Array.prototype.includes() - JavaScript | MDN
includes() メソッドは、特定の要素が配列に含まれているかどうかを true または false で返します。
ループと反復処理 - JavaScript | MDN
ループは繰り返し何かを実行するための簡便な方法を提供します。本章では JavaScript で利用可能な反復処理を行う数々の文を紹介します。

コメント

タイトルとURLをコピーしました