JavaScriptで配列から値を検索し、取得や判定ができるfindの使い方

2021年1月27日

JavaScriptで配列の要素を検索し、判定を行う.find関数の使い方についてまとめました。

配列の検索し一致した値を取得できる.find()の使い方

配列の検索を行う場合は、.find()関数が便利です。

配列内に指定した値と一致する値があればそれを取得します。
複数一致する値があった場合は、最初に一致した値が取得されます。

すべて一致しなかった場合はundefinedが帰ってくるため、if文で条件分岐を持たせることが可能です。

var array = [1, 10, 100, 1000, 1000];

//100を検索
var check = array.find(value => value === 100);

if(check){
    console.log('hit');
}else{
    console.log('found');
}

var array = [1, 10, 100, 1000, 1000];

//2を検索（見つからない）
var check = array.find(value => value === 2);

if(check){
    console.log('hit');
}else{
    console.log('found');
}

文字列も可

もちろん、文字列で構成された配列も検索できます。

var array = ['fuga', 'hoge', 'piyo'];

var check = array.find(value => value === 'hoge');

if(check){
    console.log('hit');
}else{
    console.log('found');
}

findとfilterの違い

似た関数としてfilter()という関数もあります。

JavaScriptで配列の中から検索した値を取得・削除するfilterの使い方

• filter : 検索してヒットしたものを配列で返す
• find : 検索して最初にヒットした値を返す

filterは検索してヒットした値を配列で返すので、複数の値を取得したい場合はfilterを使う必要があります。

単純に「検索した値があるかないか」を調べたい場合はfindでも良いでしょう。

部分一致で配列内を検索する方法（正規表現）

特定の文字が含まれていればhit扱いしたい場合は、正規表現のmatch関数を使用します。

部分一致

var array = ['fuga', 'hoge', 'piyo'];

//"og"という文字があれば一致（hoge）したものとする
var check = array.find(value => value.match(/og/g));

console.log(check);

また、先頭で一致した箇所を調べる「前方一致」、末尾で一致した箇所を調べる「後方一致」もmatch関数で行えます。

var array = ['fuga', 'hoge', 'piyo'];

//先頭がfuから始まる文字の値を配列内で検索
var check = array.find(value => value.match(/^fu/g));

console.log(check);

var array = ['fuga', 'hoge', 'piyo'];

//後方がyoから始まる文字の値を配列内で検索
var check = array.find(value => value.match(/yo$/g));

console.log(check);

.find()で検索の判定に複数の条件を設定する方法

find関数で判定に複数の条件を指定して判定を行いたい場合は、条件式を複数持たせてあげればOKです。

1行だと識別しにくいので、{}で展開して複数行書けるようにすると見やすくなります。

var array = [2, 5, 10, 15, 100, 500];

//10以下かつ奇数の判定
var check = array.find(value => {
    if(10 >= value && value % 2 !== 0){
        return true;
    }
});

console.log(check);

.find()で連想配列の値を検索する方法

キーに文字が入る連想配列は、厳密にはオブジェクトなのでfindでの検索が出来ません。

そのため、一度キーと値を含んだ配列にmapで変換して、検索を行う必要があります。

【JavaScript】配列を操作するmapの使い方

var obj = {
    'Apple' : 50,
    'Banana' : 80,
    'Cherry' : 50,
    'Orange' : 60,
    'Melon' : 100,
};

//キーを含んだ配列に変換 オブジェクト⇒配列
var array = Object.keys(obj).map((k)=>({ key: k, price: obj[k] }));

//値段が100以上のものがあるかチェック
var check = array.find(value => value.price >= 100);

console.log(check.price);

.find()でオブジェクトが入った配列を検索する方法

find関数でオブジェクト入り配列も検索することが出来ます。

検索条件（下記のプログラムではvalue）にプロパティを指定することで、そのプロパティの条件を設定することが出来ます。

下記は、配列内に値段（price）が100円以上のものを取得する処理です。

var array = [
    {no : 1, name : 'Apple', price: 50},
    {no : 2, name : 'Banana', price: 80},
    {no : 3, name : 'Cherry', price: 50},
    {no : 4, name : 'Orange', price: 60},
    {no : 5, name : 'Melon', price: 100},
];
//priceが100以上
var check = array.find(value => value.price >= 100);

console.log(check);