IndexOf 関数と findIndex 関数の違い

JavaScript は、クライアント側とサーバー側の両方で使用できる動的プログラミング言語です。 JavaScript は、インタラクティブな Web ページを作成するために使用されます。 React JS、Angular JS、Node JS などの多くのフレームワークがあります。 JavaScript には、指定された要素のインデックスを取得するためのメソッドがいくつか用意されています。 IndexOf と findIndex がこれらのメソッドです。

JavaScriptのindexOf関数

JavaScript のindexOf 関数を使用すると、配列内の要素を検索し、その配列内で最初に見つかったインデックスを返すことができます。要素が見つからない場合は、-1 が返されます。このメソッドの構文は次のとおりです:

リーリー

ここで、array は、indexOf メソッドを実行する要素のリストです。 Element は検索対象の要素を表し、index は検索対象の要素の開始位置です。

＃＃＃例＃＃＃

月名の配列を考えてみましょう。 IndexOf メソッドを使用して、月「Mar」のインデックスを見つけます

リーリー ＃＃＃出力＃＃＃ リーリー

出力インデックスは「2」になります。検索要素が配列内に存在しない場合は、出力として「-1」が返されます。

リーリー

months 配列に要素が存在しないため、indexOf 関数は「-1」を返します。

findIndex 関数 JavaScript

JavaScript の array.findIndex() 関数は、関数で指定された条件が満たされた場合に、配列内に存在する最初の要素のインデックスを返すために使用されます。この要素は、関数呼び出し中にユーザーによって渡されます。要素が配列内に存在しない場合は、-1 が返されます。

findIndex メソッドの構文は次のとおりです。

リーリー

ここで、「arr」は、findIndex 関数が実行されている配列を表します。

findIndex メソッドには次のパラメータがあります:

func

- これは、指定された条件のコールバック関数です。次のパラメータを受け取ります:

• o 要素
  - 配列

  • 内の現在の要素です。

    o インデックス
  - 現在の要素のインデックス (オプション)

  • o arr
  - このメソッドが実行される配列もオプションであることを示します

  thisArg
- これはオプションの値です。

• findIndex メソッドは 2 つの方法で使用できます。1 つは「return」キーワードを使用する方法、もう 1 つは「inline」関数を使用する方法です。ここで、関数を別の関数に渡すことを「コールバック関数」と呼びます。

「return」キーワードを使用します

赤、緑、青、黄、オレンジなどの色のセットがあるとします。黄色のインデックスが欲しいです。 ＃＃＃＃＃＃例＃＃＃ リーリー

出力

次の出力が生成されます:

リーリー

ここでは、要素「 yellow 」がインデックス位置「 3 」に出現するため、出力「 3 」が得られます。

インライン関数を使用する

上記と同じプログラムは次のように書くこともできます:

Example

リーリー

出力

次の出力が生成されます:

リーリー

要素「blue」が指定された配列の 2 番目の位置に出現するため、出力「2」が得られます。

indexOf 関数と findIndex 関数の違い

indexOf メソッドと findIndex メソッドには 2 つの主な違いがあります:

最初の違い

「indexOf メソッドは要素をパラメーターとして受け取りますが、findIndex メソッドではコールバック関数がパラメーターとして渡されます。」

Example

次の例でこれを説明します:

リーリー

出力

次の出力が生成されます:

リーリー

どちらの場合も、要素「banana」が最初のインデックスに出現するため、出力は「1」となります。 IndexOf メソッドでは、検索する要素がパラメータとして渡され、関数は配列の各要素を比較して、要素が見つかった最初の位置を返します。

findIndex では、このメソッドは配列内の各要素を関数に送信し、関数は配列内の指定された要素をチェックします。要素が見つかった場合は、ブール値 (「True」) が返され、findIndex メソッドはその特定のインデックスを返します。

どちらの場合も、値または要素が配列に存在しない場合、両方のメソッドは出力として「-1」を返します。

2 番目の違い

indexOf メソッドは、単純な要素のインデックスを取得するのに最適です。ただし、オブジェクトなど、より複雑なもののインデックスを探している場合、このメソッドは適切に機能しません。これは「参照の等価性」によるものです。

参照の等価性に従って、比較される 2 つのオブジェクトがまったく同じオブジェクトを参照している場合にのみ、比較は true を返します。 JavaScript では、2 つの同一のオブジェクトは、同じオブジェクトを参照しない限り同一ではありません。 ＃＃＃＃＃＃例＃＃＃＃＃＃ ＃＃＃

次の例を通してこれを理解してみましょう:

リーリー

出力

次の出力が生成されます:

リーリー

最初の IndexOf 関数では、オブジェクトが同じであっても、指定された配列内でそれが見つからないため、「-1」を返します。

最後に使用したindexOfメソッドでは、実際の参照を渡すと、オブジェクトのインデックスが返されます。 findIndex メソッドは、指定された配列内のすべてのキーと値のペアをチェックして、その特定のオブジェクトの正しいインデックスを見つけて返します。

＃＃＃結論は＃＃＃

indexOf メソッドと findIndex メソッドは両方とも、指定された要素の最初のインデックスを返します。 IndexOf メソッドはインデックスを返す要素をパラメータとして受け取りますが、findIndex メソッドは関数をパラメータとして受け取ります。ただし、どちらの関数も出力として「-1」を返します。

以上がIndexOf 関数と findIndex 関数の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。