Arrays em JavaScript

Introdução aos Arrays em JavaScript

Um array em JavaScript é uma coleção de valores ordenada e indexada por inteiros. Ao contrário dos objetos, que armazenam propriedades com chaves sem ordem garantida, um array mantém seus itens em uma sequência específica e permite acessar qualquer item pela sua posição (seu índice). Os índices começam em 0, portanto o primeiro elemento está no índice 0, o segundo no índice 1, e assim por diante.

Os arrays são uma das estruturas de dados mais utilizadas na linguagem porque podem conter uma mistura de qualquer tipo de valor — números, strings, booleans, objects, até outros arrays — e crescem ou encolhem automaticamente conforme você adiciona e remove itens. Esta página cobre como criar arrays, alterar seu conteúdo, percorrê-los em loop, transformá-los, pesquisá-los e as práticas que mantêm o código com muitos arrays legível.

Criando e Inicializando Arrays

A maneira mais comum de criar um array é a sintaxe de array literal — uma lista separada por vírgulas dentro de colchetes:

let fruits = ["Apple", "Banana", "Cherry"];

Você também pode usar o construtor new Array(), embora raramente seja utilizado e tenha um caso especial confuso: quando você passa um único número, ele define o comprimento do array em vez de adicionar esse número como elemento.

Por causa dessa armadilha, prefira a sintaxe literal para tudo, exceto quando quiser deliberadamente pré-dimensionar um array.

Acessando Elementos e o Comprimento

Leia ou substitua um elemento pelo seu índice, e leia a contagem total com a propriedade length. Atribuir a um índice além do final atual estende o array.

Adicionando e Removendo Elementos

Quatro métodos cobrem as duas extremidades de um array. Preste atenção ao valor que cada um retorna — essa é uma fonte comum de bugs.

• push() — adiciona um ou mais elementos ao final e retorna o novo comprimento.

• pop() — remove o último elemento e retorna esse elemento.

• unshift() — adiciona um ou mais elementos ao início e retorna o novo comprimento.

• shift() — remove o primeiro elemento e retorna esse elemento.

Inserindo e Removendo no Meio com splice()

push/pop/shift/unshift afetam apenas as extremidades. Para adicionar, remover ou substituir itens em qualquer posição, use splice(start, deleteCount, ...itemsToInsert). Ele altera o array no lugar e retorna um array com os itens removidos.

Copiando uma Seção com slice()

slice(start, end) retorna uma cópia superficial de uma parte do array sem modificar o original. O índice end não é incluído.

Iterando Sobre os Elementos

Há várias maneiras de percorrer um array em loop. Use um loop for...of ou forEach() quando quiser apenas cada valor; recorra a loops baseados em índice somente quando realmente precisar do índice. (Consulte o capítulo sobre loops para o conjunto completo de formas de loop.)

• for...of — a maneira mais limpa de ler cada valor em ordem.

• forEach() — executa um callback uma vez por elemento, recebendo o valor, o índice e o próprio array.

Transformando Arrays

Esses métodos retornam um novo array (ou valor) em vez de modificar o original, o que os torna ideais para processamento de dados previsível e encadeável.

• map() — cria um novo array transformando cada elemento.

• filter() — cria um novo array com apenas os elementos que passam em um teste.

• reduce() — reduz todo o array a um único valor acumulando um resultado. Recebe um callback (accumulator, current) e um valor inicial.

Como map e filter retornam cada um um array, você pode encadeá-los:

Pesquisando Arrays

• includes() — retorna true/false indicando se um valor existe. indexOf() retorna o índice do valor, ou -1 se não for encontrado.

• find() e findIndex() — retornam o primeiro elemento (ou seu índice) que satisfaz um callback de teste.

Ordenando Arrays

sort() ordena os elementos no lugar e retorna o mesmo array.

Convertendo Arrays em Strings

O método join() combina todos os elementos em uma única string, usando o separador que você passa (por padrão, uma vírgula).

Operações Avançadas com Arrays

Arrays Multidimensionais

Como um array pode conter outros arrays, você pode modelar grades e matrizes. Use dois índices — matrix[row][column] — para acessar um valor interno.

O Operador Spread

O operador spread (...) expande um iterável — um array ou string — em elementos individuais onde múltiplos valores são esperados. É a maneira moderna de combinar e copiar arrays. (Para a forma de coleta relacionada, consulte parâmetros rest e sintaxe spread.)

• Combinando arrays:

• Copiando um array (uma cópia superficial, portanto o original não é alterado):

• Passando itens de um array como argumentos de função:

Desestruturação de Arrays

A desestruturação desempacota valores de arrays em variáveis separadas em uma única instrução. (A mesma ideia se aplica a objects — consulte atribuição de desestruturação.)

• Trocando variáveis sem uma variável temporária:

• Valores padrão preenchem quando uma posição está ausente:

Boas Práticas para Usar Arrays

• Declare com const quando a referência do array não vai mudar. const apenas impede a reatribuição da variável — você ainda pode usar push, pop e editar elementos, porque o conteúdo do array não está congelado.

• Prefira map, filter e reduce a loops manuais para transformar dados — eles descrevem a intenção e retornam novos arrays em vez de modificar estado compartilhado.
• Use o operador spread para copiar antes de modificar quando quiser evitar alterar o array original.
• Sempre passe uma função de comparação para sort() ao trabalhar com números.

Conclusão

Os arrays são a base do tratamento de dados em JavaScript: ordenados, baseados em índices e de tamanho dinâmico. Assim que você souber quais métodos modificam o array (push, pop, splice, sort) versus quais retornam novos valores (map, filter, slice, reduce), você poderá manipular coleções com confiança. Combine isso com o operador spread e a desestruturação para código conciso e legível. Em seguida, explore a referência completa de métodos de array e como os arrays se comparam com objetos JavaScript.

Prática