Introducere
Când încercăm să verificăm dacă un anumit element există într-o matrice în JavaScript, am avut în mod tradițional metode care nu erau Proiectat inițial pentru acest lucru.
cu noua propunere ECMAScript 2016 (ES7), în cele din urmă avem o metodă nativă pentru acest lucru: include (). Haideți-o în detaliu:
sintaxă
Include () Metoda determină dacă un aranjament include un element dat, returnați adevărat sau Fals, după caz.
Sintaxa dvs. este după cum urmează (specificație completă aici):
array.protype.include (căutare)
unde:
- Searchelement Este elementul de căutare.
- FromIndex este un parametru opțional care marchează poziția pe matrice din care este pornit elementul dat.
exemplu de bază
Cel mai simplu exemplu este că în cazul în care căutăm un element într-o matrice:
Rețineți că această metodă returnează o booleană, ceea ce face diferit de indexul tradițional () pe care l-am folosit de la anii nouăzeci:
console.info (myarr.indexof ('donna'); // 1console.info (myarr.indexof ("gândire"); // -1
Din fericire, acum obținem o citire pentru a include verificările noastre într-un flux logic fără a fi nevoie să convertiți rezultatul:
// vechi / urât moda: dacă (myarr.Indexof ('')! == -1) {/ * OK, valoarea există! * /} // NEW / NICE ES7IF (Myarr.includes ('')) {/ * OK, valoarea există! * /}
Exemple cu index
Dacă trebuie să folosim al doilea argument, exemplele ar rămâne după cum urmează:
console.info (myarr.include (", care", 5)); // faltereconsol.info (myarr.include ('donna', 1); // torconsole.info (myarr.include ("ventil", -1)); // Adevărat
ca o curiozitate, putem vedea în ultimul exemplu că este posibilă utilizarea unui indice negativ, astfel încât numărul să înceapă din dreapta.
Notă: Ca de obicei, rezultatele în timpul lucrărilor cu matrice sunt întotdeauna ajustate în indicele zero.
Valori și expresii speciale
Ca și în cazul valorilor simple, putem efectua verificări Pe valori și expresii speciale:
// helper funcțional str = () = > "donna"; var myarr =; Consola.info (myarr.include (nan)); // torconsole.info (myarr.include (infinit)); // trueconsole.info (myarr.include (str ()); // torconsole.info (myarr.include ('Don'); // FALSE
Ultimul cec exemplifică cum include () necesită întregul element (în acest caz „donna”) pentru a raporta coincidența.
Notă: Identificarea NAN într-un set este una dintre noutățile include () împotriva indexului ().
acționând pe lanțuri
în plus față de obiectul de matrice, inclusiv () a fost, de asemenea adăugat ca metodă pentru obiectul șir, care ne permite să efectuăm verificările pe lanțurile de text. În acest caz, este posibil să căutați atât cuvinte, cât și pentru propoziții și secvențe de caractere:
var Str = "Într-un loc al lui La Mancha, al cărui nume nu vreau să-mi amintesc, nu are prea mult timp să trăiască un Hidalgo de Los La Launa în șantierul naval, ADARGA ANCTIC, Skinny Sprout și Runner Gagged. '; consola.info (str.inllude ("loc"); // torconsole.info (str.inludes ("a căror"); // torconsole.info (str.inludes ("ero aco)); // TRUE - > Vreau să-mi amintesc Mecorder.info (str.inludes ("pata", 18)); // torconsole.info (str.inludes ("pata", 19)); // FALSE
Notă: textul quixote pe care l-am luat de aici. Citez sursa deoarece se pare că este tema caldă în ultima vreme cu acest text particular 😉
O problemă importantă aici este de a avertiza, deoarece parametrul Forum este aplicat fiecărei litere, nu fiecărui cuvânt. Prin urmare, „pata” este între 18 + 1 primele caractere, dar nu aproximativ 19 + 1. „+ 1” în fiecare man este deoarece numărul începe (ca în matrice) și în 0.
tipic ARRAYS
Metoda noua poate fi, de asemenea, aplicată pe margini tastate:
var typedarr = uint8Array.of (3, 14, 15); Consola.info (Typedarr.Include (15)); . PerformanțăEste timpul să verificați modul în care această metodă se ridică împotriva indexului tradițional ().
Pentru a măsura timpul, vom folosi consola browserului în sine și metoda de timp ().
Ca surse de date, vom folosi 3 matrice de lungime diferită (100, 5000 și 20000), ceea ce ne permite să vedem cum timpul sunt scalate în funcție de numărul de elemente pe care trebuie să funcționeze căutarea.
Codul pregătitoare ar fi după cum urmează:
var prefix = ' articol-'; var ar100 = array.Apply (null, {lungime 100}) .map ((x, y) = > prefix + y), AR5000 = Array.Apply (null, { Lungime: 5000}) .map ((x, y) = > prefix + y), ar20000 = array.Apply (null, {lungime 20000}) .map (x, y) = > prefix + y); Vary key = (arr) = > prefix + arr.l lungime / 2; // Small Sizeconole.Time ("SearchingIntem '); Console.info (arre100.length, arr100.include (cheie (arre100)); console.timeend (" căutareMingItem'); Consola.Time ("SearchingItMe"); Console.info (AR100.Indexof (cheie (arre100))! == -1); consola.Timeend ("căutareMingItem '); // Medie Sizeconsole.Time ("căutareMingItem '); Console.info (AR5000.Include (cheie (ARR5000)); Console.Timeend (" căutareMingItem'); Consola.Time ("SearchingItMe"); Console.info (AR5000.Indexof (cheie (ARR5000))! == -1); consola.Timeend ("căutareMingItem '); // mare Sizeconsole.Time ("SearchingItem '); Console.info (cheie (ARR20000)); console.timeend (" căutareMingItem'); Consola. P> Verificăm fiecare matrice cu cele două metode pe care le comparăm (inclusiv și indexarea). Codul este oarecum repetitiv, dar în scopuri didactice este foarte clar.Arrays le creăm programatic, obținând aranjamente cu această pint:
IV id = "E38F012807"
Funcția "cheie" face elementul pe care îl vom căuta în matricea noastră. Pentru ca rezultatele să fie mai exacte, acest fragment alege valoarea centrală a fiecărei matrice, care forțează interpretul să călătorească un număr proporțional de elemente în fiecare încercare.
Cu toate pregătite, am lansat scenariul nostru și am obținut scenariul nostru și am obținut scenariul nostru Următoarele rezultate:
| 100 aranjamente 000 de aranjamente | 20000 Aranjamente | ||
|---|---|---|---|
| Include () | 1.52ms | 1.24ms | 1.29ms |
| indexef () | 1.38ms | 1.22ms | 1.21ms |
Notă: Rezultatele obținute mai sus sunt timpul mediu după 100 de execuții.
Având în vedere datele, numărul elementelor inițiale nu penalizează, rezultând chiar și mai repede cu cât este mai mare matrice.
și nici nu este o diferență de performanță între indexarea () metodelor Include () ceva, pe de altă parte, obișnuit în funcționalitățile recent încorporate în diferitele browsere.
Suport
Ca și în cazul tuturor funcționalităților emergente JavaScript, trebuie să aruncați o privire la Suport din această nouă metodă astăzi între diferitele browsere:
| crom | Firefox | Internet Explorer | Opera | Safari | Android | Opera Mobile | Safari Mobile | Chrome pentru Android | 47 | 43 | 43 | Nu este acceptat | Nu este acceptat | 34 | 9 | Nu este acceptată | 34 | 47 |
|---|
salvarea cazului de browsere Microsoft, sprijinul de astăzi (noiembrie, 2016) este foarte complet.
Pollyfill
la locul de muncă precis Entitate cu browsere care nu acceptă această metodă pentru moment (Internet Explorer și Edge), putem implementa acest „Pollyfill”. Ca de obicei, este recomandabil să predați acest cod numai atunci când metoda nu este prezentă nativ.
divid id = „315677614e”> div id = „e38f012807”>
dacă (! array.protype.includes) {array.protype.includes = Funcție (Searchelement / *, de la Lindex * /) {„Utilizați stricte”; Var o = obiect (this), len = parseint (O.Lungime) ||. 0; // ieșire rapidă dacă lipsesc date dacă (len === 0) {retur fals; } var n = parseint (argumente, 10) || 0, k, valtelă; Dacă (n > = 0) {k = n; } altceva {k = len + n; Dacă (k < 0) {k = 0; }} în timp ce (k < len) {CrenyTlement = O; Dacă (SearchHelement === CrenyTlement || (căutare! } K ++; } Returnați false; };}
Notă: Codul original a fost extras și redirecționat aici.
Concluzie
Când programați, Se pare că se determină trivial dacă un element dat este prezent într-o matrice. Până în prezent, am solicitat utilizarea indexului () și o conversie ulterioară a returnării lor la o valoare booleană.
cu incllus (), problema este rezolvată prin a avea o metodă nativă care funcționează corect și că aceasta este gramatical mult mai precis. În timp ce sintaxa proprie poate fi inadecvată (suntem mai obișnuiți cu instrucțiunile precum „are () sau” conține () „), alegerea dvs. se datorează salvgardării retragerii cu aceste metode deja definite în alte cadre utilizate frecvent (MoOOols) sau În limba JavaScript însuși (set.protype.Has ()).
Ca întotdeauna, orice îmbunătățire este binevenită.