序章

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

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

この記事では、 Array.includes(), Array.indexOf, Array.find()、 と Array.filter.

前提条件

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

使用する includes()

The 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);

このコードは true 数値だから 80 配列内にあります。

alligatorFacts.includes('80');

このコードは false 文字列値のため '80' アレイにありません。

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

使用する indexOf()

The 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);

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

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

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

使用する find()

The 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()

The 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);

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

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

結論

この記事では、 Array.includes(), Array.indexOf, Array.find()、 と Array.filter. それぞれが、ユースケースのニーズに対するソリューションを提供できます。

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

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