INTRODUZIONE
Quando cerchiamo di verificare se un determinato elemento esiste all’interno di un array in JavaScript, abbiamo tradizionalmente dovuto utilizzare i metodi che non erano Inizialmente progettato per questo.
Con la nuova proposta ECMAScript 2016 (ES7), abbiamo finalmente un metodo nativo per questo: include (). Vediamo in dettaglio:
Sintassi
Il metodo include () Determina se una disposizione include un determinato elemento, restituire true o Falso come appropriato.
La tua sintassi è la seguente (specifica completa qui):
array.prototipo.includes (searchhelement)
Dove:
- Searchelement L’elemento è quello di cercare.
- fromindex è un parametro opzionale che contrassegna la posizione sulla matrice da cui viene avviato l’elemento indicato.
Esempio di base
L’esempio più semplice è che dove cerchiamo un elemento in un array:
VAR myarr =; Console.info (myarr.includes ('Donna'); // troconsole.info (myarr.includes ('pensiero'); // falso
Nota che questo metodo restituisce un booleano, qualcosa che lo rende diverso dal tradizionale indicef () che abbiamo utilizzato dagli anni Novanta:
CONSOLE.INFO (myarr.indexof ('Donna'); // 1console.info (myarr.indexof ('pensiero'); // -1
Fortunatamente, ora otteniamo la leggibilità di includere i nostri assegni all’interno di un flusso logico senza la necessità di convertire il risultato:
// Old / Ugly Fashion: IF (MyARR.INDEXOF ('')! == -1) {/ * OK, il valore esiste! * /} // Nuovo / Nice ES7IF (MyARR.Includes ('')) {/ * OK, il valore esiste! * /}
Esempi con indice
Se dobbiamo usare il secondo argomento, gli esempi rimarrebbero come segue:
CONSOLE.INFO (MyARR.includes ('che', 5)); // faltereconsole.info (myarr.includes ('Donna', 1); // Torconsole.info (Myarr.includes ('Vento', -1)); // true
Come curiosità, possiamo vedere nell’ultimo esempio che è possibile utilizzare un indice negativo in modo che il conteggio inizio dalla destra.
Nota: come al solito, i risultati durante il lavoro con gli array sono sempre regolati in indice zero.
Valori speciali ed espressioni
Come con valori semplici, possiamo eseguire verifiche su valori speciali ed espressioni:
// helper functionvar str = () = > 'Donna'; var myarr =; Console.info (myarr.includes (Nan)); // torconsole.info (myarr.includes (infinito)); // trueconsole.info (myarr.includes (str ()); // torconsole.info (myarr.includes ('don'); // falso
L’ultimo controllo esemplifica come include () richiede l’intero elemento (in questo caso “Donna”) di segnalare la coincidenza.
Nota: L’identificazione NAN all’interno di un set è una delle novità di include () contro Indexof ().
che agisce sulle catene
Oltre all’oggetto array, incluso () è stato anche stato Aggiunto come metodo per l’oggetto stringa, che ci consente di eseguire i controlli sulle catene di testo. In questo caso, è possibile cercare sia le parole che le frasi e le sequenze dei caratteri:
VAR Str = 'In un posto di La Mancha, il cui nome non voglio ricordare, non ha molto tempo a vivere un Hidalgo de los Launa nel cantiere navale, antico Adarga, germoglio magro e corridore imbavagliato. "; console.info (str.includes ('posto'); // Torconsole.info (Str.includes ('di cui); // Torconsole.info (Str.includes ('Ero ACO)); // true - > Voglio ricordare mecorder.info (str.includes ('macchia', 18)); // Torconsole.info (Str.includes ('macchia', 19)); // falso
Nota: il testo del Quixote che l’ho tolto di qui. Cito la fonte perché sembra che sia il tema caldo ultimamente con questo particolare testo 😉
un problema importante qui è quello di avvertire mentre il parametro FromDex viene applicato a ciascuna lettera, non ogni parola. Quindi, ‘macchia’ è tra 18 + 1 primi caratteri, ma non circa 19 + 1. Il ‘+ 1’ in ogni termine è perché il conteggio inizia (come in array) anche in 0.
tipico ARRAYS
Il nuovo metodo può anche essere applicato su array digitati:
var typedarr = uint8array.of (3, 14, 15); Console.info (typedarr.Include (15)); // true
È interessante evidenziare qui utilizzare con UINT8CLAMPEDArray, il risultato del lavoro con immagini e tela attraverso il metodo CanvasRendringContext2D.GetImadata ().
Prestazioni
È il momento di verificare come questo metodo renda contro l’indice tradizionale ().
Per misurare i tempi, utilizzeremo la console del browser e il suo metodo ().
Come origini dati, useremo 3 matrici di lunghezza diversa (100, 5000 e 20000), che ci consente di vedere come i tempi sono ridimensionati a seconda del numero di elementi su cui la ricerca deve eseguire.
Il codice preparatorio sarebbe il seguente:
VAR prefisso = ' articolo-'; VAR AR100 = array.Apply (null, {lunghezza: 100}) .map ((x, y) = > prefisso + y), ar5000 = array.apply (null, { lunghezza: 5000}) .map ((x, y) = > prefisso + y), ar20000 = array.apply (null, {lunghezza: 20000}) .map (x, y) = > prefisso + y); VAR Key = (ARR) = > Prefisso + ARR.Length / 2; // Small SizeColole.time ("SearchingItem"); console.info (Are100.Length, ARR100.includes (Key (Arre100)); console.timend ('SearchingItem'); Console.time ('searchingitem'); console.info (ar100.indexof (chiave (arre100))! == -1); console.timend ('ricercatorem'); // Medium SizeConsole.time ("SearchingItem"); console.info (ar5000.includes (chiave (chiave (ARR5000)); console.timend ("SearchingItem"); Console.time ('searchingitem'); console.info (ar5000.indexof (Key (ARR5000))! == -1); console.timend ("SearchingItem"); // grande SizeConsole.time ('SearchingItem'); console.info (Key (ARR20000)); console.timend ('SearchingItem'); Console. P> Controlliamo ogni array con i due metodi che stiamo confrontando (incluso e indicef). Il codice è in qualche modo ripetitivo, ma su scopi didattici è molto chiaro. Gli array li creiamo a livello di programmazione, ottenendo accordi con questa pinta:
La funzione 'chiave' rende l'elemento che cercheremo nel nostro array. Per i risultati per essere più accurati, questo snippet sceglie il valore centrale di ciascuna matrice, che costringe l'interprete per viaggiare un numero proporzionale di elementi in ciascun test.
Con tutto preparato, abbiamo lanciato il nostro script e ottenuto I seguenti risultati:
| 100) > | 5000 Arrangiamenti | 20000 Disposizioni | |
|---|---|---|---|
| Include () | 1.52MS | 1.24MS | 1.29MS |
| INDEXEF () | 1.38MS | 1.22MS | 1.21MS |
Nota: i risultati ottenuti sopra sono i tempi medi dopo 100 esecuzioni.
In vista dei dati, il numero di elementi iniziali non penalizza, risultante anche Più veloce è maggiore l’array.
Né è una differenza nelle prestazioni tra i metodi Indexof () Include () qualcosa, d’altra parte, al solito nelle funzionalità recentemente incorporate nei diversi browser.
Supporto
Come con tutte le funzionalità emergenti JavaScript, devi dare un’occhiata al Supporto da questo nuovo metodo oggi tra i diversi browser:
| Chrome | Firefox | Internet Explorer | EDGE | OPERA | Safari | Android | Opera Mobile | Safari Mobile | Chrome per Android | 47 | 43 | non supportato | non supportato | 34 | 9 | NON supportato | 34 | 9 | 47 |
|---|
Salvataggio del caso dei browser Microsoft, il supporto di oggi (novembre 2016) è molto completo.
PollyFill
per lavorare precisam Entità con i browser che non supportano questo metodo per il momento (Internet Explorer and Edge), possiamo implementare questo ‘Pollyfill’. Come al solito, è consigliabile consegnare questo codice solo quando il metodo non è presente in modo nativo.
se (! array.prototipe.includes) {array.prototype.includes = funzione (See Seeleelement / *, fromindex * /) {'Usa rigoroso'; Var o = oggetto (questo), len = parseint (O.Lunghezza) ||. 0; // uscita rapida se mancano dati se (Len === 0) {return false; } var n = parseint (argomenti, 10) || 0, k, attuale; Se (n > = 0) {k = n; } else {k = len + n; IF (K < 0) {k = 0; }} while (k < len) {attuale = o; IF (Searchhelement === CurrentELement || (Searchhelement! == Searchelement & & Currenthelement! == Currentlement)) {return true)) { } K ++; } Restituire false; };}
Nota: il codice originale è stato estratto e riservato qui.
Conclusione
Quando programmiamo, Risulta il banale determinare se un determinato elemento è presente in un array. Finora, abbiamo richiesto l’uso di Indexof () e una successiva conversione del loro ritorno a un valore booleano.
Con inclusi (), il problema è risolto avendo un metodo nativo che funziona correttamente e questo è grammaticalmente molto più preciso. Mentre la tua sintassi può essere inappropriata (siamo più abituati alle istruzioni come ‘ha ()’ o ‘contiene ()’), la tua scelta è dovuta alla salvaguardia retrazione con questi metodi già definiti in altri quadri usati (Mools) o Nel linguaggio JavaScript stesso (set.prototipo.has ()).
Come sempre, qualsiasi miglioramento è il benvenuto.