{"id":48267,"date":"2024-03-28T12:00:00","date_gmt":"2024-03-28T15:00:00","guid":{"rendered":"https:\/\/www.locaweb.com.br\/blog\/?p=48267"},"modified":"2024-03-27T10:16:40","modified_gmt":"2024-03-27T13:16:40","slug":"arrays-em-javascript","status":"publish","type":"post","link":"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/arrays-em-javascript\/","title":{"rendered":"Quais s\u00e3o as fun\u00e7\u00f5es nativas de arrays em JavaScript?\u00a0"},"content":{"rendered":"\n<p class=\"has-text-align-center\"><em>As fun\u00e7\u00f5es nativas de arrays em JavaScript otimizam o desenvolvimento. Conhe\u00e7a os m\u00e9todos para itera\u00e7\u00e3o, manipula\u00e7\u00e3o, ordena\u00e7\u00e3o, busca e valida\u00e7\u00e3o.<\/em>\u00a0<\/p>\n\n\n\n<p>As <strong>fun\u00e7\u00f5es nativas de <\/strong><a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/o-que-sao-arrays-em-javascript\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>array<\/strong><\/a><strong> no JavaScript<\/strong> tornam a escrita de c\u00f3digos mais eficiente e concisa. Voc\u00ea pode simplificar tarefas complexas e melhorar a legibilidade e a manutenibilidade do c\u00f3digo.&nbsp;<\/p>\n\n\n\n<p>Essa abordagem \u00e9 um <strong>padr\u00e3o aceito na <\/strong><a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/de-olho-no-digital\/importancia-das-comunidades-para-desenvolvedores\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>comunidade de desenvolvimento<\/strong><\/a> JavaScript. Ou seja, a maioria das pessoas desenvolvedoras est\u00e1 familiarizada com ela, o que facilita a colabora\u00e7\u00e3o e a compreens\u00e3o.&nbsp;<\/p>\n\n\n\n<p>Ao longo deste artigo, exploraremos uma <strong>variedade de m\u00e9todos nativos de array<\/strong>. Prepare-se para <strong>aprofundar seu conhecimento<\/strong> e transformar seus <a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/ate-onde-vai-o-poder-do-javascript\/\" target=\"_blank\" rel=\"noreferrer noopener\">c\u00f3digos JavaScript<\/a> em solu\u00e7\u00f5es mais robustas e elegantes!&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Como usar os m\u00e9todos fundamentais das fun\u00e7\u00f5es nativas de array em JavaScript?<\/strong>\u00a0<\/h2>\n\n\n\n<iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/n3o9cZzrRj4?si=MIvG_vUz3dkoYpLu\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Os m\u00e9todos fundamentais \u2014 forEach(), map(), filter(), e reduce() \u2014 formam a base para muitas <strong>opera\u00e7\u00f5es de manipula\u00e7\u00e3o<\/strong> de dados realizadas em <a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/o-que-e-javascript\/\" target=\"_blank\" rel=\"noreferrer noopener\">JavaScript<\/a> e desempenham pap\u00e9is distintos no processamento e na transforma\u00e7\u00e3o dos elementos de um array.\u00a0<\/p>\n\n\n\n<p>Ao compreender profundamente como cada um deles funciona, voc\u00ea poder\u00e1 resolver problemas no <a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/como-usar-javascript-e-php-no-mesmo-projeto\/\" target=\"_blank\" rel=\"noreferrer noopener\">desenvolvimento de aplica\u00e7\u00f5es web<\/a>, desde itera\u00e7\u00f5es simples at\u00e9 <strong>transforma\u00e7\u00f5es complexas<\/strong>.&nbsp;<\/p>\n\n\n\n<p>Conhe\u00e7a as aplica\u00e7\u00f5es pr\u00e1ticas e os casos de uso para entender como os m\u00e9todos fundamentais <strong>resolvem problemas reais<\/strong>.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Itera\u00e7\u00e3o simples e direta<\/strong>\u00a0<\/h3>\n\n\n\n<p>O m\u00e9todo <strong>forEach()<\/strong> \u00e9 utilizado para iterar sobre os elementos de um array e executar uma fun\u00e7\u00e3o de callback para cada um.&nbsp;<\/p>\n\n\n\n<p>O exemplo a seguir demonstra como us\u00e1-lo sobre cada elemento e realizar uma a\u00e7\u00e3o espec\u00edfica.&nbsp;<\/p>\n\n\n\n<p><em>const array = [1, 2, 3, 4, 5];<\/em>&nbsp;<\/p>\n\n\n\n<p><em>array.forEach((element) =&gt; {<\/em>&nbsp;<\/p>\n\n\n\n<p><em>&nbsp; console.log(element); \/\/ Sa\u00edda: 1, 2, 3, 4, 5 (um por linha)<\/em>&nbsp;<\/p>\n\n\n\n<p><em>});<\/em>&nbsp;<\/p>\n\n\n\n<p>\u00c9 uma abordagem simples e direta para percorrer os elementos de um array sem a necessidade de acompanhar manualmente os \u00edndices ou alocar vari\u00e1veis adicionais.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Transforma\u00e7\u00e3o de dados<\/strong>\u00a0<\/h3>\n\n\n\n<p>O m\u00e9todo <strong>map()<\/strong> \u00e9 utilizado para criar um array a partir da transforma\u00e7\u00e3o dos elementos de outro existente.&nbsp;<\/p>\n\n\n\n<p>Ele executa uma fun\u00e7\u00e3o de callback para cada elemento do original e retorna um novo array contendo os <strong>resultados das opera\u00e7\u00f5es realizadas<\/strong>.&nbsp;<\/p>\n\n\n\n<p>Exemplo:&nbsp;<\/p>\n\n\n\n<p><em>const array = [1, 2, 3, 4, 5];<\/em>&nbsp;<\/p>\n\n\n\n<p><em>const doubledArray = array.map((element) =&gt; {<\/em>&nbsp;<\/p>\n\n\n\n<p><em>&nbsp; return element * 2;<\/em>&nbsp;<\/p>\n\n\n\n<p><em>});<\/em>&nbsp;<\/p>\n\n\n\n<p><em>console.log(doubledArray); \/\/ Sa\u00edda: [2, 4, 6, 8, 10]<\/em>&nbsp;<\/p>\n\n\n\n<p>Ele \u00e9 \u00fatil para <strong>formatar ou manipular os dados de um array<\/strong> de acordo com requisitos espec\u00edficos, como duplicar os valores.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Filtragem de elementos<\/strong>\u00a0<\/h3>\n\n\n\n<p>Para criar um novo array apenas com os elementos que atendem a uma determinada condi\u00e7\u00e3o, usamos o m\u00e9todo <strong>filter()<\/strong>.&nbsp;<\/p>\n\n\n\n<p>Ele executa uma fun\u00e7\u00e3o de callback para cada elemento do array original e retorna um novo contendo somente os elementos para os quais a fun\u00e7\u00e3o de <strong>callback retorna true<\/strong>.&nbsp;<\/p>\n\n\n\n<p>O exemplo ilustra essa din\u00e2mica:&nbsp;<\/p>\n\n\n\n<p><em>const array = [1, 2, 3, 4, 5];<\/em>&nbsp;<\/p>\n\n\n\n<p><em>const evenNumbers = array.filter((element) =&gt; {<\/em>&nbsp;<\/p>\n\n\n\n<p><em>&nbsp; return element % 2 === 0;<\/em>&nbsp;<\/p>\n\n\n\n<p><em>});<\/em>&nbsp;<\/p>\n\n\n\n<p><em>console.log(evenNumbers); \/\/ Sa\u00edda: [2, 4]<\/em>&nbsp;<\/p>\n\n\n\n<p>\u00c9 uma maneira eficiente de filtrar elementos com base em <strong>crit\u00e9rios espec\u00edficos<\/strong>, como selecionar apenas os n\u00fameros pares de um array.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Redu\u00e7\u00e3o de dados<\/strong>\u00a0<\/h3>\n\n\n\n<p>O m\u00e9todo <strong>reduce()<\/strong> \u00e9 \u00fatil para reduzir os elementos de um array a um <strong>\u00fanico valor<\/strong>, aplicando uma fun\u00e7\u00e3o de callback a cada elemento.&nbsp;<\/p>\n\n\n\n<p>Ele acumula o resultado da opera\u00e7\u00e3o em um <strong>valor acumulador<\/strong> e retorna o valor final ap\u00f3s percorrer todos os elementos.&nbsp;<\/p>\n\n\n\n<p>Por exemplo:&nbsp;<\/p>\n\n\n\n<p><em>const array = [1, 2, 3, 4, 5];<\/em>&nbsp;<\/p>\n\n\n\n<p><em>const sum = array.reduce((accumulator, currentValue) =&gt; {<\/em>&nbsp;<\/p>\n\n\n\n<p><em>&nbsp; return accumulator + currentValue;<\/em>&nbsp;<\/p>\n\n\n\n<p><em>}, 0);<\/em>&nbsp;<\/p>\n\n\n\n<p><em>console.log(sum); \/\/ Sa\u00edda: 15<\/em>&nbsp;<\/p>\n\n\n\n<p>O m\u00e9todo pode ser usado para <strong>calcular estat\u00edsticas<\/strong> sobre os dados de um array ou para concatenar valores em um \u00fanico valor agregado.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Como utilizar os m\u00e9todos de modifica\u00e7\u00e3o de arrays em JavaScript?<\/strong>\u00a0<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"812\" height=\"500\" src=\"https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/03\/arrays-em-javascript-2.jpg\" alt=\"Pessoa digitando em laptop. O rosto dela n\u00e3o aparece. Acima de sua m\u00e3o, aparecem s\u00edmbolos que representam fichas de cadastro de pessoas\" class=\"wp-image-48288\" srcset=\"https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/03\/arrays-em-javascript-2.jpg 812w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/03\/arrays-em-javascript-2-500x308.jpg 500w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/03\/arrays-em-javascript-2-768x473.jpg 768w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/03\/arrays-em-javascript-2-150x92.jpg 150w\" sizes=\"(max-width: 812px) 100vw, 812px\" \/><\/figure>\n\n\n\n<p><em>Os m\u00e9todos de modifica\u00e7\u00e3o ajudam a lidar com dados de forma eficiente, preservando sua integridade.<\/em>\u00a0<\/p>\n\n\n\n<p>Os m\u00e9todos de modifica\u00e7\u00e3o de arrays em JavaScript s\u00e3o utilizados para <strong>adicionar, remover e modificar<\/strong> elementos de forma eficiente.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Eles proporcionam maneiras convenientes de manipular arrays sem a necessidade de opera\u00e7\u00f5es manuais complexas.&nbsp;<\/p>\n\n\n\n<p>Com isso, podemos realizar opera\u00e7\u00f5es de manipula\u00e7\u00e3o de arrays de maneira r\u00e1pida e concisa, mantendo a efici\u00eancia e a <a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/seguranca-digital\/seguranca-das-informacoes\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>integridade dos dados<\/strong><\/a>.&nbsp;<\/p>\n\n\n\n<p>Esses m\u00e9todos s\u00e3o fundamentais para a constru\u00e7\u00e3o de <strong>aplica\u00e7\u00f5es web escal\u00e1veis<\/strong>, permitindo uma manipula\u00e7\u00e3o eficiente de conjuntos de dados em JavaScript.&nbsp;<\/p>\n\n\n\n<p>Vamos focar nos quatro principais, push(), pop(), shift() e unshift(), discutindo suas funcionalidades.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Adicionando elementos ao final do array<\/strong>\u00a0<\/h3>\n\n\n\n<p>O m\u00e9todo <strong>push()<\/strong> \u00e9 utilizado para adicionar um ou mais elementos ao final de um array e retorna o novo comprimento.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Este exemplo modifica o array original, adicionando os elementos fornecidos como argumentos ao final:&nbsp;<\/p>\n\n\n\n<p><em>const array = [1, 2, 3];<\/em>&nbsp;<\/p>\n\n\n\n<p><em>array.push(4);<\/em>&nbsp;<\/p>\n\n\n\n<p><em>console.log(array); \/\/ Sa\u00edda: [1, 2, 3, 4]<\/em>&nbsp;<\/p>\n\n\n\n<p><em>array.push(5, 6);<\/em>&nbsp;<\/p>\n\n\n\n<p><em>console.log(array); \/\/ Sa\u00edda: [1, 2, 3, 4, 5, 6]<\/em>&nbsp;<\/p>\n\n\n\n<p>A linha array.push(4); <strong>adiciona <\/strong>o n\u00famero 4 ao final do array, e a linha array.push(5, 6); inclui os n\u00fameros 5 e 6.&nbsp;<\/p>\n\n\n\n<p>Ap\u00f3s cada chamada do m\u00e9todo push(), o array \u00e9 <strong>modificado <\/strong>e seu comprimento \u00e9 atualizado para refletir os elementos adicionados.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Removendo o \u00faltimo elemento do array<\/strong>\u00a0<\/h3>\n\n\n\n<p>O m\u00e9todo <strong>pop()<\/strong> \u00e9 utilizado para remover o \u00faltimo elemento de um array e retorna o elemento removido. Ele modifica o array original, reduzindo o seu comprimento em 1.&nbsp;<\/p>\n\n\n\n<p>Exemplo:&nbsp;<\/p>\n\n\n\n<p><em>const array = [1, 2, 3, 4];<\/em>&nbsp;<\/p>\n\n\n\n<p><em>const removedElement = array.pop();<\/em>&nbsp;<\/p>\n\n\n\n<p><em>console.log(removedElement); \/\/ Sa\u00edda: 4<\/em>&nbsp;<\/p>\n\n\n\n<p><em>console.log(array); \/\/ Sa\u00edda: [1, 2, 3]<\/em>&nbsp;<\/p>\n\n\n\n<p>A linha const removedElement = array.pop(); <strong>remove o \u00faltimo elemento<\/strong> do array e o armazena na vari\u00e1vel removedElement.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Ap\u00f3s a chamada do m\u00e9todo pop(), o array \u00e9 modificado e seu <strong>comprimento \u00e9 reduzido<\/strong> em 1.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Removendo o primeiro elemento do array<\/strong>\u00a0<\/h3>\n\n\n\n<p>O m\u00e9todo <strong>shift()<\/strong> remove o primeiro elemento de um array e retorna o elemento removido.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Ele modifica o array original, deslocando todos os outros elementos para um \u00edndice menor e reduzindo o comprimento em 1.&nbsp;<\/p>\n\n\n\n<p>Este exemplo demonstra o uso do m\u00e9todo shift():&nbsp;<\/p>\n\n\n\n<p><em>const array = [1, 2, 3, 4];<\/em>&nbsp;<\/p>\n\n\n\n<p><em>const removedElement = array.shift();<\/em>&nbsp;<\/p>\n\n\n\n<p><em>console.log(removedElement); \/\/ Sa\u00edda: 1<\/em>&nbsp;<\/p>\n\n\n\n<p><em>console.log(array); \/\/ Sa\u00edda: [2, 3, 4]<\/em>&nbsp;<\/p>\n\n\n\n<p>A linha const removedElement = array.shift(); remove o primeiro elemento do array e o armazena na <strong>vari\u00e1vel removedElement<\/strong>.&nbsp;<\/p>\n\n\n\n<p>Ap\u00f3s a chamada do m\u00e9todo shift(), todos os outros elementos s\u00e3o deslocados para <strong>\u00edndices menores<\/strong>, e seu comprimento \u00e9 reduzido em 1.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Adicionando elementos no in\u00edcio do array<\/strong>\u00a0<\/h3>\n\n\n\n<p>Por outro lado, <strong>unshift()<\/strong> adiciona um ou mais elementos no in\u00edcio de um array e retorna o novo comprimento. Ele modifica o array original, deslocando todos os outros elementos para \u00edndices maiores.&nbsp;<\/p>\n\n\n\n<p>Por exemplo:&nbsp;<\/p>\n\n\n\n<p><em>const array = [2, 3, 4];<\/em>&nbsp;<\/p>\n\n\n\n<p><em>array.unshift(1);<\/em>&nbsp;<\/p>\n\n\n\n<p><em>console.log(array); \/\/ Sa\u00edda: [1, 2, 3, 4]<\/em>&nbsp;<\/p>\n\n\n\n<p><em>array.unshift(-1, 0);<\/em>&nbsp;<\/p>\n\n\n\n<p><em>console.log(array); \/\/ Sa\u00edda: [-1, 0, 1, 2, 3, 4]<\/em>&nbsp;<\/p>\n\n\n\n<p>A linha <strong>array.unshift(1);<\/strong> adiciona o n\u00famero 1 no in\u00edcio do array, e a linha array.unshift(-1, 0); inclui os n\u00fameros -1 e 0.&nbsp;<\/p>\n\n\n\n<p>Ap\u00f3s cada chamada do m\u00e9todo unshift(), todos os outros elementos s\u00e3o <strong>deslocados para \u00edndices maiores<\/strong>, e seu comprimento \u00e9 atualizado para refletir o que foi adicionado.&nbsp;<\/p>\n\n\n\n<p><strong>Leia mais<\/strong>:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.locaweb.com.br\/blog\/produtos\/vps-e-cloud\/banco-de-dados-3-coisas-que-todo-desenvolvedor-precisa-saber\/\" target=\"_blank\" rel=\"noreferrer noopener\">Banco de Dados: 3 coisas que todo desenvolvedor precisa saber<\/a>&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/grandes-negocios\/como-fazer-gestao-de-dados\/\" target=\"_blank\" rel=\"noreferrer noopener\">Gest\u00e3o de dados: como desenvolver estrat\u00e9gias eficientes<\/a>&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/date-lake-o-que-e\/\" target=\"_blank\" rel=\"noreferrer noopener\">O que \u00e9 e como construir um data lake?<\/a>&nbsp;<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Como manipular a ordem dos elementos em arrays em JavaScript?<\/strong>\u00a0<\/h2>\n\n\n\n<p>Para <strong>manipular a ordem dos elementos<\/strong> em arrays em JavaScript, voc\u00ea tamb\u00e9m pode utilizar os m\u00e9todos sort() e reverse().&nbsp;<\/p>\n\n\n\n<p>O m\u00e9todo sort() \u00e9 utilizado para ordenar de acordo com crit\u00e9rios espec\u00edficos, como num\u00e9ricos ou alfab\u00e9ticos.&nbsp;<\/p>\n\n\n\n<p>Por sua vez, o m\u00e9todo <strong>reverse() <\/strong>\u00e9 usado para inverter a ordem dos elementos em um array.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Ordenar elementos em arrays com sort()<\/strong>\u00a0<\/h3>\n\n\n\n<p>O m\u00e9todo <strong>sort()<\/strong> \u00e9 utilizado para ordenar os elementos de um array conforme a classifica\u00e7\u00e3o dos valores.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Por padr\u00e3o, eles s\u00e3o convertidos em strings e ordenados como strings Unicode, como no exemplo abaixo.&nbsp;<\/p>\n\n\n\n<p><em>const array = [3, 1, 4, 2];<\/em>&nbsp;<\/p>\n\n\n\n<p><em>\/\/ Ordena\u00e7\u00e3o padr\u00e3o (como strings Unicode)<\/em>&nbsp;<\/p>\n\n\n\n<p><em>array.sort();<\/em>&nbsp;<\/p>\n\n\n\n<p><em>console.log(array); \/\/ Sa\u00edda: [1, 2, 3, 4]<\/em>&nbsp;<\/p>\n\n\n\n<p>No entanto, \u00e9 poss\u00edvel passar uma fun\u00e7\u00e3o de compara\u00e7\u00e3o como argumento para definir o <strong>crit\u00e9rio de ordena\u00e7\u00e3o personalizado<\/strong>.&nbsp;<\/p>\n\n\n\n<p><em>\/\/ Ordena\u00e7\u00e3o personalizada (crescente)<\/em>&nbsp;<\/p>\n\n\n\n<p><em>array.sort((a, b) =&gt; a &#8211; b);<\/em>&nbsp;<\/p>\n\n\n\n<p><em>console.log(array); \/\/ Sa\u00edda: [1, 2, 3, 4]<\/em>&nbsp;<\/p>\n\n\n\n<p>Tenha cuidado ao usar o m\u00e9todo sort() com arrays de objetos complexos, pois a <strong>ordena\u00e7\u00e3o <\/strong>pode n\u00e3o produzir o resultado desejado sem uma fun\u00e7\u00e3o de compara\u00e7\u00e3o personalizada.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Inverter a ordem dos elementos com reverse()<\/strong>\u00a0<\/h3>\n\n\n\n<p>O m\u00e9todo <strong>reverse() <\/strong>\u00e9 utilizado para inverter a ordem dos elementos.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Ele modifica o array original, alterando a posi\u00e7\u00e3o dos elementos de forma que o <strong>primeiro se torne o \u00faltimo e o \u00faltimo se torne o primeiro<\/strong>.&nbsp;<\/p>\n\n\n\n<p>Confira um exemplo:&nbsp;<\/p>\n\n\n\n<p><em>const frutas = [&#8216;ma\u00e7\u00e3&#8217;, &#8216;banana&#8217;, &#8216;laranja&#8217;];<\/em>&nbsp;<\/p>\n\n\n\n<p><em>frutas.reverse(); \/\/ Inverte a ordem das frutas<\/em>&nbsp;<\/p>\n\n\n\n<p><em>console.log(frutas); \/\/ Sa\u00edda: [&#8216;laranja&#8217;, &#8216;banana&#8217;, &#8216;ma\u00e7\u00e3&#8217;]<\/em>&nbsp;<\/p>\n\n\n\n<p>Quando for preciso <strong>inverter a ordem<\/strong> de maneira r\u00e1pida e direta, o m\u00e9todo reverse() \u00e9 \u00fatil.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Contudo, seu uso excessivo em conjuntos grandes de <a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/fluxo-de-dados-principais-ferramentas\/\" target=\"_blank\" rel=\"noreferrer noopener\">dados<\/a> pode afetar o desempenho da aplica\u00e7\u00e3o, devido \u00e0 necessidade de percorrer todo o array.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Quais s\u00e3o os m\u00e9todos avan\u00e7ados para localizar e manipular elementos?<\/strong>\u00a0<\/h2>\n\n\n\n<p>Os m\u00e9todos avan\u00e7ados para <strong>localizar e manipular elementos espec\u00edficos em arrays<\/strong> permitem opera\u00e7\u00f5es como adi\u00e7\u00e3o, remo\u00e7\u00e3o, substitui\u00e7\u00e3o e sele\u00e7\u00e3o de modo mais eficiente.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Localizar elementos<\/strong>\u00a0<\/h3>\n\n\n\n<p>O m\u00e9todo <strong>indexOf()<\/strong> encontra a primeira ocorr\u00eancia de um elemento em um array e retorna o seu \u00edndice. Ele retorna -1 se o elemento n\u00e3o estiver presente no array.&nbsp;<\/p>\n\n\n\n<p>Este trecho de c\u00f3digo <strong>demonstra o uso dos m\u00e9todos<\/strong> indexOf() e lastIndexOf() em um array que cont\u00e9m os elementos [1, 2, 3, 4, 2].&nbsp;<\/p>\n\n\n\n<p><em>const array = [1, 2, 3, 4, 2];<\/em>&nbsp;<\/p>\n\n\n\n<p><em>const firstIndex = array.indexOf(2); \/\/ Procura a primeira ocorr\u00eancia de 2<\/em>&nbsp;<\/p>\n\n\n\n<p><em>console.log(firstIndex); \/\/ Sa\u00edda: 1<\/em>&nbsp;<\/p>\n\n\n\n<p><em>const lastIndex = array.lastIndexOf(2); \/\/ Procura a \u00faltima ocorr\u00eancia de 2<\/em>&nbsp;<\/p>\n\n\n\n<p><em>console.log(lastIndex); \/\/ Sa\u00edda: 4<\/em>&nbsp;<\/p>\n\n\n\n<p>No caso deste array, a primeira ocorr\u00eancia do n\u00famero 2 est\u00e1 no <strong>\u00edndice 1<\/strong>, pois os \u00edndices em JavaScript come\u00e7am em 0.&nbsp;<\/p>\n\n\n\n<p>Por fim, o \u00edndice da <strong>\u00faltima ocorr\u00eancia do n\u00famero 2<\/strong> \u00e9 impresso no console. Ela est\u00e1 no \u00edndice 4.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Manipular elementos<\/strong>\u00a0<\/h3>\n\n\n\n<p>O m\u00e9todo <strong>splice()<\/strong> altera o conte\u00fado de um array, removendo ou substituindo elementos existentes e\/ou adicionando novos. Ele retorna um novo array contendo os elementos removidos, se houver.&nbsp;<\/p>\n\n\n\n<p>No exemplo, temos um array inicializado com os valores [1, 2, 3, 4, 5]:&nbsp;<\/p>\n\n\n\n<p><em>const array = [1, 2, 3, 4, 5];<\/em>&nbsp;<\/p>\n\n\n\n<p><em>\/\/ Removendo 2 elementos a partir do \u00edndice 2 e inserindo &#8216;a&#8217;, &#8216;b&#8217;, &#8216;c&#8217;<\/em>&nbsp;<\/p>\n\n\n\n<p><em>const removedElements = array.splice(2, 2, &#8216;a&#8217;, &#8216;b&#8217;, &#8216;c&#8217;);<\/em>&nbsp;<\/p>\n\n\n\n<p><em>console.log(array); \/\/ Sa\u00edda: [1, 2, &#8216;a&#8217;, &#8216;b&#8217;, &#8216;c&#8217;, 5]<\/em>&nbsp;<\/p>\n\n\n\n<p><em>console.log(removedElements); \/\/ Sa\u00edda: [3, 4]<\/em>&nbsp;<\/p>\n\n\n\n<p>O array <strong>removedElements<\/strong> que cont\u00e9m os elementos removidos pelo m\u00e9todo splice() \u00e9 impresso no console. O resultado \u00e9 [3, 4].&nbsp;<\/p>\n\n\n\n<p>O primeiro par\u00e2metro do splice() se refere a partir de qual \u00edndice ser\u00e1 removido e inclu\u00eddo novos elementos. No exemplo, \u201c2\u201d.&nbsp;<\/p>\n\n\n\n<p>O segundo par\u00e2metro se refere a quantos elementos ser\u00e3o removidos a partir do \u00edndice defino no primeiro par\u00e2metro. No exemplo, \u201c2\u201d.&nbsp;<\/p>\n\n\n\n<p>Os demais par\u00e2metros ser\u00e3o os elementos a serem adicionados no array. No exemplo, \u201c\u2019a\u2019,\u2019b\u2019,\u2019c\u2019\u201d&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Cria\u00e7\u00e3o de uma c\u00f3pia do array<\/strong>\u00a0<\/h3>\n\n\n\n<p>O m\u00e9todo <strong>slice()<\/strong> tamb\u00e9m pode ser usado para fazer uma c\u00f3pia do array, sem modificar o original.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Ele retorna uma c\u00f3pia superficial de parte de um array, selecionada a partir de um intervalo de \u00edndices especificado.&nbsp;<\/p>\n\n\n\n<p><em>const array = [1, 2, 3, 4, 5];<\/em>&nbsp;<\/p>\n\n\n\n<p><em>const newArray = array.slice(1, 4); \/\/ Seleciona elementos do \u00edndice 1 ao 3<\/em>&nbsp;<\/p>\n\n\n\n<p><em>console.log(newArray); \/\/ Sa\u00edda: [2, 3, 4]<\/em>&nbsp;<\/p>\n\n\n\n<p>O <strong>novo array<\/strong> cont\u00e9m os elementos [2, 3, 4], que foram selecionados do original.&nbsp;<\/p>\n\n\n\n<p>No slice(), o primeiro par\u00e2metro se refere a partir de qual \u00edndice ser\u00e1 criado o novo array. No exemplo, \u201c1\u201d.&nbsp;<\/p>\n\n\n\n<p>E o segundo par\u00e2metro se refere ao \u00edndice do \u00faltimo elemento a ser adicionado, por\u00e9m n\u00e3o adiciona o elemento daquele \u00edndice.&nbsp;&nbsp;<\/p>\n\n\n\n<p>No exemplo, \u201c4\u201d, mas o elemento do \u00edndice 4 n\u00e3o \u00e9 adicionado, por isso a sa\u00edda \u00e9 [2, 3, 4].&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>T\u00e9cnicas avan\u00e7adas para manipula\u00e7\u00e3o de elementos<\/strong>\u00a0<\/h3>\n\n\n\n<p>Os m\u00e9todos indexOf() e splice() podem ser combinados para remover elementos espec\u00edficos de um array com base no seu valor ou \u00edndice.&nbsp;&nbsp;<\/p>\n\n\n\n<p>O m\u00e9todo indexOf() \u00e9 usado para <strong>encontrar o \u00edndice do elemento<\/strong> que desejamos remover, enquanto o splice() \u00e9 utilizado para <strong>realizar a remo\u00e7\u00e3o<\/strong> desse elemento.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Por exemplo:&nbsp;<\/p>\n\n\n\n<p><em>const array = [1, 2, 3, 4, 5];<\/em>&nbsp;<\/p>\n\n\n\n<p><em>const elementToRemove = 3;<\/em>&nbsp;<\/p>\n\n\n\n<p><em>const indexToRemove = array.indexOf(elementToRemove); \/\/ Encontra o \u00edndice do elemento a ser removido<\/em>&nbsp;<\/p>\n\n\n\n<p><em>if (indexToRemove !== -1) { \/\/ Verifica se o elemento foi encontrado<\/em>&nbsp;<\/p>\n\n\n\n<p><em>&nbsp;&nbsp;&nbsp; array.splice(indexToRemove, 1); \/\/ Remove o elemento do array<\/em>&nbsp;<\/p>\n\n\n\n<p><em>}<\/em>&nbsp;<\/p>\n\n\n\n<p><em>console.log(array); \/\/ Sa\u00edda: [1, 2, 4, 5]<\/em>&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Como testar e validar condi\u00e7\u00f5es em arrays em Javascript?<\/strong>\u00a0<\/h2>\n\n\n\n<p>Para <strong>testar e validar condi\u00e7\u00f5es em arrays <\/strong>em JavaScript, voc\u00ea pode utilizar m\u00e9todos como every(), some() e includes().&nbsp;&nbsp;<\/p>\n\n\n\n<p>Essas fun\u00e7\u00f5es permitem verificar se <strong>determinadas condi\u00e7\u00f5es s\u00e3o verdadeiras para todos<\/strong>, alguns ou, pelo menos, um dos elementos.&nbsp;<\/p>\n\n\n\n<p>Al\u00e9m disso, \u00e9 poss\u00edvel incorporar essas fun\u00e7\u00f5es em <strong>verifica\u00e7\u00f5es mais complexas<\/strong> para avaliar diferentes condi\u00e7\u00f5es, garantindo que os dados atendam aos crit\u00e9rios espec\u00edficos exigidos pelo seu c\u00f3digo.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>every()<\/strong>\u00a0<\/h3>\n\n\n\n<p>O m\u00e9todo <strong>every()<\/strong> verifica se todos os elementos de um array satisfazem uma condi\u00e7\u00e3o espec\u00edfica.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Ele retorna true se todos os elementos passarem no teste definido pela fun\u00e7\u00e3o de callback; caso contr\u00e1rio, retorna false.&nbsp;<\/p>\n\n\n\n<p><em>const array = [1, 2, 3, 4, 5];<\/em>&nbsp;<\/p>\n\n\n\n<p><em>const allGreaterThanZero = array.every((element) =&gt; {<\/em>&nbsp;<\/p>\n\n\n\n<p><em>&nbsp; return element &gt; 0;<\/em>&nbsp;<\/p>\n\n\n\n<p><em>});<\/em>&nbsp;<\/p>\n\n\n\n<p><em>console.log(allGreaterThanZero); \/\/ Sa\u00edda: true<\/em>&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>some()<\/strong>\u00a0<\/h3>\n\n\n\n<p>Para verificar se pelo menos um elemento de um array satisfaz uma condi\u00e7\u00e3o espec\u00edfica, o m\u00e9todo <strong>some ()<\/strong> pode ser usado.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Ele retorna true se pelo menos um elemento passar no teste definido pela fun\u00e7\u00e3o de callback; caso contr\u00e1rio, retorna false.&nbsp;<\/p>\n\n\n\n<p><em>const array = [1, 2, 3, 4, 5];<\/em>&nbsp;<\/p>\n\n\n\n<p><em>const anyGreaterThanThree = array.some((element) =&gt; {<\/em>&nbsp;<\/p>\n\n\n\n<p><em>&nbsp; return element &gt; 3;<\/em>&nbsp;<\/p>\n\n\n\n<p><em>});<\/em>&nbsp;<\/p>\n\n\n\n<p><em>console.log(anyGreaterThanThree); \/\/ Sa\u00edda: true<\/em>&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>includes()<\/strong>\u00a0<\/h3>\n\n\n\n<p>O m\u00e9todo <strong>includes()<\/strong> verifica se um array cont\u00e9m um determinado elemento, retornando true ou false, conforme a condi\u00e7\u00e3o.&nbsp;<\/p>\n\n\n\n<p><em>const array = [1, 2, 3, 4, 5];<\/em>&nbsp;<\/p>\n\n\n\n<p><em>const includesThree = array.includes(3);<\/em>&nbsp;<\/p>\n\n\n\n<p><em>console.log(includesThree); \/\/ Sa\u00edda: true<\/em>&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Qual \u00e9 a import\u00e2ncia de dominar as fun\u00e7\u00f5es nativas de arrays em JavaScript?<\/strong>\u00a0<\/h2>\n\n\n\n<p>Nesse artigo, voc\u00ea descobriu uma caixa de ferramentas cheia de <strong>solu\u00e7\u00f5es inteligentes<\/strong> para desenvolvimento: as fun\u00e7\u00f5es nativas de arrays em JavaScript.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Ao dominar esses m\u00e9todos, \u00e9 poss\u00edvel escrever <a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/como-se-tornar-uma-pessoa-dev-mais-produtiva\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>c\u00f3digo limpo<\/strong><\/a><strong> e eficiente<\/strong>, tornando-se mais \u00e1gil na resolu\u00e7\u00e3o de problemas.\u00a0<\/p>\n\n\n\n<div class=\"user-cta-block\" style=\"background-color:#2E333C;\"><p>Servidor VPS com a flexibilidade e autonomia que voc\u00ea precisa. Data Center no Brasil e suporte especializado a qualquer hora.<\/p><a class=\"user-cta\" style=\"background-color: #00acc8;\" href=\"https:\/\/www.locaweb.com.br\/servidor-vps\/?utm_source=blog&#038;utm_medium=own&#038;utm_campaign=blog-servidor-vps-arrays-em-javascript&#038;utm_id=blog-vendas\" target=\"_blank\" rel=\"noopener\">Clique aqui!<\/a><\/div>\u00a0\n","protected":false},"excerpt":{"rendered":"<p>As fun\u00e7\u00f5es nativas de arrays em JavaScript otimizam o desenvolvimento. Conhe\u00e7a os m\u00e9todos para itera\u00e7\u00e3o, manipula\u00e7\u00e3o, ordena\u00e7\u00e3o, busca e valida\u00e7\u00e3o.\u00a0 As fun\u00e7\u00f5es nativas de array no JavaScript tornam a escrita de c\u00f3digos mais eficiente e concisa. Voc\u00ea pode simplificar tarefas complexas e melhorar a legibilidade e a manutenibilidade do c\u00f3digo.&nbsp; Essa abordagem \u00e9 um padr\u00e3o [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":48285,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-48267","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-aberto"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/48267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/comments?post=48267"}],"version-history":[{"count":8,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/48267\/revisions"}],"predecessor-version":[{"id":48290,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/48267\/revisions\/48290"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/media\/48285"}],"wp:attachment":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/media?parent=48267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/categories?post=48267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/tags?post=48267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}