Dans l'article précédent « JS Array Learning : renvoyer tous les éléments qui répondent à des conditions données », nous avons présenté la méthode de filtrage des éléments d'un tableau pour obtenir tous les éléments qui répondent à des conditions données. Cette fois, nous continuons à parler du filtrage des éléments et à présenter la méthode pour obtenir le premier élément qui remplit une condition donnée. Les amis dans le besoin peuvent en apprendre davantage ~
Le contenu principal de l'article d'aujourd'hui est : parcourir le tableau et détecter si les éléments sont présents. dans le tableau satisfaire Spécifie une condition et renvoie le premier élément du tableau qui satisfait à la condition. Pour faire simple : il filtre les éléments du tableau en fonction de la condition spécifiée et renvoie la valeur du premier élément du tableau de la condition symbolique.
Présentons 3 méthodes ci-dessous, en commençant par la boucle for familière, puis en introduisant 2 fonctions intégrées - voyons comment ces deux fonctions peuvent filtrer les éléments du tableau et obtenir le premier élément qui remplit les conditions.
Méthode 1 : utiliser la boucle for
Idée d'implémentation : utilisez l'instruction for pour parcourir le tableau et déterminez si les éléments du tableau remplissent les conditions dans chaque boucle lorsque le premier élément remplit les conditions, affichez-le immédiatement ; puis utilisez l'instruction break pour quitter la boucle entière.
Apprenons-en plus à travers des exemples :
Exemple 1 : Le premier élément du tableau de sortie dont l'âge est supérieur ou égal à 18
var ages = [3, 10, 18, 20];
for(var i=0;i<ages.length;i++){
if (ages[i] >= 18) {
console.log(ages[i]);
break;
}
}Les éléments supérieurs ou égaux à 18 dans le tableau des âges incluent 18 et 20, mais 18 est dans 20 avant, donc le premier élément ajouté est 18. Le résultat de sortie est donc :
Exemple 2 : afficher le premier élément non numérique du tableau
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;
}
} Résultat de sortie :
Méthode 2 : utiliser la méthode find()
La méthodefind() appelle la fonction une fois pour chaque élément du tableau, utilise l'élément de filtre d'addition donné dans la fonction de rappel et renvoie le premier élément qui réussit le test.
Lorsqu'un élément du tableau renvoie vrai lors du test de la condition, find() renvoie l'élément qui remplit la condition et la fonction d'exécution ne sera pas appelée pour les valeurs suivantes.
S'il n'y a aucun élément qui remplit les conditions, renvoie undéfini
Syntaxe :
array.find(function callbackfn(Value,index,array),thisValue)
function callbackfn(Value, index, array) : une fonction de rappel, qui ne peut être omise , et peut accepter jusqu'à trois paramètres : 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() 方法可以返回第一个满足条件的元素索引，根据该索引，使用“数组名[索引]
value : La valeur de l'élément actuel du tableau, qui ne peut être omis.
index : L'index numérique de l'élément actuel du tableau.
array : l'objet tableau auquel appartient l'élément actuel. 
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]);
🎜🎜🎜🎜Méthode 3 : Utilisez la méthode findIndex()🎜🎜🎜🎜findIndex() pour appeler la fonction une fois pour chaque élément du tableau, utilisez le donné pour ajouter des éléments de filtre dans la fonction de rappel et renvoie la position d'index du premier élément qui réussit le test. 🎜🎜🎜🎜Lorsqu'un élément du tableau renvoie vrai lors du test de la condition, findIndex() renvoie la position d'index de l'élément qui remplit la condition, et la fonction d'exécution ne sera pas appelée pour les valeurs suivantes. 🎜🎜🎜🎜S'il n'y a aucun élément qui remplit les conditions, -1 est renvoyé🎜🎜🎜🎜Syntaxe : 🎜rrreee🎜La syntaxe de cette méthode est similaire à find(), et la valeur du paramètre peut être transmise à find( ) méthode. 🎜🎜Apprenons-en plus à travers des exemples : 🎜🎜🎜Exemple 1 : Afficher le premier élément du tableau dont l'âge est supérieur ou égal à 18🎜🎜rrreee🎜La méthode findIndex() peut renvoyer l'index du premier élément qui remplit la condition, selon l'index, la valeur de l'élément peut être obtenue en utilisant la forme "nom du tableau[index]". Par conséquent, le résultat de sortie est : 🎜🎜🎜🎜🎜🎜 Exemple 2 : Afficher le premier élément non numérique du tableau 🎜🎜rrreee🎜Le résultat de sortie est : 🎜🎜🎜🎜🎜D'accord, c'est tout pour l'instant, si vous avez besoin dessus, vous pouvez regarder : 🎜tutoriel vidéo javascript🎜🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
