Vérifiez si le tableau contient une valeur en JavaScript
-
Utilisation de la fonction
.indexOf()pour vérifier si le tableau contient une valeur en JavaScript -
Utilisation de la fonction
.includes()pour vérifier si le tableau contient une valeur en JavaScript -
Utilisation de la fonction
.find()pour rechercher un élément dans un tableau en JavaScript -
Utilisation de la fonction
.filter()pour rechercher un élément dans un tableau en JavaScript -
Utilisation de la boucle
forsimple pour rechercher un élément - Noter
Souvent, nous nous trouvons dans une situation pour vérifier si le tableau contient une valeur en JavaScript. Même si la fonctionnalité de recherche peut être codée avec des syntaxes JavaScript de base à l’aide de boucles, il est bon de connaître les fonctionnalités intégrées disponibles pour la recherche de tableau en JavaScript, leur utilisation, les types de retour et le comportement. Cela rend notre tâche beaucoup plus facile, car nous devons coder moins. La fonctionnalité sera efficace et moins sujette aux bugs avec des fonctions intégrées. Voyons comment rechercher un élément dans un tableau.
Utilisation de la fonction .indexOf() pour vérifier si le tableau contient une valeur en JavaScript
La fonction .indexOf() est une fonction couramment utilisée en javascript. Cela fonctionne bien lors de la recherche d’un élément dans un tableau ou même une chaîne.
Syntaxe
indexOf(element, index)
Paramètre
Il prend l’élément, à rechercher, comme paramètre. Et un paramètre optionnel qui indique à la fonction, l’index à partir duquel la recherche doit être lancée (à partir de 0). Si nous fournissons une valeur négative, cela signifiera de rechercher à partir de la fin du tableau à la position spécifiée.
Valeur de retour
La fonction renvoie l’index de l’élément de recherche à partir de 0 dans le tableau si elle a pu trouver l’élément. Sinon, il renverra -1, indiquant qu’il n’a pas pu trouver l’élément. S’il y a plus d’une correspondance dans un tableau, la fonction .indexOf() renverra l’index de la première correspondance.
Prise en charge du navigateur
La fonction .indexOf() est prise en charge pour toutes les principales versions de navigateur.
Usage
L’utilisation de la fonction indexOf() sur un tableau est la suivante.
let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
console.log(fruits.indexOf('Pear'));
console.log(fruits.indexOf('Tomato'))
Production:
2
-1
Pour la fonction de recherche, nous vérifions si le type de retour du .indexOf(searchText) est supérieur à -1. Si tel est le cas, le résultat de la recherche doit être true sinon false. Regardons le même exemple discuté ci-dessus pour vérifier si un élément existe dans le tableau.
function isFruit(fruitName) {
let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
if (fruits.indexOf(fruitName) > -1) {
return true;
} else {
return false;
}
}
isFruit('Pear');
isFruit('Cat');
Production:
true
false
Utilisation de la fonction .includes() pour vérifier si le tableau contient une valeur en JavaScript
La fonction includes() de JavaScript vérifie si un élément donné est présent dans un tableau. Il renvoie une valeur booléenne. Par conséquent, il est mieux adapté aux contrôles de condition if.
Syntaxe
includes(keyword)
includes(keyword, index)
Paramètre
La fonction prend deux paramètres. Habituellement, nous utilisons cette fonction sous la forme .includes(searchString). Le paramètre searchString est l’élément que nous souhaitons rechercher, et le paramètre index fait référence à l’index du tableau à partir duquel rechercher. Le paramètre index est facultatif.
Valeur de retour
.includes() renvoie true si searchString est trouvé en tant qu’élément du tableau. Si elle n’est pas trouvée, la fonction renvoie false.
Prise en charge du navigateur
La fonction .includes() fonctionne dans presque tous les navigateurs Web, à l’exception d’Internet Explorer. Par conséquent, si votre projet est pris en charge sur IE, vous devrez peut-être opter pour la fonction indexOf().
Usage
Voyons comment appliquer le includes() dans un tableau.
let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
console.log(fruits.includes('Pear'));
console.log(fruits.includes('Tomato'))
Production:
true
false
La fonction includes() peut être directement utilisée dans les conditions if car elle renvoie une valeur booléenne en sortie. L’exemple ci-dessus peut être utilisé dans le if conditionnel comme suit. Sachez simplement que ce code peut ne pas fonctionner dans IE car includes() n’y est pas pris en charge.
function isFruit(fruitName) {
let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
if (fruits.includes(fruitName)) {
return true;
} else {
return false;
}
}
isFruit('Pear');
isFruit('Cat');
Production:
true
false
Utilisation de la fonction .find() pour rechercher un élément dans un tableau en JavaScript
Une autre façon de vérifier si un élément est présent dans un tableau est d’utiliser la fonction .find(). Par rapport aux fonctions .indexOf() et .includes(), .find() prend une fonction en paramètre et l’exécute sur chaque élément du tableau. Il renverra la première valeur qui est satisfaite par la condition mentionnée dans la fonction de paramètre.
Syntaxe
.find((keyword) => {/* Some condition checks */})
.find((keyword, index) => {/* Some condition checks */})
Paramètre
La fonction Array.find() prend une fonction comme paramètre d’entrée. Habituellement, nous utilisons des fonctions fléchées comme paramètres. Et ces fonctions fléchées peuvent contenir des vérifications de condition comme item => item > 21. Un autre paramètre optionnel est l’index qui représente l’index d’itération courant. Le .find() exécute la fonction flèche sur chaque élément du tableau. Par conséquent, il fournit l’itérateur comme argument à la fonction flèche pour aider à d’autres vérifications conditionnelles.
Valeur de retour
.find() est un peu différent des fonctions indexOf(), includes() de javascript. Elle renvoie la valeur de l’élément s’il est trouvé, sinon la fonction renvoie undefined.
Prise en charge du navigateur
Comme la fonction .includes(), .find() fonctionne dans presque tous les navigateurs Web, à l’exception d’Internet Explorer. Par conséquent, nous devons être sûrs que notre projet n’est pas pris en charge pour IE avant de planifier l’utilisation de telles fonctions pour les opérations sur les tableaux.
Usage
Reportez-vous à l’utilisation suivante dans un tableau.
let age = [21, 43, 23, 1, 34, 12, 8];
console.log(age.find(i => i > 20));
console.log(age.find(i => i > 21))
Production:
21
43
Nous pouvons être un peu surpris par la sortie de age.find(i => i > 21), car elle renvoie 43 au lieu de 23 qui était le nombre immédiatement supérieur à 21 dans age déployer. Notez que la fonction .find() renvoie l’élément suivant qui satisfait la condition mentionnée dans la fonction de tableau dans l’ordre chronologique. Pour rechercher un élément avec un bloc if, on peut utiliser le code suivant.
function findPeerAge(myAge) {
let age = [21, 43, 23, 1, 34, 12, 8];
if (age.find(i => (i === myAge))) {
return true;
} else {
return false;
}
}
findPeerAge(23);
findPeerAge(40);
true
false
Utilisation de la fonction .filter() pour rechercher un élément dans un tableau en JavaScript
La fonction .filter() est principalement utilisée dans les opérations de traitement des tableaux. Surtout quand il s’agit de filtrer des éléments, satisfaisant un critère, hors d’un tableau. Elle renvoie un tableau d’éléments satisfaisant aux critères définis dans la fonction passée en argument.
Syntaxe
Suit la même syntaxe que Array.find().
.filter((keyword) => {/* Some condition checks */})
.filter((keyword, index) => {/* Some condition checks */})
Paramètre
La fonction Array.filter() accepte une fonction en ligne ou une fonction flèche en tant que paramètre. La fonction flèche contiendra les critères de filtrage. La fonction .filter() exécute la fonction flèche sur chaque élément du tableau et renvoie les éléments qui satisfont aux conditions mentionnées dans la fonction flèche. La fonction flèche aura le keyword en entrée et l’itération courante en index.
Valeur de retour
Contrairement aux fonctions de recherche de tableau que nous avons vues jusqu’à présent, le .filter() renvoie un tableau contenant les éléments satisfaisant les conditions mentionnées dans la fonction flèche. Si element est trouvé, le tableau retourné contiendra les éléments requis, sinon un tableau vide sera retourné par la fonction.
Prise en charge du navigateur
La fonction .filter() est supportée par tous les navigateurs y compris Internet Explorer. Vous pouvez donc utiliser la fonction .filter() sans vous soucier du support attendu du navigateur.
Utilisation : l’utilisation de cette fonction est la suivante
let age = [21, 43, 23, 1, 34, 12, 8];
console.log(age.filter(i => i > 20));
console.log(age.filter(i => i > 21));
Production:
[21, 43, 23, 34]
[43, 23, 34]
Comme on le voit dans le résultat, la fonction filter() renvoie un tableau. Si nous devons rechercher un élément dans un tableau, nous pouvons utiliser la fonction filter() comme illustré dans l’exemple de code suivant. Nous utilisons l’attribut .length du tableau renvoyé par la fonction filter() pour déterminer s’il pourrait trouver l’élément ou non. Si la fonction renvoie un tableau vide, cela signifie qu’elle n’a pas pu trouver le mot-clé de recherche.
function findAge(myAge) {
let age = [21, 43, 23, 1, 34, 12, 8];
if (age.filter(i => (i === myAge)).length) {
return true;
} else {
return false;
}
}
findAge(23);
findAge(40);
Production:
true
false
Utilisation de la boucle for simple pour rechercher un élément
On peut trouver un élément dans un tableau avec les méthodes de base de javascript, la condition if et la boucle for. Le code suivant renverra true si l’élément est trouvé, sinon renverra false. S’il existe plusieurs occurrences du même élément, la fonction ne renvoie que la première correspondance.
function findAge(myAge, ageAry) {
let elementFound = false;
for (let i = 0; i < ageAry.length; i++) {
if (ageAry[i] === myAge) {
return true;
}
}
return elementFound;
}
let srcArray = [21, 43, 23, 1, 34, 12, 8];
findAge(23, srcArray);
findAge(40, srcArray);
findAge(8, srcArray);
findAge(23, srcArray);
Production:
true
false
true
true
Noter
- Les fonctions
.indexOf(),.includes()recherchent une correspondance d’élément exacte. Nous ne pouvons pas l’utiliser pour rechercher des chaînes partielles. Cela signifie fournir une partie d’un élément car le paramètre de recherche ne fonctionnera pas. - Nous pouvons implémenter une recherche partielle d’éléments avec les fonctions
Array.filter()etArray.find()car elles nous permettent de définir les critères de recherche de manière personnalisée.