JavaScriptで配列を検索する4つの異なる方法

JavaScriptには、配列内のアイテムを検索するために使用できるさまざまなメソッドがあります。どの方法を選択するかは、特定のユースケースによって異なります。

たとえば、特定の条件を満たす配列内のすべてのアイテムを取得しますか?条件を満たしているアイテムがあるかどうかを確認しますか?特定の値が配列にあるかどうかを確認しますか?または、配列内の値のインデックスを検索しますか?

これらすべてのユースケースについて、JavaScriptのArray.prototypeメソッドで対応できます。この記事では、配列内のアイテムを検索するために使用できる4つの方法について説明します。これらの方法は次のとおりです。

  1. フィルタ
  2. 検索
  3. 含まれています
  4. の指標

それぞれについて話し合いましょう。

Array.filter()

Array.filter()メソッドを使用して、特定の条件を満たす配列内の要素を見つけることができます。たとえば、10より大きい数値の配列内のすべてのアイテムを取得する場合は、次のようにします。

const array = [10, 11, 3, 20, 5]; const greaterThanTen = array.filter(element => element > 10); console.log(greaterThanTen) //[11, 20]

array.filter()メソッドを使用するための構文は次のとおりです。

let newArray = array.filter(callback);

どこ

  • newArray 返される新しい配列です
  • array フィルタメソッドが呼び出される配列です
  • callback 配列の各要素に適用されるコールバック関数です

配列内のどの項目も条件を満たさない場合、空の配列が返されます。この方法の詳細については、こちらをご覧ください。

特定の条件を満たすすべての要素が必要なわけではない場合があります。条件に一致する要素が1つだけ必要です。その場合、find()メソッドが必要です。

Array.find()

Array.find()メソッドを使用して、特定の条件を満たす最初の要素を検索します。filterメソッドと同様に、引数としてコールバックを受け取り、コールバック条件を満たす最初の要素を返します。

上記の例の配列でfindメソッドを使用してみましょう。

const array = [10, 11, 3, 20, 5]; const greaterThanTen = array.find(element => element > 10); console.log(greaterThanTen)//11

array.find()の構文は次のとおりです。

let element = array.find(callback);

コールバックは、配列内の各値に対して実行される関数であり、次の3つの引数を取ります。

  • element -繰り返される要素(必須)
  • index -現在の要素のインデックス/位置(オプション)
  • array-find呼び出された配列(オプション)

ただし、配列内のどの項目も条件を満たさない場合は、を返すことに注意してくださいundefined

ただし、特定の要素が配列内にあるかどうかを確認したい場合はどうでしょうか。これはどうやるんですか?

Array.includes()

include()メソッドは、配列に特定の値が含まれているかどうかを判別し、必要に応じてtrueまたはfalseを返します。

したがって、上記の例で、20が配列の要素の1つであるかどうかを確認する場合は、次のように実行できます。

const array = [10, 11, 3, 20, 5]; const includesTwenty = array.includes(20); console.log(includesTwenty)//true

この方法と私たちが検討した他の方法との違いに気付くでしょう。このメソッドは、引数としてコールバックではなく値を受け入れます。includeメソッドの構文は次のとおりです。

const includesValue = array.includes(valueToFind, fromIndex)

どこ

  • valueToFind は配列でチェックしている値(必須)であり、
  • fromIndex 要素の検索を開始する配列内のインデックスまたは位置です(オプション)

インデックスの概念を理解するために、もう一度例を見てみましょう。配列に最初の要素以外の位置に10が含まれているかどうかを確認する場合は、次のようにします。

const array = [10, 11, 3, 20, 5]; const includesTenTwice = array.includes(10, 1); console.log(includesTenTwice)//false

Array.indexOf()

indexOf()メソッドは、指定された要素が配列内で見つかる最初のインデックスを返します。要素が配列に存在しない場合は-1を返します。

例に戻りましょう。配列内の3のインデックスを見つけましょう。

const array = [10, 11, 3, 20, 5]; const indexOfThree = array.indexOf(3); console.log(indexOfThree)//2

その構文はincludesメソッドの構文と似ています。

const indexOfElement = array.indexOf(element, fromIndex)

どこ

  • element 配列でチェックしている要素(必須)であり、
  • fromIndex 要素の検索を開始する配列内のインデックスまたは位置です(オプション)

includesindexOfメソッドの両方が厳密な等式( '===')を使用して配列を検索することに注意することが重要です。値のタイプが異なる場合(たとえば、「4」と4)、それぞれfalseとを返し-1ます。

概要

これらの配列メソッドを使用すると、配列を検索するためにforループを使用する必要はありません。必要なものに応じて、ユースケースに最適な方法を決定できます。

各方法を使用する場合の概要は次のとおりです。

  • filter特定の条件を満たす配列内のすべてのアイテムを検索する場合に使用します。
  • find少なくとも1つのアイテムが特定の条件を満たすかどうかを確認する場合に使用します。
  • includes配列に特定の値が含まれているかどうかを確認する場合に使用します。
  • indexOf配列内の特定のアイテムのインデックスを検索する場合に使用します。

新しい記事を公開したときに通知を受け取りたいですか?ここをクリック。