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

3729 ワード

実際の開発において、私たちはよく次のようなニーズに遭遇します.
  • は、特定の条件を満たす配列のすべての項目
  • を取得する.
  • 条件が満たされているかどうかを確認します.
  • は、配列に特定の値があるかどうかを検査する.
  • 配列の中で指定された値のインデックスが見つかりますか?
  • 本論文では,行列内のアイテムを検索するために使用できる4つの方法について議論する.これらの方法は:
  • filter
  • find
  • includes
  • indexOf
  • この四つの方法を一緒に見に行きましょう.
    Aray.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 は、配列の各要素に適用されるコールバック関数
  • です.
    配列内に項目が条件に一致していない場合、空の配列が返されます.
    特定の条件を満たすすべての要素が必要ではない場合があります.私たちはただ条件に合う要素が必要です.この場合には、find()方法が必要である.
    Aray.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);
    
    callback は、配列内の各値で実行される関数で、3つのパラメータがあります.
  • element -現在巡回されている要素(必須)
  • index -現在巡回されている要素の索引/位置(オプション)
  • array-現在の配列(オプション)
  • ただし、配列に項目が該当しない場合は、  undefinedしかし、もしある要素が配列内にあるかどうかを確認したいなら、どうすればいいですか?
    Aray.includes()includes() 方法は、配列がある値を含むかどうかを決定し、適切な場合に戻ります.  true または  falseしたがって、上記の例では、20が配列の要素の一つであるかどうかを確認する場合、以下のような動作が実行されてもよい.
    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
    
    Aray.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 は、配列から要素を検索する開始インデックスまたは位置(オプション)
  • です.includesに注意してください. 和  indexOf 方法は、厳密な等分性('===')を用いて配列を探索する.値の種類が異なる場合(例えば、4および'4')、それらはそれぞれ戻ってきます.  false 和  -1締め括りをつける
    これらの配列法を使用して、使用する必要がありません.  for ループすると、行列が検索できます.ご要望に応じて、どの方法が一番お似合いですか?
    以下はいつ各方法を使うかの要約です.
  • 特定の条件を満たす配列内のすべての項目を見つけたいなら、使用します.  filter
  • もし、少なくとも一つの項目が特定の条件に合致しているかどうかを確認したいなら、使用してください.  find
  • 行列に特定の値が含まれていることを確認したいなら、使用してください.  includes
  • 配列内で特定項目の索引を検索するには、indexOfを使用してください. .