JS 配列学習は、指定された条件を満たす最初の要素を返します

前回の記事「JS配列学習：与えられた条件を満たすすべての要素を返す」では、配列要素をフィルタリングして与えられた条件を満たすすべての要素を取得する方法を紹介しました。今回は引き続き要素のフィルタリングについて説明し、与えられた条件を満たす最初の要素を取得する方法を紹介します。 arrays 配列内の要素が指定された条件を満たすかどうか、条件を満たす最初の配列要素を返します。簡単に言うと、指定された条件に従って配列要素をフィルタリングし、シンボリック条件の最初の配列要素の値を返します。

おなじみの for ループから始めて 3 つのメソッドを紹介し、次に 2 つの組み込み関数を紹介します。これらの 2 つの関数がどのように配列要素をフィルターし、条件を満たす最初の要素を取得するかを見てみましょう。

方法 1: for ループを使用する実装アイデア: for ステートメントを使用して配列を走査し、それぞれの配列要素が一致するかどうかを判断します。ループ条件。最初の要素が条件を満たすと、その要素はすぐに出力され、break ステートメントを使用してループ全体を終了します。

例を通して詳しく学びましょう:

例 1: 年齢が 18

var ages = [3, 10, 18, 20];
for(var i=0;i<ages.length;i++){
	if (ages[i] >= 18) {
		console.log(ages[i]);
		break;
	}
}

# 以上である配列内の最初の要素を出力します。 ##ages 配列 18 以上の要素が 2 つあります (18 と 20)。ただし、18 は 20 より前なので、最初に追加される要素は 18 です。したがって、出力結果は次のようになります。

#例 2: 配列内の最初の非数値要素を出力します

var a = [1,"php中文网", 10, "red", 20,"22"];
for(var i=0;i<a.length;i++){
	var re = /^[0-9]+.?[0-9]*/;//判断字符串是否为数字  //判断正整数/[1−9]+[0−9]∗]∗/ 
　　if (!re.test(a[i])) { 
　　　　console.log(a[i]);
		break;
　　} 
}

出力結果:

##方法 2: find() メソッドを使用する

find() メソッドは次のとおりです。関数は要素ごとに 1 回呼び出され、指定されたフィルター要素がコールバック関数内に追加され、テストに合格した最初の要素が返されます。

条件のテスト時に配列内の要素が true を返すと、find() は条件を満たす要素を返し、後続の値に対して実行関数は呼び出されません。

• 条件を満たす要素がない場合は、未定義を返す

• 構文:

  array.find(function callbackfn(Value,index,array),thisValue)

function callbackfn (Value,index ,array)

: コールバック関数。省略できず、最大 3 つのパラメータを受け入れることができます:

value: 現在の配列要素の値、省略することはできません。

• index: 現在の配列要素の数値インデックス。

• array: 現在の要素が属する配列オブジェクト。

• 戻り値: テスト条件を満たす最初の配列要素の値を返します。条件を満たすものがなかった場合は、未定義を返します。
  例を通して詳しく学びましょう:

例 1: 年齢が 18

function checkAdult(age) {
    return age >= 18;
}
var ages = [3, 10, 18, 20];
var age=ages.find(checkAdult);
console.log(age);

# 以上である配列内の最初の要素を出力します。 ##出力結果：

18

例 2: 配列内の最初の非数値要素を出力

function checkAdult(num) {
	var re = /^[0-9]+.?[0-9]*/;//判断字符串是否为数字  //判断正整数/[1−9]+[0−9]∗]∗/ 
    return !re.test(num);
}

var a = [1,"php中文网", 10, "red", 20,"22"];
console.log(a.find(checkAdult));

出力結果:

方法 3: findIndex() メソッドを使用する

#findIndex() メソッドは、配列内の要素ごとに関数を 1 回呼び出します。フィルター要素を確実に追加し、テストに合格した最初の要素のインデックス位置を返します。

条件のテスト時に配列内の要素が true を返した場合、findIndex() は条件を満たす要素のインデックス位置を返し、後続の値は実行を呼び出しません。関数。

条件を満たす要素がない場合は、-1を返す

• 構文:

array.findIndex(function callbackfn(Value,index,array),thisValue)

• この構文メソッドと find() 同様に、パラメータ値を find() メソッドに渡すことができます。
  例を通して詳しく学びましょう:

例 1: 年齢が 18

function checkAdult(age) {
    return age >= 18;
}
var ages = [3, 10, 18, 20];
var age=ages.findIndex(checkAdult);
console.log(age);
console.log(ages[age]);

# 以上である配列内の最初の要素を出力します。 ##findIndex()メソッドは、最初に条件に合致した要素のインデックスを返すことができ、このインデックスに従って「

配列名[インデックス]

」の形式で要素の値を取得することができます。したがって、出力結果は次のようになります。

例 2: 配列内の最初の非数値要素を出力します

function checkAdult(num) {
	var re = /^[0-9]+.?[0-9]*/;//判断字符串是否为数字  //判断正整数/[1−9]+[0−9]∗]∗/ 
    return !re.test(num);
}

var a = [1,"php中文网", 10, "red", 20,"22"];
var index=a.findIndex(checkAdult);
console.log(index);
console.log(a[index]);

出力結果は次のようになります:

わかりました。これですべてです。必要な場合は、これをご覧ください: JavaScript ビデオ チュートリアル

以上がJS 配列学習は、指定された条件を満たす最初の要素を返しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。