JavaScriptで配列内から特定条件の要素を探す方法

JavaScriptで配列の中から、特定条件の要素があるかどうか調べたり、条件のものだけを取得したりすることがよくあります。

複数方法があるので、今回はそれぞれの方法についてまとめておきます。

存在するかどうか調べたい場合

indexOf

indexOfを使うと、検索した条件に合致する値が存在する場合は、その値の配列番号が返ってきます。
条件に合致しなかった場合は「-1」が返ってきます。

See the Pen JavaScript: array.indexOf by Masakazu Saito (@31mskz10) on CodePen.

複数条件にあてはまる要素があったとしても、最初の1つしか返しません。

includes

includesは検索した条件に合致する値が存在する場合は「true」、見つからなかった場合には「false」が返ってきます。

See the Pen JavaScript: array.includes by Masakazu Saito (@31mskz10) on CodePen.

検索して見つけた値を取得したい場合

find

findを使うと条件に合致する値を取得できます。
ただし、取得できるのは最初の1件のみとなります。

arrayofObjects.find(object =>{
console.log(object.name + " is " + object.profession +" who works at " + object.company);
});

See the Pen JavaScript: array.find by Masakazu Saito (@31mskz10) on CodePen.

filter

filterは使い方がfindとほとんど同じですが、返ってくるときは条件に合致した値を配列でまとめて返します。
そのため、最初の1件だけで問題ない場合はfindを使って、全件取得したい場合はfilterを使います。

See the Pen JavaScript: array.filter by Masakazu Saito (@31mskz10) on CodePen.