Das JS-Array-Lernen gibt das erste Element zurück, das die angegebenen Bedingungen erfüllt

Im vorherigen Artikel „JS-Array-Lernen: Alle Elemente zurückgeben, die bestimmte Bedingungen erfüllen“ haben wir die Methode zum Filtern von Array-Elementen vorgestellt, um alle Elemente zu erhalten, die bestimmte Bedingungen erfüllen. Dieses Mal sprechen wir weiter über das Filtern von Elementen und stellen die Methode zum Erhalten des ersten Elements vor, das eine bestimmte Bedingung erfüllt. Freunde in Not können mehr darüber erfahren~

Der Hauptinhalt des heutigen Artikels ist: Durchlaufen Sie das Array und erkennen Sie, ob die Elemente vorhanden sind im Array erfüllen Geben Sie eine Bedingung an und geben Sie das erste Array-Element zurück, das die Bedingung erfüllt. Vereinfacht ausgedrückt: Es filtert die Array-Elemente gemäß der angegebenen Bedingung und gibt den Wert des ersten Array-Elements der symbolischen Bedingung zurück.

Im Folgenden stellen wir drei Methoden vor, beginnend mit der bekannten for-Schleife und stellen dann zwei integrierte Funktionen vor – sehen Sie, wie diese beiden Funktionen Array-Elemente filtern und das erste Element erhalten können, das die Bedingungen erfüllt.

Methode 1: for-Schleife verwenden

Implementierungsidee: Verwenden Sie die for-Anweisung, um das Array zu durchlaufen und festzustellen, ob die Array-Elemente die Bedingungen in jeder Schleife erfüllen, und geben Sie sie sofort aus. und verwenden Sie dann die break-Anweisung, um die gesamte Schleife zu verlassen.

Lassen Sie uns anhand von Beispielen mehr darüber erfahren:

Beispiel 1: Das erste Element im Ausgabearray, dessen Alter größer oder gleich 18 ist

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

Die Elemente im Altersarray, die größer oder gleich 18 sind, umfassen 18 und 20, aber 18 ist vorher in 20, also ist das erste hinzugefügte Element 18. Das Ausgabeergebnis lautet also:

Beispiel 2: Geben Sie das erste nicht numerische Element im Array aus

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;
　　} 
}

Ausgabeergebnis:

Methode 2: Verwenden Sie die Methode find()

Die Methode

find() ruft die Funktion einmal für jedes Element im Array auf, verwendet das angegebene zusätzliche Filterelement in der Rückruffunktion und gibt das erste Element zurück, das den Test besteht.

• Wenn ein Element im Array beim Testen der Bedingung „true“ zurückgibt, gibt find() das Element zurück, das die Bedingung erfüllt, und die Ausführungsfunktion wird für nachfolgende Werte nicht aufgerufen.

• Wenn es kein Element gibt, das die Bedingungen erfüllt, geben Sie undefiniert zurück

Syntax:

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

function callbackfn(Value, index, array): eine Rückruffunktion, die nicht weggelassen werden kann und kann bis zu drei Parameter akzeptieren: function callbackfn(Value,index,array)：一个回调函数，不可省略，最多可接受三个参数：

• value：当前数组元素的值，不可省略。

• index：当前数组元素的数字索引。

• array：当前元素属于的数组对象。

返回值：返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined。    

下面通过实例来具体了解一下：

示例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() 方法为数组中的每个元素都调用一次函数，在回调函数内利用给定添加过滤元素，返回第一个通过检测的元素的索引位置。

• 当数组中的元素在测试条件时返回 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() 方法可以返回第一个满足条件的元素索引，根据该索引，使用“数组名[索引]

Wert: Der Wert des aktuellen Array-Elements, der nicht weggelassen werden kann.

index: Der numerische Index des aktuellen Array-Elements.

array: das Array-Objekt, zu dem das aktuelle Element gehört.

Rückgabewert: Gibt den ersten Array-Elementwert zurück, der die Testbedingungen erfüllt. Wenn es niemanden gibt, der die Bedingungen erfüllt, wird undefiniert zurückgegeben.

Lassen Sie uns anhand von Beispielen mehr darüber erfahren: 🎜🎜🎜Beispiel 1: Geben Sie das erste Element im Array aus, dessen Alter größer oder gleich 18 ist -number im Array-Element 🎜🎜

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

🎜 Ausgabeergebnis: 🎜🎜🎜🎜🎜🎜Methode 3: Verwenden Sie die Methode findIndex()🎜🎜🎜🎜findIndex(), um die Funktion einmal für jedes Element im Array aufzurufen. Verwenden Sie die angegebene Methode, um Filterelemente hinzuzufügen in der Rückruffunktion und geben Sie die Indexposition des ersten Elements zurück, das den Test besteht. 🎜🎜🎜🎜Wenn ein Element im Array beim Testen der Bedingung „true“ zurückgibt, gibt findIndex() die Indexposition des Elements zurück, das die Bedingung erfüllt, und die Ausführungsfunktion wird für nachfolgende Werte nicht aufgerufen. 🎜🎜🎜🎜Wenn es kein Element gibt, das die Bedingungen erfüllt, wird -1 zurückgegeben🎜🎜🎜🎜Syntax: 🎜rrreee🎜Die Syntax dieser Methode ähnelt find() und der Parameterwert kann an find( übergeben werden) ) Methode. 🎜🎜Lassen Sie uns anhand von Beispielen mehr darüber erfahren: 🎜🎜🎜Beispiel 1: Geben Sie das erste Element im Array aus, dessen Alter größer oder gleich 18 ist.🎜🎜rrreee🎜Die Methode findIndex() kann den Index des ersten Elements zurückgeben Erfüllt die Bedingung, kann der Elementwert gemäß dem Index mithilfe der Form „array name[index]“ abgerufen werden. Daher ist das Ausgabeergebnis: 🎜🎜🎜🎜🎜🎜Beispiel 2: Geben Sie das erste nicht numerische Element im Array aus🎜🎜rrreee🎜Das Ausgabeergebnis ist: 🎜🎜🎜🎜🎜Okay, das ist alles. Sie können Folgendes ansehen: 🎜Javascript-Video-Tutorial🎜🎜

Das obige ist der detaillierte Inhalt vonDas JS-Array-Lernen gibt das erste Element zurück, das die angegebenen Bedingungen erfüllt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!