Guia rápido de métodos de array em JavaScript (ao vivo)
Guia rápido de métodos de array em JavaScript
Guia rápido de métodos de array em JavaScript (rode cada um ao vivo) | We.Inc
Digite sua própria lista e veja map, filter, reduce, find, sort, splice e mais 30 métodos de array rodando nela, com um destaque claro em cada método que altera o array original.
Os métodos de array se dividem em dois grupos. Alguns alteram o array em que você os chama, como push, pop, splice, sort e reverse. Outros devolvem um novo array ou valor e deixam o original intacto, como map, filter, slice, toSorted e reduce. Edite a lista abaixo e cada método roda de novo com os seus valores.
Tarefas comuns com arrays e o método para cada uma
Tarefa
Método
Altera o original?
Transformar cada item
arr.map(fn)
Não
Manter os itens que passam em um teste
arr.filter(fn)
Não
Combinar em um único valor
arr.reduce(fn, start)
Não
Primeiro item que corresponde
arr.find(fn)
Não
Adicionar ao final
arr.push(x)
Sim
Cópia ordenada
arr.toSorted(fn)
Não
Contar os itens
Ler, não; definir, sim
A maioria dos guias rápidos lista os nomes dos métodos com um exemplo pronto. Aqui os exemplos rodam sobre uma lista que você controla, então dá para ver o que acontece com itens duplicados, uma lista vazia ou um único item. Cada linha tem uma marcação para você saber de relance se o método reescreve seus dados, o que é a origem de muitos bugs de estado no React e em bibliotecas parecidas.
Digite uma lista separada por vírgulas na caixa. Os espaços em volta de cada item são removidos.
Cada linha é recalculada. Os métodos que alteram o array rodam sobre uma cópia nova a cada vez, e a linha mostra tanto o valor de retorno quanto o array depois.
Filtre pelo nome ou escolha um grupo como Buscar ou Transformar para reduzir a lista.
Role para baixo para ver exemplos de encadeamento, a propriedade length e a tabela de troca entre métodos que alteram e métodos que copiam.
No estado do React, prefira toSorted, toReversed, toSpliced e with em vez dos equivalentes que alteram no lugar, porque ao mudar o array antigo o React pode não perceber a atualização.
Dê um valor inicial ao reduce. Sem ele, um array vazio lança um TypeError.
forEach sempre retorna undefined e não pode ser interrompido com break. Use for...of, some ou find quando precisar parar antes.
map, filter e slice copiam só um nível. Os objetos dentro do novo array são os mesmos objetos de antes.
Perguntas frequentes
Como obter o tamanho de um array em JavaScript?
Leia arr.length. É uma propriedade, não um método, então não tem parênteses. O valor é o maior índice mais um, o que equivale à quantidade de itens em arrays normais. Definir arr.length = 0 esvazia o array, e definir um número menor corta itens do final.
Qual é a diferença entre map e forEach?
map cria um novo array com o que sua função retorna para cada item, então você pode atribuí-lo ou encadear mais métodos. forEach só chama sua função e retorna undefined. Use map quando quiser um resultado e forEach apenas para efeitos colaterais, como registrar no console.
Quais métodos de array alteram o array original?
push, pop, shift, unshift, splice, sort, reverse, fill e copyWithin alteram o array no lugar. Definir length ou um índice diretamente também altera. Todo o resto deste guia deixa o array intacto.
Como remover um item de um array sem alterá-lo?
Use filter para remover por valor, por exemplo arr.filter((x) => x !== 'kiwi'), ou toSpliced(index, 1) para remover por posição. Os dois retornam um novo array e deixam o original como estava.
Por que o map retorna valores undefined?
Sua callback não retornou nada. Uma arrow function com chaves precisa de um return explícito; escreva (x) => x * 2 ou (x) => { return x * 2; }. Um return ausente gera undefined naquela posição.
Lendo um encadeamento da esquerda para a direita
Como os métodos que copiam retornam arrays, você pode chamar outro método direto no resultado. Um encadeamento como orders.filter(isPaid).map(toTotal).reduce(add, 0) se lê como uma frase: mantenha os pedidos pagos, transforme cada um em um número, some tudo.
Encadeamentos longos são fáceis de ler, mas percorrem a lista uma vez por etapa. Com alguns milhares de itens isso nunca importa; com volumes muito grandes, um único laço for...of que faz as três tarefas é mais rápido.
Métodos de busca retornam coisas diferentes
includes responde sim ou não. indexOf e findIndex dão uma posição, e -1 significa não encontrado. find e findLast dão o próprio item, ou undefined. some e every respondem uma pergunta de sim ou não sobre uma função de teste.
includes e indexOf comparam com igualdade estrita, então não conseguem encontrar um objeto pelo conteúdo. Para isso, use find ou some com uma função de teste.
Métodos que alteram e seus equivalentes que copiam
Quando você não pode mexer no original, por exemplo no estado do React ou no argumento de uma função, troque a coluna da esquerda pela da direita.
No lugar versus cópia
Altera o array
Retorna um novo array
arr.sort(fn)
arr.toSorted(fn)
arr.reverse()
arr.toReversed()
arr.splice(i, n, ...items)
arr.toSpliced(i, n, ...items)
arr[i] = value
arr.with(i, value)
arr.push(a, b)
[...arr, a, b] ou arr.concat([a, b])
arr.unshift(a)
[a, ...arr]
arr.pop()
arr.slice(0, -1)
arr.shift()
arr.slice(1)
Encadeando map, filter e reduce
Total dos pedidos pagos em um só encadeamento
Cada etapa retorna um array novo, e o próximo método roda sobre ele. A lista original de pedidos nunca é alterada.
Lendo e definindo length
length é uma propriedade simples. Diminuí-la remove itens do final, e por isso conta como uma alteração no array.
Atualizando o estado do React sem alterá-lo
Os métodos que copiam entregam ao React um array novo, então o componente renderiza de novo. Chamar sort ou push no array do estado não faria isso.
Quantos itens
Primeiro item
Último item, contando do final
true se o valor estiver presente
Primeira posição do valor, ou -1
Última posição do valor, ou -1
Primeiro item que passa no teste
Posição do primeiro item que passa
Último item que passa no teste
true se algum item passar
true se todos os itens passarem
Novo array com cada resultado da callback
Novo array com os itens que passam
Reduz a lista a um único valor
map e depois achata um nível
Cópia das posições 1 e 2
Novo array com itens extras no final
Uma string com um separador
Cópia ordenada (ordem de texto)
Cópia invertida
Cópia sem a posição 1
Cópia com a posição 0 substituída
Ordena no lugar e retorna o mesmo array
Inverte no lugar
Adiciona ao final e retorna o novo tamanho
Remove o último item e o retorna
Adiciona ao início e retorna o novo tamanho
Remove o primeiro item e o retorna
Remove a partir da posição 1 e retorna os itens removidos
Sobrescreve da posição 1 até o final
Copia uma parte do array sobre outra parte
Iterador de posições (espalhado aqui para exibir)
Iterador de pares [posição, item]
Todos
Ler
Buscar
Transformar
Ordenar
Adicionar e remover
Iterar
Guia de métodos de array ao vivo
Digite uma lista separada por vírgulas e cada método abaixo roda sobre ela enquanto você edita.