Introdución
Cando tratamos de comprobar se hai un determinado elemento dentro dunha matriz de JavaScript, tradicionalmente tivemos que usar métodos que non eran Inicialmente deseñado para isto.
Coa nova proposta de ECMAScript 2016 (ES7), finalmente temos un método nativo para iso: inclúe (). Vexámolo en detalle:
Syntax
O método inclúe () Determina se un arranxo inclúe un elemento dado, devolve o verdadeiro ou Falso segundo corresponda.
A súa sintaxe é a seguinte (especificación completa aquí):
array.prototype.includes (Searchhelement)
Onde:
- Busca é o elemento a buscar.
- desdeINDEX é un parámetro opcional que marca a posición da matriz a partir da cal se inicia o elemento dado.
exemplo básico
O exemplo máis sinxelo é que onde buscamos un elemento nunha matriz:
myarr =; Console.info (myarr.includes ('donna'); // troconsole.info (Myarr.includes ('pensamento'); // falso
Teña en conta que este método devolve un booleano, algo que o fai diferente do índice tradicional () que estivemos usando desde os anos noventa:
console.info (myarr.indexof ('donna'); // 1console.info (Myarr.Indexof ('pensamento'); // -1
Afortunadamente, agora gañamos a lexibilidade para incluír os nosos cheques dentro dun fluxo lóxico sen necesidade de converter o resultado:
// Vella / feas de moda: if (Myarr.Indexof ('')! == -1) {/ * ok, o valor existe. * /} // novo / bonito es7if (myarr.includes ('')) {/ * ok, o valor existe. * /}
Exemplos con índice
Se necesitamos usar o segundo argumento, os exemplos seguirían os seguintes:
console.info (myarr.includes ('que', 5)); // faltereconsole.info (Myarr.includes ('Donna', 1); // torconsole.info (myarr.includes ('vento', -1)); // Verdadeiro
Como unha curiosidade, podemos ver no último exemplo que é posible usar un índice negativo para que o reconto saia da dereita.
Nota: Como de costume, os resultados durante o traballo con matrices están sempre axustados en Índice cero.
Valores e expresións especiais
Como con valores simples, podemos realizar verificacións en valores e expresións especiais:
// helper funciónvar 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
O último cheque exemplifica como inclúe () require todo o elemento (neste caso “Donna”) para informar coincidencia.
Nota: A identificación de NAN dentro dun conxunto é unha das novidades de Inclúe () contra o indexamento ().
Actuación sobre as cadeas
Ademais do obxecto de matriz, incluíndo () tamén foi Engadido como método para o obxecto da cadea, que nos permite realizar os cheques nas cadeas de texto. Neste caso, é posible buscar dúas palabras e frases e secuencias de caracteres:
var Str = 'Nun lugar da Mancha, cuxo nome non quero recordar, non ten moito tempo vivir un Hidalgo de Los La Launa no estaleiro, Adarga Ancient, Skinny Sprout e Runner Gagged.'; consola.info (str.includes ('lugar'); // torconsole.info (Str.includes ('de cuxo'); // torconsole.info (str.includes ('ero aco); // TRUE - > Quero recordar mecorder.info (Str.includes ('mancha', 18)); // torconsole.info (Str.includes ('mancha', 19)); // falso
Nota: o texto Quixote que o fixen de aquí. Cito a fonte porque parece que é o tema cálido últimamente con este texto en particular 😉
Un tema importante aquí é avisar a medida que o parámetro FRENDEX aplícase a cada letra, non cada palabra. Por iso, “mancha” está entre 18 + 1 primeiros caracteres, pero non preto de 19 + 1. O ‘+ 1’ en cada termo é porque o conde comeza (como en matriz) tamén en 0.
típico Arromas
O novo método tamén se pode aplicar en arrays escritos:
VAR TYPEDARR = Uint8Array.Of (3, 14, 15); Consola.info (TypeDarr.Inclúe (15)); // Verdadeiro
É interesante destacar aquí o uso con Uint8ClamPedarray, resultado do traballo con imaxes e lona a través do Método de Canvendringcontext2D.getImagedata ().
O rendemento
é hora de comprobar como se produce este método contra o índice tradicional ().
Para medir os tempos, utilizaremos a propia consola do navegador e o seu tempo ().
Como fontes de datos, utilizaremos 3 matrices de lonxitude diferente (100, 5000 e 20000), o que nos permite ver como se escalan os tempos dependendo do número de elementos nos que a busca debe realizar.
O código preparatorio sería o seguinte:
var prefix = ' elemento- '; var ar100 = array.Apply (null, {LONGE: 100}). MAP ((x, y) = > Prefix + y), ar5000 = array.Apply (null, { Lonxitude: 5000}). MMAP ((X, Y) = > Prefix + y), AR20000 = Array.Apply (null, {LONGE: 20000}). MAP (X, y) = > Prefix + y); Var clave = (arr) = > Prefix + arr.length / 2; // pequena sizeconole.time ('Buscaingitem'); console.info (ARRE100.Length, ARR100.Includes (clave (ARRE100)); Console.timeend ('SearchingItem'); Console.time ('Searchingitem'); console.info (AR100.Indexof (clave (ARRE100))! == -1); console.timeend ('Searchingitem'); // mediana sizeconsole.time ('Searchingitem'); console.info (ar5000.includes (clave (ARR5000)); consola.timeend ('Searchingitem'); Console.time ('Searchingitem'); console.info (ar5000.indexof (key (ARR5000))! == -1); consola.timeend ('Searchingitem'); // gran sizeconsole.time ('Searchingitem'); console.info (clave (ARR20000)); console.timeend ('Searchingitem'); Consola. P> Comprobamos cada matriz cos dous métodos que comparamos (incluíndo e indexando). O código é un pouco repetitivo, pero con fins didácticos é moi claro. As matrices que os creamos programáticamente, obtendo arranxos con esta pinta:
A función "clave" fai que o elemento que imos buscar na nosa matriz. Para que os resultados sexan máis precisos, este fragmento elixe o valor central de cada matriz, que obriga ao intérprete a percorrer un número proporcional de elementos en cada proba.
Con todos preparados, lanzamos o noso script e obtemos Os seguintes resultados:
| |
100 arranxos |
5000 arranxos |
20000 acordos |
| inclúe () |
1.52ms |
1.24ms |
1.29ms |
| IndexEf () |
1.38ms |
1.22ms |
1.21ms |
Nota: Os resultados obtidos anteriormente son os tempos medios despois de 100 execucións.
Tendo en conta os datos, o número de elementos iniciais non penaliza, resultando incluso máis rápido canto maior sexa a matriz.
nin é unha diferenza no rendemento entre os métodos index.) Inclúe () algo, por outra banda, habitual nas funcionalidades incorporadas recentemente nos diferentes navegadores.
soporte
Como con todas as funcionalidades emerxentes de JavaScript, ten que botar unha ollada á Apoio a partir deste novo método hoxe entre os diferentes navegadores:
| Chrome |
Firefox |
Internet Explorer |
bordo |
ópera |
safari |
android |
Opera Mobile |
Safari Mobile |
Chrome para Android |
47 |
43 |
NON APOIO |
NON APOITADO |
34 |
9 |
non admitido |
34 |
9 |
47 |
Gardar o caso dos navegadores de Microsoft, o apoio de hoxe (novembro de 2016) é moi completo.
Pollyfill
para traballar precisam Entidade con navegadores que non apoian este método para o momento (Internet Explorer e EDGE), podemos implementar este "pollyfill". Como de costume, é aconsellable entregar este código só cando o método non está presente de forma nativa.
if (! array.prototype.includes) {array.prototype.includes = Función (buscador / *, desdeindex * /) {'Use rigoroso'; Var o = obxecto (este), len = parseint (O.)lonxitude) || 0; // saída rápida se faltan datos se (len === 0) {devolve falso; } var n = parseint (argumentos, 10) || 0, k, actualidade; Se (n > = 0) {k = n; } máis {k = len + n; If (k < 0) {k = 0; }} while (k < len) {Currentelement = O; Se (searchhelement === Currentelement || (Searchhelement == searchElement & & Currentelement == Currentelement)!) {Return true; } K ++; } Voltar falso; };}
Nota: o código orixinal foi extraído e reaccionado aquí.
Conclusión
Cando programamos, Resulta que Trivial determina se un elemento dado está presente nunha matriz. Ata agora, esiximos o uso de INDIGOF () e unha conversión posterior do seu retorno a un valor booleano.
con inclusión (), o problema resólvese por ter un método nativo que funciona correctamente e que o é moito máis preciso. Aínda que a súa propia sintaxe pode ser inadecuada (estamos máis afeitos a instrucións como 'ten ()' ou 'contén ()'), a súa elección debe salvagardar a retracción con estes métodos xa definidos noutros marcos usados frecuentemente (moools) ou na propia linguaxe de JavaScript (set.prototype.has ()).
Como sempre, calquera mellora é benvida.