IT二刀流にはプロモーションが含まれています。

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()を使用します。

ITエンジニアの転職

いまITエンジニアの需要は急拡大しています。
ITエンジニアの経験があれば好条件で転職することも難しくありません。

転職ドラフト

☆ 支援ご協力のお願い ☆

この記事が「役に立った」と感じたら

投げ銭の「OFUSEで応援」で支援して頂けたら励みになります!

OFUSEのやり方(説明)

関連記事
記事特集