JavaScriptで配列内を検索する

JavaScriptで配列内の特定の要素を検索します。

検索にはfind()やfilter()を使用します。

find()で検索

find()は配列内で最初にマッチ（検索ヒット）した要素を一つだけ返します。

配列内に複数該当データがあっても最初の要素だけを返します。

値が2のデータを検索します。

const array = [
  1,2,3,4,5,2
];

const search = 2;
console.log(array.find(v => v == search));
// OUTPUT: 2

filter()で検索

filter()は配列内でマッチ（検索ヒット）した要素を配列で全て返します。

配列内に複数該当データがある場合は全て取得することができます。

値が2のデータを検索します。

const array = [
  1,2,3,4,5,2
];

const search = 2;
console.log(array.filter(v => v == search));
// OUTPUT: [2,2]

オブジェクトの配列に有効

普通に値を保持しているだけの配列を検索してもあまり意味はありませんが、オブジェクトの配列に使用するとすごく便利です。

categoryがvegetablesの要素を取得します。

const objArray = [
  { id: 1, category: 'fruits', name: 'リンゴ' },
  { id: 2, category: 'fruits', name: 'みかん' },
  { id: 3, category: 'vegetables', name: 'トマト' },
  { id: 4, category: 'vegetables', name: 'ほうれん草' },
  { id: 5, category: 'fruits', name: 'ぶどう' },
  { id: 6, category: 'vegetables', name: 'スイカ' },
];
const search = 'vegetables';

console.log(objArray.find(v => v.category == search));
// OUTPUT: { id: 3, category: 'vegetables', name: 'トマト' }

console.log(objArray.filter(v => v.category == search));
// OUTPUT:
// [ { id: 3, category: 'vegetables', name: 'トマト' },
//   { id: 4, category: 'vegetables', name: 'ほうれん草' },
//   { id: 6, category: 'vegetables', name: 'スイカ' } ]

スイカは野菜か果物なのかって？大切なのはそこじゃないです。

JavaScriptで配列内を検索するときはfind()やfilter()を使用します。