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

序章

JavaScriptでは、多くの場合、配列に格納されているデータを操作します。 一般的なタスクは、配列を検索して、特定の検索条件を満たす値が含まれているかどうかを確認することです。 手元のタスクに応じて、確認用のブール値、配列内の値の位置のインデックス、またはすべての検索結果を含む別の配列に関心がある場合があります。

ECMAScript 6より前は、おそらくforループを使用して、配列内のすべてのアイテムを反復処理し、各アイテムに対して操作を実行していました。 現在、配列内の値を検索するための一般的なタスクのいくつかを解決するいくつかの組み込みユーティリティメソッドがあります。

この記事では、Array.includes()、Array.indexOf、Array.find()、およびArray.filterについて学習します。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

• JavaScriptアレイに精通していること。

includes()を使用する

includes()メソッドは、値が配列に存在するかどうかにかかわらず、trueまたはfalseのいずれかを返します。

これが基本的な構文です。

arr.includes(valueToFind[, fromIndex]);

最初のパラメーターvalueToFindは、配列内で一致する値です。 2番目のパラメーターfromIndexはオプションであり、比較を開始するインデックスを設定します。 デフォルトは0であるため、配列全体が検索されます。

ワニの事実のサンプル配列は次のとおりです。

const alligatorFacts = ["thick scales", 80, "4 foot tail", "rounded snout", 80];

次に、includes()を使用して、文字列"thick scales"が配列に存在するかどうかを確認します。

alligatorFacts.includes("thick scales");

文字列が配列に存在するため、このコードはtrueを返します。

fromIndexパラメータを追加して、"thick scales"の後に比較が行われるようにすると、falseが返されます。

alligatorFacts.includes("thick scales", 1);

ここで、注意すべき重要なことがいくつかあります。 この.includes()メソッドは、厳密な比較を使用します。

alligatorFacts.includes(80);

数値80が配列に含まれているため、このコードはtrueを返します。

alligatorFacts.includes('80');

文字列値'80'が配列にないため、このコードはfalseを返します。

includes()は、値が配列に存在するかどうかだけを知る必要があるユースケースに役立ちます。

indexOf()を使用する

indexOf()メソッドは、配列内の値の最初のインデックスを返します。 一致するものがない場合、メソッドは-1を返します。

これが基本的な構文です。

arr.indexOf(searchElement[, fromIndex])

ワニの事実のサンプル配列をもう一度見てみましょう。

const alligatorFacts = ["thick scales", 80, "4 foot tail", "rounded snout", 80];

次に、indexOf()を使用して、文字列"rounded snout"の最初のインデックスを返します。

alligatorFacts.indexOf("rounded snout");

文字列"rounded snout"-3-のインデックスが返されます。

alligatorFacts.indexOf("soft and fluffy");

この文字列は配列に存在しないため、この例では-1が返されます。

alligatorFacts.indexOf(80)

この例では、1が返されます。

alligatorFacts.indexOf(80, 2);

この例では、インデックス2を超えて値が存在しないため、-1が返されます。

注：最初の結果を求めていない場合は、lastIndexOf()を使用することをお勧めします。 このメソッドはindexOfに似ていますが、配列の最後のインデックスから始まり、逆方向に機能する最初の一致を検索します。

indexOfは、関連する検索結果の単一のインデックスが必要なユースケースに役立ちます。

find()を使用する

find()メソッドは、関数の条件に一致する配列の最初の値を返します。 一致するものがない場合、メソッドはundefinedを返します。

これが基本的な構文です。

arr.find(callback(element[, index[, array]])[, thisArg])

ワニの事実のサンプル配列をもう一度見てみましょう。

const alligatorFacts = ["thick scales", 80, "4 foot tail", "rounded snout"];

次に、find()を使用して、13文字より短い長さの最初の値を返します。

alligatorFacts.find(el => el.length < 13);

この例では、callbackパラメーターのみを使用しています。

80は数値です。 "rounded snout"の長さは13文字です。 "thick scales"は12文字の長さで、"4 foot tail"は11文字の長さで、どちらも関数の条件を満たす。 ただし、find()は最初の値のみを返すため、"thick scales"が返されます。

オプションのindexパラメーターを使用した例を次に示します。

alligatorFacts.find((el, idx) => typeof el === "string" && idx === 2);

"thick scales"、"4 foot tail"、および"rounded snout"は、最初の条件（typeof el === 'string'）を満たしています。 これが唯一の条件である場合、最初の条件"thick scales"が返されます。 ただし、2番目の条件（idx === 2）により、このコードは"4 foot tall"を返します。

注：値の代わりにインデックスを探している場合は、findIndex()を使用することをお勧めします。 このメソッドも関数を受け取りますが、要素自体ではなく、一致する要素のインデックスを返します。

find()は、単一の検索結果値が必要なユースケースに役立ちます。

filter()を使用する

filter()メソッドは、関数の条件に一致する配列内のすべての値の新しい配列を返します。 一致するものがない場合、メソッドは空の配列を返します。

これが基本的な構文です。

let newArray = arr.filter(callback(currentValue[, index[, array]]) {
  // return element for newArray, if true
}[, thisArg]);

ワニの事実のサンプル配列をもう一度見てみましょう。

const alligatorFacts = ["thick scales", 80, "4 foot tail", "rounded snout", 80];

次に、filter()を使用して、80に等しいすべての値を返します。

alligatorFacts.filter(el => el === 80);

配列内の2つの80値は、この条件を満たす。 このコードは、新しい配列[80, 80]を返します。

filter()は、複数の検索結果値が必要なユースケースに役立ちます。

結論

この記事では、Array.includes()、Array.indexOf、Array.find()、およびArray.filterについて学習しました。 それぞれが、ユースケースのニーズに対するソリューションを提供できます。

• それが存在するかどうかだけを知る必要がありますか？ include（）を使用します。
• 要素自体を取得する必要がありますか？ 単一のアイテムにはfind（）を使用し、複数のアイテムにはfilter（）を使用します。
• 要素のインデックスを見つける必要がありますか？ indexOf（）を使用してプリミティブを検索するか、findIndex（）を使用して関数で検索します。

反復法、アクセサーメソッド、およびミューテイターメソッドを使用してJavaScriptの学習を続けます。