JavaScript: métodos de Arrays que você precisa conhecer \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 11 Horas 18 Min 29 Seg Tempo restante da oferta: 11 18 29 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) JavaScript: métodos de Arrays que você precisa conhecer [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) # JavaScript: métodos de Arrays que você precisa conhecer Trabalha com JavaScript? Então você precisa conhecer estes métodos para trabalhar com Arrays. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 8 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/07/31131011/funções-js.png) Olá, Web Developers! Trabalhar com *Arrays* já nos lembra loopings, o que normalmente nos lembra de `for` e `while`. Porém, *Arrays* nos fornecem vários métodos para facilitar nosso trabalho em certas situações. Veja a seguir métodos do JavaScript que pode simplificar sua vida ao invés de ficar criando loopings. [ ![JQuery Completo](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/jquery.svg) Curso JQuery Completo Conhecer o curso ](https://www.treinaweb.com.br/curso/jquery) ## .forEach() Caso você precise executar algum código para cada elemento do Array, executar um `forEach` é muito mais simples do que criar um `for` ou `while`, já que não precisamos declarar variáveis de controle. ```js let myHTML = '' const numbersList = [1, 2, 3, 4, 5]; numbersList.forEach((number, index, array) => { myHTML += `${number}`; }); myHTML += ''; ``` O `.forEach()` irá jogar cada um dos elemetos do Array no primeiro parâmetro, o índice do elemento no segundo e o Array original no terceiro. Claro que se não for usar, pode colocar apenas o primeiro e deixar o código assim: ```js let myHTML = '' const numbersList = [1, 2, 3, 4, 5]; numbersList.forEach(number => myHTML += `${number}` ); myHTML += ''; ``` [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-COMECANDO-JS.png) ](https://www.treinaweb.com.br/ebook/guia-javascript) ## .map() Nós utilizamos o `.map()` quando queremos fazer alguma modificação nos elementos de um Array. ```js const usersList = [ {name: 'João', credit: 500}, {name: 'Maria', credit: 800} ]; const newUsersList = usersList.map((user, index, array) => { user.credit += 100; return user; }) ``` No exemplo acima alteramos o valor de uma propriedade de cada um dos elementos do Array. Na última linha nós precisamos executar o comando `return` para indicar o que será retornado para o Array. No final teremos um novo Array. Teremos o seguinte retorno: ```js [ {name: 'João', credit: 600}, {name: 'Maria', credit: 900} ]; ``` Também pode ser interessante se quisermos alterar a estrutura dos objetos do Array. Podemos pegar o exemplo de cima: suponha que a gente agora queira um Array com o nome de todos os usuários da nossa lista. Teríamos o seguinte código: ```js const newUsersList = usersList.map((user, index, array) => { return user.name; }) /* Resultado: [ 'João', 'Maria' ] */ ``` Outro exemplo bem simples, aproveitando a simplicidade das Arrow Functions: dobrar o valor dos números de um Array: ```js [1, 2, 3, 4, 5].map(number => number * 2); /* Resultado: [2, 4, 6, 8, 10] */ ``` [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/BANNER-AULA-GRATUITA-1700x850-1.jpg) ](https://www.treinaweb.com.br/lp/aula-gratis/) ## .filter() Como o próprio nome indica, serve para filtrarmos os elementos de um Array. Passamos para ele uma função. Se essa função retornar `true`, o elemento será inserido no novo Array que será criado. Se a função retornar `false`, o elemento será ignorado. ```js const usersList = [ {name: 'João', credit: 600}, {name: 'Maria', credit: 900}, {name: 'Carlos', credit: 300}, {name: 'Vanessa', credit: 200}, ]; const newUsersList = usersList.filter((user, index, array) => user.credit > 500); /* Resultado: [ {name: 'João', credit: 600}, {name: 'Maria', credit: 900} ] */ ``` ## .find() Usamos esse método quando queremos encontrar algum elemento dentro no Array. Para isso, passamos uma função que irá retornar `true` ou `false`. O primeiro `true` que for retornado irá finalizar a função e retornar o elemento em que estamos. ```js const usersList = [ {name: 'João', credit: 600}, {name: 'Maria', credit: 900}, {name: 'Carlos', credit: 300}, {name: 'Vanessa', credit: 200}, ]; const carlos = usersList.find((user, index, array) => user.name === 'Carlos'); /* Resultado: {name: 'Carlos', credit: 300} */ ``` ## .findIndex() Faz o mesmo que o `.find()`, mas retorna o índice do elemento encontrado ao invés de retornar o próprio elemento. ```js const usersList = [ {name: 'João', credit: 600}, {name: 'Maria', credit: 900}, {name: 'Carlos', credit: 300}, {name: 'Vanessa', credit: 200}, ]; const carlos = usersList.findIndex((user, index, array) => user.name === 'Carlos'); /* Resultado: 2 */ ``` ## .every() Serve para testarmos se todos os elementos do Array passam em uma condição. Passamos uma função que retorna `true` ou `false`. Se todos os retornos forem `true`, significa que todos os elementos passaram no teste, e a função retornará `true`. ```js const usersList = [ {name: 'João', credit: 600}, {name: 'Maria', credit: 900}, {name: 'Carlos', credit: 300}, {name: 'Vanessa', credit: 200}, ]; const result1 = usersList.every((user, index, array) => user.credit < 1000); const result2 = usersList.every(user => user.credit < 500); ``` No primeiro nós testamos se todos os usuários possuem crédito menor que 1000. Como todos passaram no teste, o resultado de `result1` será `true`. No segundo nós testamos se todos os usuários possuem crédito menor que 500. Como não são todos que passam nesse teste, o resultado de `result2` será `false`. ## .some() O `.some()` faz algo parecido com o `.every()`. A diferença é que o `.every()` só retorna `true` se todos os elementos passarem no teste. O `.some()` retorna `true` se pelo menos um elemento do Array passar no teste. ```js const usersList = [ {name: 'João', credit: 600}, {name: 'Maria', credit: 900}, {name: 'Carlos', credit: 300}, {name: 'Vanessa', credit: 200}, ]; const result = usersList.some((user, index, array) => user.credit === 300); ``` Verificamos se há pelo menos um usuário com crédito igual a 300. O resultado será `true`. ## .sort() O `.sort()` serve para ordenar os elementos de Arrays. Muitas pessoas utilizam este método de maneira errada, apenas executando `array.sort()`. Isso pode causar retornos inesperados, pois os elementos serão convertidos em texto. O correto é passar uma função que compare dois elementos. Assim, podemos ordenar um Array com qualquer tipo de objeto, ordenando por qualquer propriedade. ```js const numbersList = [4, 5, 7, 8, 2]; const orderedList = numbersList.sort((a, b) => { if(a < b){ return -1; } else if(a > b){ return 1; } return 0; }) ``` A função de ordenação sempre recebe dois elementos. Se o primeiro for menor, devemos retornar um número menor que 0. Se o primeiro for maior, devemos retornar um número maior do que 0. Se forem iguais, retornamos 0. Neste caso, poderíamos simplificar a ordenação de números das seguintes maneiras: ```js const orderedList = numbersList.sort((a, b) => a > b ? 1 : -1 ); // ou também: const orderedList = numbersList.sort((a, b) => a - b ) ``` Para ter a ordenação em ordem decrescente, basta inverter o retorno da função. ```js const orderedList = numbersList.sort((a, b) => a > b ? -1 : 1 ); ``` Podemos utilizar em elementos mais complexos: ```js const usersList = [ {name: 'João', credit: 600}, {name: 'Maria', credit: 900}, {name: 'Carlos', credit: 300}, {name: 'Vanessa', credit: 200}, ]; const orderedUsers = usersList.sort((a, b) => a.credit - b.credit); ``` Com isso teremos um novo Array com os usuários ordenados pela quantidade de crédito. ## .reduce() Esta função serve para reduzirmos o conteúdo de um Array para apenas um elemento. O exemplo mais clássico é somar todos os valores de um Array. ```js const numbersList = [1, 2, 3]; const total = numbersList.reduce((total, currentElement) => total + currentElement) /* Resultado: 6 */ ``` A função que executamos recebe como primeiro parâmetro uma variável que irá acumular um valor e como segundo parâmetro teremos cada um dos elementos do Array a cada iteração. [ ![TypeScript - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/typescript.svg) Curso TypeScript - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/typescript-fundamentos) - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/ARRAYS-OBJETOS-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Trabalhando com arrays e objetos no JavaScript ](https://www.treinaweb.com.br/blog/trabalhando-com-arrays-e-objetos-no-javascript) Confira neste artigo como trabalhar com Arrays e Objetos no JavaScript. Vamos aprender a declarar e manipular Arrays e Objetos com exemplos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/03/13164211/JAVASCRIPT-COISAS-ESTRANHAS-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 7 anos atrás ## [ JavaScript - Entendendo as partes estranhas ](https://www.treinaweb.com.br/blog/javascript-entendendo-as-partes-estranhas) Conheça o motivo por trás de vários comportamentos considerados estranhos que o JavaScript possui. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/08/06121421/html-pdf-php-lambda-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Função para converter HTML para PDF usando PHP e wkhtmltopdf no AWS Lambda ](https://www.treinaweb.com.br/blog/funcao-para-converter-html-para-pdf-usando-php-e-wkhtmltopdf-no-aws-lambda) Veja nesse artigo como subir uma função para o AWS Lambda para converter HTML para PDF usando wkhtmltopdf e o PHP como linguagem base. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/javascript-comandos-do-console-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ JavaScript - Comandos do Console ](https://www.treinaweb.com.br/blog/javascript-comandos-do-console) Conheça os comandos do console do navegador e domine essa ferramenta para melhorar seus testes ou caça aos bugs do seu JavaScript! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/05/01125223/react-php-imagem-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 8 anos atrás ## [ Introdução à programação assíncrona em PHP usando o ReactPHP ](https://www.treinaweb.com.br/blog/introducao-a-programacao-assincrona-em-php-usando-o-reactphp) Uma introdução à programação assíncrona com PHP e uso básico dos componentes do ReactPHP. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/03075049/Ordenação-de-Cores-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 7 anos atrás ## [ JavaScript - Ordenando Elementos por Cores ](https://www.treinaweb.com.br/blog/javascript-ordenando-elementos-por-cores) Aprenda a ordenar cores e fazer conversões entre os formatos RGB, Hexadecimal e HSL usando JavaScript. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/03075049/Inteligência-Artificial-Selecionando-Cores-400x280.png) [ Machine Learning ](https://www.treinaweb.com.br/blog/categoria/machine-learning) 7 anos atrás ## [ Desenvolva uma Inteligência Artificial que reconhece cores diretamente no navegador com TensorFlow.js ](https://www.treinaweb.com.br/blog/desenvolva-uma-inteligencia-artificial-que-reconhece-cores-diretamente-no-navegador-com-tensorflow-js) Aprenda a trabalhar com Machine Learning diretamente no navegador usando o TensorFlow.js Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/GUIA-LINGUAGEM-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Guia da Linguagem JavaScript ](https://www.treinaweb.com.br/blog/guia-da-linguagem-javascript) Neste Guia da Linguagem Javascript vamos abordar aspectos fundamentais, como: tipos de dados, variáveis, objetos, arrays e muito mais. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/javascript-comandos-do-console-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 5 anos atrás ## [ Trabalhando com data no JavaScript ](https://www.treinaweb.com.br/blog/trabalhando-com-data-no-javascript) Neste artigo veremos como manipular datas no JavaScript, utilizando a classe Date, como pegar a data atual e utilizar os métodos da classe. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/ESTRUTURAS-CONDICIONAIS-REPETICAO-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Estruturas condicionais e estruturas de repetição em JavaScript ](https://www.treinaweb.com.br/blog/estruturas-condicionais-e-estruturas-de-repeticao-em-javascript) Neste artigo veremos como utilizar as estruturas condicionais (if, else) e as estruturas de repetição (while, for) no JavaScript. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/07/novos-recursos-do-ecmascript-2022-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 4 anos atrás ## [ Novos recursos do ECMAScript 2022 ](https://www.treinaweb.com.br/blog/novos-recursos-do-ecmascript-2022) Novos recursos do ECMAScript 2022 que é a décima terceira edição da especificação que vai padronizar tudo no mundo do JavaScript. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/01/CICLO-VIDA-REACT-400x280.jpg) [ React ](https://www.treinaweb.com.br/blog/categoria/react) 4 anos atrás ## [ Ciclo de vida de componentes funcionais no React ](https://www.treinaweb.com.br/blog/ciclo-de-vida-de-componentes-funcionais-no-react) Como funciona o ciclo de vida de componentes funcionais no React para manipular a inicialização, atualização e limpeza de um componente React Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **11h 18min 29s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58