Introdução
Quando tentamos verificar se um determinado elemento existe dentro de uma matriz em JavaScript, tradicionalmente tivemos que usar métodos que não foram Inicialmente projetado para isso.
com a nova proposta ecmascript 2016 (ES7), finalmente temos um método nativo para este: inclui (). Vamos ver em detalhes:
Sintaxe
O método Inclui () determina se um arranjo inclui um determinado elemento, retorne TRUE ou Falso conforme apropriado.
Sua sintaxe é a seguinte (especificação completa aqui):
array.prototype.Inclui (SearchHelement)
Onde:
- searchelement é o elemento para pesquisar.
- fromIndex é um parâmetro opcional que marca a posição na matriz da qual o elemento determinado é iniciado.
exemplo
O exemplo mais simples é que, onde procuramos um elemento em uma matriz:
Var myarr =; Console.info (myarr.incluse ('Donna'); // troconsole.info (myarr.inclui ('pensamento'); // false
Observe que este método retorna um booleano, algo que o torna diferente do índice tradicional () que usamos desde os anos noventa:
console.info (myarr.indexof ('Donna'); // 1console.info (myarr.indexOf ('pensamento'); // -1
Felizmente, agora ganhamos legibilidade para incluir nossas verificações dentro de um fluxo lógico sem a necessidade de converter o resultado:
// moda antiga / feia: se (myarr.indexof ('')! == -1) {/ * OK, valor existe! * /} // novo / nice es7if (myarr.incluse ('')) {/ * OK, valor existe! * /} pré>
exemplos com índice
Se precisarmos usar o segundo argumento, os exemplos permaneceriam da seguinte forma:
console.info (myarr.inclusos ('que', 5)); // faltereconsole.info (myarr.incluse ('Donna', 1); // torconsole.info (myarr.incluse ('vento', -1)); // true
como uma curiosidade, podemos ver no último exemplo que é possível usar um índice negativo para que a contagem seja iniciada a partir da direita.
Nota: Como de costume, os resultados durante o trabalho com matrizes são sempre ajustados em zero índice.
valores especiais e expressões
Como com valores simples, podemos executar verificações em valores e expressões especiais:
// helper funcionalVar str = () = > 'Donna'; var myarr =; Console.info (myarr.incluse (nan)); // torconsole.info (myarr.incluse (infinito)); // trueconsole.info (myarr.inclusas (str ()); // torconsole.info (myarr.inclui ('don'); // false
A última verificação exemplifica como inclui () requer o elemento inteiro (neste caso ‘Donna’) para relatar coincidência.
NOTA: A identificação NAN dentro de um conjunto é uma das novidades de inclui () contra indexof ().
agindo em cadeias
Além do objeto de matriz, incluindo () também foi Adicionado como um método para o objeto de string, o que nos permite executar os cheques nas cadeias de texto. Nesse caso, é possível pesquisar palavras e frases e seqüências de caracteres:
Var Str = 'Em um lugar de La Mancha, cujo nome eu não quero lembrar, não há muito tempo vivendo um Hidalgo de los la launa em estaleiro, antiga Adarga, Skinny Broth e Corredor Enganado.'; console.info (str.include ('lugar'); // torconsole.info (str.include ('de cujo'); // torconsole.info (str.inclui ('ERO ACO)); // Verdadeiro - > Eu quero lembrar de Mecorder.info (str.inclus (str.incluse ('stain', 18)); // torconsole.info (str.includes ('stain', 19)); // FALSE
Nota: O texto Quixote eu tirei daqui. Eu cito a fonte porque parece que é o tema quente ultimamente com este texto em particular 😉
Uma questão importante aqui é avisar como o parâmetro Fromdex é aplicado a cada letra, nem toda palavra. Portanto, ‘mancha’ é entre 18 + 1 primeiro caracteres, mas não cerca de 19 + 1. O ‘+ 1’ em cada termo é porque a contagem é iniciada (como na matriz) também em 0.
típico Arrays
O novo método também pode ser aplicado em matrizes digitadas:
var typedarr = uint8array.of (3, 14, 15); Console.info (TypeDarr.Inclui (15)); // True
É interessante destacar aqui usar com uint8clampedearray, resultado do trabalho com imagens e lona através do método de canvasContext2d.getimagedata ().
Performance
É hora de verificar como este método produz contra o índice tradicional de ().
Para medir os horários, usaremos o próprio console do navegador e seu método de tempo ().
Como fontes de dados, usaremos 3 matrizes de comprimento diferente (100, 5000 e 20000), o que nos permite ver como os tempos são escalados, dependendo do número de elementos em que a pesquisa deve executar.
O código preparatório seria o seguinte:
Var prefixo = ' item-'; var ar100 = array.apply (null, {length: 100}) .map ((x, y) = > prefix + y), ar5000 = array.apply (null, { Comprimento: 5000}) .map ((x, y) = > prefix + y), ar20000 = array.apply (null, {comprimento: 20000}) .map (x, y) = > prefix + y); Var key = (arr) = > prefix + arr.Length / 2; // pequeno sizeconole.time ('SearchingTem'); console.info (arre100.length, ar100.inclui (chave (arre100)); console.Timeend ('SearchingTem'); Console.time ('SearchingTem'); console.info (AR100.INDEXOX (KEY (ARRE100))! == -1); console.Timeend ('SearchingTem'); // médio sizeconsole.time ('SearchingTem'); console.info (AR5000.Cludes (chave (ARR5000)); console.Timeend ('SearchingTem'); Console.time ('SearchingTem'); console.info (AR5000.INTEXOXO (Chave (Arr5000))! == -1); console.Timeend ('SearchingTem'); // grande Sizeconsole.time ('SearchingTem'); console.info (chave (arr20000)); console.Timeend ('SearchingTem'); Console. P> Verificamos cada matriz com os dois métodos que estamos comparando (incluindo e indexação). O código é um pouco repetitivo, mas nos propósitos didáticos é muito claro. As matrizes que criamos programaticamente, obtendo arranjos com este Pint:
A função 'chave' torna o elemento que vamos procurar em nossa matriz. Para que os resultados sejam mais precisos, esse snippet escolhe o valor central de cada matriz, que força o intérprete a viajar um número proporcional de elementos em cada teste.
Com tudo preparado, lançamos nosso script e obtemos Os seguintes resultados:
| 100 arranjos | 5000 arranjos | 20000 arranjos | |
|---|---|---|---|
| inclui () | 1.52ms | 1.24ms | 1.29ms |
| indexef () | 1.38ms | 1,22ms | 1.21ms |
Nota: Os resultados obtidos acima são os tempos médios após 100 execuções.
Em vista dos dados, o número de elementos iniciais não penalizam, resultando mesmo mais rápido quanto maior a matriz.
nem é uma diferença no desempenho entre os métodos indexof () Inclui () algo, por outro lado, usual em funcionalidades incorporadas recentemente nos diferentes navegadores.
suporte
Como com todas as funcionalidades emergentes de JavaScript, você tem que dar uma olhada no Suporte deste novo método hoje entre os diferentes navegadores:
| cromo | firefox | Internet Explorer | borda | Ópera | safari | android | ópera móvel | safari móvel | cromo para android | 47 | 43 | não suportado | não suportado | 34 | 9 | 34 | 9 | 47 |
|---|
Salvando o caso de Microsoft Browsers, o suporte de hoje (novembro de 2016) é muito completo.
Pollyfill / H3>
para trabalhar precisão Entidade com navegadores que não suportam esse método para o momento (Internet Explorer e Edge), podemos implementar este ‘pollyfill’. Como de costume, é aconselhável entregar este código somente quando o método não estiver presente nativamente.
if (! array.prhotype.incluss) {array.prototype.inclues = função (SearchElement / *, fracindex * /) {'use estrito'; Var o = objeto (isto), len = parseint (O.Comprimento) ||. 0; // EXIT RÁPIDA Se a falta de dados se (len === 0) {retornar falso; } var n = parseint (argumentos, 10) || 0, k, captelement; If (n > = 0) {k = n; } else {k = len + n; Se (k < 0) {k = 0; }} while (k < len) {calendleelement = o; If (SearchHelement === CurrentElement || (SearchHelement! == Searhelement & & CurrentElement! == CurrentElement)) {retorne true; } K ++; } Retorna falso; };}
Nota: O código original foi extraído e readequado aqui.
Conclusão
Quando nós programamos, Acontece que o trivial determina se um determinado elemento está presente em uma matriz. Até agora, exigimos o uso de indexof () e uma conversão subseqüente de seu retorno a um valor booleano.
com inclusos (), o problema é resolvido por ter um método nativo que funciona corretamente e que é gramaticaticamente muito mais preciso. Enquanto sua própria sintaxe pode ser inadequada (estamos mais acostumados com instruções como ‘tem ()’ ou ‘contém ()’), sua escolha é devido a salvaguardar retração com esses métodos já definidos em outras estruturas freqüentemente usadas (moools) ou Na própria linguagem javascript (set.prototype.has ()).
Como sempre, qualquer melhoria é bem-vinda.