どうもライトです。

javascriptで絞り込み検索やキーワード検索など配列から要素を特定するときによく使うのがfind関数です。

では早速find関数の使い方を見ていきましょう。

find関数とは

find関数は配列内に指定した値があるとそれを返してもしなければundefinedを返します。

文字列も取得できるのでキーワード検索やIDの取得などによく使われます。

ただし、条件にあった要素が複数あれば最初の要素だけが返されるので複数条件を返す場合はfilter関数を使うようにしましょう。

find関数の使い方

まずは条件が一致した場合の例を見ていきましょう。

const idList = [1, 2, 3, 4, 5]

// ID:3を検索する
const findArray = idList.find(item => item === 3);

if(findArray) {
  console.log('find')
} else {
  console.log('Not Found')
}

// result
// "find"

このように条件に一致したIDを探していきます。

find関数で文字列も検索することができる

const textList = ["hoge1", "hoge2", "hoge3"]

const checkText = textList.find(item => item === 'hoge3')

if(checkText) {
  console.log('find')
} else {
  console.log('Not Found')
}

// result
// "find"

とキーワードを検索することができます。

複数条件の検索にはfilterを使う

ただしfind関数で注意しなければいけない点があります。

1つの条件で複数の要素が当てはまっていた場合は最初の要素しか返してくれません。

const Array = [10, 20, 30, 40 ]

const check = Array.find(item => item > 20)

console.log(check)

// result
// 30

と上記の場合、30,40,と返して欲しいのですが最初の要素である30しか返してくれません。

この場合、filter関数を使って複数条件を検索するようにしましょう。

検索したものがあるかどうかはsome関数を使う

find関数は条件に合った要素を返してくれますが条件に合った場合、合っていない場合だけの状態を返して欲しい時があります。

その場合はsome関数を使いましょう。

const array  =[10,20,33,40,50];
const result = array.some(item => item % 3 === 0;
});
console.log(result);

// result
//true

上記の場合は33が割り切れるためtrueを返しました。

特定の文字列が含まれているかどかうかは正規表現で検索する

特定の条件や文字列が含まれた場合の要素を取り出したい場合は正規表現のmatch関数を使用します。

const array = ['hoge', 'poyo', 'pao']
const check = array.find(item => item.match(/og/g));)

console.log(check)

// result
// "hoge"

また前方一致や後方一致の場合もmatch関数で調べることができます。

連想配列を検索するためにはmapを組み合わせる

連想配列を検索するためにはmapを組み合わせて必要なキーを指定して取得することができます。

const arr1 = [
  {"key": "a", "value": "100"},
  {"key": "b", "value": "200"},
  {"key": "c", "value": "300"},
]

const arr2 = arr1.map(item => item.value);

// arr2 -> ['100', '200','300']

Mapを使用して配列から連想配列を作成する

今度は逆にMapを使って配列から連想配列を作成します。

const arr = ['aaa', 'bbb', 'ccc'];
result = arr.map((value, index) => ({'id': index, 'value': value});

まとめ

今回はfind関数の使い方や検索の際、データの取り出し方、mapの使い方などを学習してきました。

基礎をしっかりと理解してさらに複雑な検索機能を作れるようになっていきましょう。