【JavaScript】配列から要素を検索する 6 つの方法

JavaScript で配列から特定の条件を満たす要素が存在するかをチェックしたり、該当の要素を抜き出すといった操作は頻繁に行われます。JavaScript には、配列から要素を発見するためのメソッドがいくつか用意されています。ここでは 8 つのメソッドをピックアップし、それぞれの特徴を解説したうえで、どういったシーンでどのメソッドを使うのが適切なのかを考察していきましょう。

配列から要素を発見するメソッド
indexOf()
includes()
some()
find()
findIndex()
filter()
オブジェクトの配列から検索する
用途ごとに適切なメソッド
findLast() と findLastIndex()
まとめ

配列から要素を発見するメソッド

まずは、JavaScript で配列から要素を発見する Array オブジェクトの 6 つメソッドを紹介しましょう。

メソッド	概要
indexOf(値)	見つかればインデックス番号を返します。
includes(値)	見つかれば true を返します。
some(関数)	見つかれば true を返します。
find(関数)	見つかればその最初の要素を返します。
findIndex(関数)	見つかればその最初の要素のインデックス番号を返します。
filter(関数)	見つかった要素から成る新たな配列を返します。

引数に値を入れるメソッドと、引数に関数を入れるメソッドに分かれます。では、一つずつ詳細を見ていきましょう。

indexOf()

indexOf() メソッドは、引数の値に一致した要素が見つかれば、そのインデックス番号を返します。見つからなければ -1 を返します。

const list = ['Chrome', 'Firefox', 'Edge', 'Safari'];
 
console.log(list.indexOf('Safari')); // 3
 
if (list.indexOf('Safari') >= 0) {
  console.log('indexOf() で Safari が見つかりました。');
}

このように、値の存在を確認するのであれば、indexOf() が返す値が 0 以上であることを評価します。

includes()

includes() メソッドは、引数の値に一致した要素が見つかれば true を、見つからなければ false を返します。

const list = ['Chrome', 'Firefox', 'Edge', 'Safari'];
 
if (list.includes('Safari') === true) {
  console.log('includes() で Safari が見つかりました。');
}

some()

some() メソッドは、引数に指定した関数の評価を満たす要素が 1 つでも見つかれば true を返します。見つからなければ false を返します。

const list = ['Chrome', 'Firefox', 'Edge', 'Safari'];
 
if (list.some((el) => { return el === 'Safari' }) === true) {
  console.log('some() で Safari が見つかりました。');
}

find()

find() メソッドは、引数に指定した関数の評価を満たす要素が見つかれば、その最初の要素を返します。見つからなければ undefined を返します。

const list = ['Chrome', 'Firefox', 'Edge', 'Safari'];
 
if (list.find((el) => { return el === 'Safari' }) !== undefined) {
  console.log('find() で Safari が見つかりました。');
}

このように、値の存在を確認するのであれば、find() が返す値が undefined でないことを評価します。

findIndex()

findIndex() メソッドは、引数に指定した関数の評価を満たす要素が見つかれば、その最初の要素のインデックス番号を返します。見つからなければ -1 を返します。

const list = ['Chrome', 'Firefox', 'Edge', 'Safari'];
 
if (list.findIndex((el) => { return el === 'Safari' }) >= 0) {
  console.log('findIndex() で Safari が見つかりました。');
}

このように、値の存在を確認するのであれば、 findIndex() が返す値が 0 以上であることを評価します。

filter()

filter() メソッドは、引数に指定した関数の評価を満たす要素から成る新たな配列（Array オブジェクト）を返します。一つも要素が見つからなかった場合は空の配列（Array オブジェクト）を返します。

const list = ['Chrome', 'Firefox', 'Edge', 'Safari'];
 
const new_list = list.filter((el) => { return el === 'Safari' });
if (new_list.length > 0) {
  console.log('filter() で Safari が見つかりました。');
}

オブジェクトの配列から検索する

前述のサンプルコードでは、配列の各要素がプリミティブ値、つまり文字列、数値、論理値などの値でした。各要素がオブジェクトで、その中の特定のプロパティの値を検索したい場合を考えてみましょう。次のオブジェクトのリストを想定しましょう。

const list = [
  { name: 'Taro', age: 23, sex: 1 },
  { name: 'Hanako', age: 21, sex: 2 },
  { name: 'Jiro', age: 22, sex: 1 }
];

この配列から、name プロパティが “Hanako” の要素が存在するかを調べるとしましょう。存在するかしないかだけが分かれば良いのであれば、some() が良いでしょう。

if (list.some((el) => { return el.name === 'Hanako' }) === true) {
  console.log('name プロパティが "Hanako" の要素が見つかりました。');
}

もし name プロパティが “Hanako” の要素のインデックス番号が知りたければ、findIndex() が適切です。

const idx = list.findIndex((el) => { return el.name === 'Hanako' });
console.log(idx); // 1

もし name プロパティが “Hanako” の要素を取り出したいなら、find() が良いでしょう。

const hanako = list.find((el) => { return el.name === 'Hanako' });
if (hanako) {
  console.log(JSON.stringify(hanako)); // {"name":"Hanako","age":21,"sex":2}
}

ただし、find() では最初に見つかった要素しか得られませんので、その点、注意が必要です。

では、複数の要素が見つかった場合に、そのすべての要素を取り出したいなら、filter() が適切です。age プロパティの値が 22 以上の要素をすべて取り出してみましょう。

const new_list = list.filter((el) => { return el.age >= 22 });
console.log(JSON.stringify(new_list, null, '  '));
/*
[
  {
    "name": "Taro",
    "age": 23,
    "sex": 1
  },
  {
    "name": "Jiro",
    "age": 22,
    "sex": 1
  }
]
*/

用途ごとに適切なメソッド

6 つのメソッドが、どのシーンで使うのが適切なのかを整理してみましょう。必ずしもそうしなければいけないわけではありませんが、筆者が整理すると、次のようになります。

- 配列の要素がプリミティブ値で完全一致の要素を検索したい場合
  - 検索値と完全一致する要素が配列に存在するのかのみを知りたい場合 ⇒ include()
  - 検索値と完全一致する最初の要素のインデックス番号を知りたい場合 ⇒ indexOf()

- 配列の要素がプリミティブ値で特定の条件を満たす要素を検索したい場合
  または、配列の要素がオブジェクトの場合
  - 条件を満たす要素が配列に存在するのかののみを知りたい場合 ⇒ some()
  - 条件を満たす最初の要素のインデックス番号を知りたい場合 ⇒ findIndex()
  - 条件を満たす最初の要素を取り出したい場合 ⇒ find()
  - 条件を満たす要素をすべて取り出したい場合 ⇒ filter()

findLast() と findLastIndex()

前述の 6 つのメソッドに加え、findLast() と findLastIndex() というメソッドが間もなく各ブラウザーに実装される予定です。Chrome では v97 より対応する予定です。

find() は最初の要素を見つけましたが、findLast() は最後の要素を見つけます。findIndex() は最初の要素のインデックス番号を返しましたが、findLastIndex() は最後の要素のインデックス番号を返します。

まとめ

JavaScript には配列から要素を検索するメソッドが 6 つ（まもなく 8 つ）も用意されていることを改めて認識すると、JavaScript はとてもプログラマーにやさしい言語だと感心します。短くて見通しの良いコードを書くためにも、それぞれの特性を知ったうえで上手に利用したいものですね。