Introduction
Lorsque nous essayons de vérifier si un certain élément existe dans un tableau dans JavaScript, nous avons traditionnellement dû utiliser des méthodes qui n’étaient pas Initialement conçu pour cela.
avec la nouvelle proposition ECMAScript 2016 (ES7), nous avons enfin une méthode native pour cela: Comprend (). Voyons en détail en détail:
Syntaxe
La méthode Inclus () détermine si un arrangement comprend un élément donné, retourne vrai ou Faux selon le cas.
Votre syntaxe est la suivante (spécification complète ici):
Array.Prototype.Inincludes (Searchhelement)
Où:
- est l’élément à rechercher.
- de diindex est un paramètre facultatif qui marque la position sur la matrice à partir de laquelle l’élément donné est démarré.
Exemple de base
L’exemple le plus simple est que l’endroit où nous recherchons un élément dans un tableau:
DIV = « E38F012807 »> var myarr =; Console.info (Myarr.Inclut (‘Donna’); // troconsole.info (myarr.Inclut (‘pensé »); // faux pré>
Notez que cette méthode renvoie un booléen, quelque chose qui le rend différent de l’index traditionnel () que nous utilisons depuis les années 90:
console.info (myarr.indexof ("Donna"); // 1console.info (myarr.indexof ("pensé"); // -1 pré>
Heureusement, nous gagnons maintenant une lisibilité pour inclure nos chèques dans un flux logique sans avoir à convertir le résultat:
// Old / Ully Mode: Si (Myarr.indexof ('')! == -1) {/ * OK, la valeur existe! * /} // nouvelle / belle es7if (myarr.inclut ('')) {/ * OK, la valeur existe! * /} pré>
Exemples avec index
Si nous devons utiliser le deuxième argument, les exemples resteraient comme suit:
console.info (myarr.Inclut ("quel ', 5)); // faltereconsole.info (myarr.Inclut ('Donna', 1); // torconsole.info (myarr.includes ('vento', -1)); // true pré> comme curiosité, nous pouvons voir dans le dernier exemple qu'il est possible d'utiliser un indice négatif afin que le nombre commence de la droite.
REMARQUE: Comme d'habitude, les résultats pendant les travaux avec des tableaux sont toujours ajustés en indice zéro.
valeurs spéciales et expressions
comme avec des valeurs simples, nous pouvons effectuer des vérifications. Sur des valeurs spéciales et des expressions:
"E38F012807"> // conférencierVar str = () = > 'Donna'; var myarr =; Console.info (myarr.Inclut (NAN)); // torconsole.info (myarr.includes (Infinity)); // trueconsole.info (myarr.includes (Str ()); // torconsole.info (myarr.includes ('Don'); // FALSE
Le dernier chèque illustre comment inclut () nécessite l’ensemble de l’élément (dans ce cas «Donna») de signaler une coïncidence.
Remarque: L’identification de NaN dans un ensemble est l’une des nouveautés de l’inclut () contre l’indexof ().
agissant sur des chaînes
en plus de l’objet de réseau, y compris () il a également été ajouté comme méthode pour l’objet String, ce qui nous permet d’effectuer les chèques sur les chaînes de texte. Dans ce cas, il est possible de rechercher à la fois des mots et des phrases et des séquences de caractères:
var Str = 'Dans une place de La Mancha, dont je ne veux pas me souvenir, il n'a pas beaucoup de temps à vivre une Hidalgo de los La Launa dans le chantier naval, Ancien Adarga, Skinny Sprout et Gagged Runner.'; console.info (str.Inclut ("place"); // torconsole.info (str.includes ('de qui'); // torconsole.info (str.includes ('ero ACO)); // true - > Je veux me souvenir de Mecorder.info (str.includes ("tache", 18)); // torconsole.info (str.Inclut («tache», 19)); // FALSE
Remarque: le texte Quichotte que je l’ai sorti d’ici. Je cite la source parce qu’il semble que ce soit le thème chaud ces derniers temps avec ce texte particulier 😉
Un problème important ici est d’avertir que le paramètre de fromdex est appliqué à chaque lettre, pas à chaque mot. Par conséquent, la « tache » est comprise entre 18 + 1 premiers caractères, mais pas environ 19 + 1. Le « + 1 » dans chaque terme est dû au début du nombre (comme dans la matrice) également dans 0.
typique Les matrices
La nouvelle méthode peuvent également être appliquées sur des tableaux dactylographiés:
var typedarr = uint8array.of (3, 14, 15); Console.info (Typedarr.Comprend (15)); // True
Il est intéressant de mettre en évidence ici Utilisation avec UINT8CLAMPEDARRAY, résultat du travail avec des images et des toiles via la méthode CanvasRendringContext2D.getimageData ().
Performance
Il est temps de vérifier comment cette méthode cède contre l’index traditionnel de ().
Pour mesurer les temps, nous utiliserons la console du navigateur lui-même et sa méthode TIME ().
En tant que sources de données, nous utiliserons 3 tableaux de longueur différente (100, 5000 et 20000), ce qui nous permettra de voir comment les temps sont mis à l’échelle en fonction du nombre d’éléments sur lesquels la recherche doit effectuer.
Le code préparatoire serait comme suit:
Var préfixe = ' Objet-'; var ar100 = array.apply (null, {longueur: 100}) .map ((x, y) = > préfixe + y), ar5000 = array.apply (null, { Longueur: 5000}) .MAP ((x, y) = > préfixe + y), ar20000 = array.apply (null, {longueur: 20000}) .map (x, y) = > préfixe + y); Var clef = (arr) = > préfixe + arr.l.length / 2; // petit sizeconole.time ("Recherchetem"); Console.info (Arre100.Length, arr100.Inclut (clé (Arre100)); Console.TEND ("Recherchetem"); Console.Time ('Recherchetem'); Console.info (Ar100.Indexof (Key (Arre100))! == -1); Console.Tonend ("Recherchetem"); // Sizeconsole moyen.Time ("Recherchetem"); Console.info (AR5000.Inclut (clé (ARR5000)); Console.TriDeend ("Recherchetem"); Console.Time ('CherchingItem'); Console.info (AR5000.INDEXOF (TORE (ARR5000))! == -1); Console.Tonend ("RechercheringItem"); // grosse sizeconsole.time ("Recherchetem"); Console.info (Touche (Arr20000)); Console.TriDeend ("RechercheItem"); Console. P> Nous vérifions chaque matrice avec les deux méthodes que nous comparons (y compris et indexof). Le code est quelque peu répétitif, mais sur des fins didactiques, il est très clair. Les tableaux Nous les créons par programme, obtenant des arrangements avec cette pinte:
La fonction "touche" rend l'élément que nous allons rechercher dans notre tableau. Pour que les résultats soient plus précis, cet extrait choisit la valeur centrale de chaque matrice, ce qui oblige l'interprète à parcourir un nombre proportionnel d'éléments dans chaque test.
avec tous préparé, nous avons lancé notre script et obtenu Les résultats suivants:
| 100 arrangements > | 5000 arrangements | 20000 arrangements | |
|---|---|---|---|
| comprend () | 1.52ms | 1.24ms | 1.29ms |
| indexf () | 1.38ms | 1.22ms | 1.21ms |
Remarque: les résultats obtenus ci-dessus sont la moyenne des temps après 100 exécutions.
Compte tenu des données, le nombre d’éléments initiaux ne pénalise pas, résultant même plus rapide le grand tableau.
ni une différence de performance entre les méthodes d’indexof () Comprend () quelque chose, d’autre part, habituel dans des fonctionnalités récemment incorporées dans les différents navigateurs.
Support
Comme avec toutes les fonctionnalités émergentes JavaScript, vous devez jeter un coup d’œil à la Prise en charge de cette nouvelle méthode entre les différents navigateurs:
| Firefox | Internet Explorer | EDGE | OPERA | SAFARI | Android | OPERA MOBILE | SAFARI MOBILE | CHROME POUR ANDROID | 47 | 43 | non pris en charge | non pris en charge | 34 | 9 | non pris en charge | 34 | 9 | 47 |
|---|
Sauvegarde du cas des navigateurs Microsoft, le support d’aujourd’hui (novembre 2016) est très complet.
Pollyfill
travailler précisam Entité avec les navigateurs qui ne supportent pas cette méthode pour le moment (Internet Explorer et Edge), nous pouvons implémenter ce «polyfill». Comme d’habitude, il est conseillé de remettre ce code uniquement lorsque la méthode n’est pas présente de manière native.
Remarque: le code d’origine a été extrait et re-conditionné ici.
Conclusion
lorsque nous programmons, Il s’avère trivial Déterminer si un élément donné est présent dans un tableau. Jusqu’à présent, nous avons besoin de l’utilisation de l’indexof () et une conversion ultérieure de leur retour à une valeur booléenne.
avec des incluses (), le problème est résolu en ayant une méthode native qui fonctionne correctement et qu’elle fonctionne est grammaticalement beaucoup plus précis. Bien que votre propre syntaxe puisse être inappropriée (nous sommes plus habitués à des instructions telles que «a ()» ou «contient ()»), votre choix est due à la sauvegarde de la rétraction avec ces méthodes déjà définies dans d’autres cadres fréquemment utilisés (moools) ou Dans la langue javascript elle-même (set.pototype.has.has ())).
Comme toujours, toute amélioration est la bienvenue.