O array em JavaScript é uma das estruturas mais importantes e versáteis na programação. Eles permitem armazenar, manipular e organizar múltiplos valores em uma única variável, tornando mais eficiente o trabalho com dados.
Seja para criar listas simples ou para trabalhar com coleções complexas como um array de objetos em JavaScript, o entendimento dessa estrutura é essencial para desenvolvedores. Além disso, aprender os principais métodos e funcionalidades ajuda a realizar operações de forma prática e eficiente.
Neste artigo, você encontrará um guia completo sobre array no JavaScript, exemplos práticos e explicações detalhadas sobre como utilizar métodos populares como arrayFilter e outras funções úteis. Continue lendo para dominar essa estrutura.
O Que é um Array em JavaScript?
Um array JavaScript é uma coleção de valores ordenados, que podem ser de qualquer tipo: números, strings, objetos ou até outros arrays. Ele funciona como uma lista, permitindo que você armazene e acesse dados de forma simples.
Exemplo de Array
const frutas = ['maçã', 'banana', 'laranja'];
console.log(frutas[0]);// Saída: 'maçã'
Acima, criamos um array chamado frutas que contém três elementos. Para acessar os valores, usamos um índice numérico que começa em 0.
Como Criar um Array no JavaScript
A criação de um array no JavaScript é simples e pode ser feita de várias formas. Veja as mais comuns:
1. Usando Colchetes ([])
const numeros = [1, 2, 3, 4];2. Usando o Construtor Array()
const numeros = new Array(1, 2, 3, 4);Embora ambas as formas sejam válidas, o uso de colchetes é mais comum por ser mais legível e direto.
Métodos Mais Usados em Arrays
Os métodos de array no JavaScript tornam a manipulação de dados mais prática e eficiente. Aqui estão os principais:
1. join
Combina os elementos de um array em uma string, separando-os por um delimitador especificado.
const arr = ["a", "b", "c"];
const result = arr.join("-");
console.log(result);
// "a-b-c"
2. reverse
Inverte a ordem dos elementos do array.
const arr = [1, 2, 3];
arr.reverse();
console.log(arr);
// [3, 2, 1]
3. sort
Ordena os elementos de um array no local, podendo usar uma função de comparação.
const arr = [3, 1, 2];
arr.sort();
console.log(arr);
// [1, 2, 3]
4. push
Adiciona um ou mais elementos ao final do array e retorna o novo comprimento.
const arr = [1, 2];
arr.push(3);
console.log(arr);
// [1, 2, 3]
5. pop
Remove o último elemento do array e o retorna.
const arr = [1, 2, 3];
const last = arr.pop();
console.log(last); // 3
console.log(arr); // [1, 2]
6. shift
Remove o primeiro elemento do array e o retorna.
const arr = [1, 2, 3];
const first = arr.shift();
console.log(first); // 1
console.log(arr); // [2, 3]
7. unshift
Adiciona um ou mais elementos ao início do array e retorna o novo comprimento.
const arr = [2, 3];
arr.unshift(1);
console.log(arr); // [1, 2, 3]
8. splice
Adiciona, substitui ou remove elementos de um array.
const arr = [1, 2, 3];
arr.splice(1, 1, 4); // Remove 1 elemento na posição 1 e insere 4
console.log(arr); // [1, 4, 3]
9. concat
Combina dois ou mais arrays, retornando um novo array.
const arr1 = [1, 2];
const arr2 = [3, 4];
const result = arr1.concat(arr2);
console.log(result); // [1, 2, 3, 4]
10. slice
Retorna uma cópia de uma parte do array, sem alterar o original.
const arr = [1, 2, 3, 4];
const result = arr.slice(1, 3);
console.log(result); // [2, 3]
11. indexOf
Retorna o índice da primeira ocorrência de um elemento no array ou -1 se não encontrado.
const arr = [1, 2, 3];
console.log(arr.indexOf(2)); // 1
12. lastIndexOf
Retorna o índice da última ocorrência de um elemento no array ou -1 se não encontrado.
const arr = [1, 2, 3, 2];
console.log(arr.lastIndexOf(2)); // 3
13. forEach
Executa uma função para cada elemento do array.
const arr = [1, 2, 3];
arr.forEach(num => console.log(num)); // 1, 2, 3
14. map
Retorna um novo array com os resultados da aplicação de uma função em cada elemento.
const arr = [1, 2, 3];
const result = arr.map(num => num * 2);
console.log(result); // [2, 4, 6]
15. reduce
Reduz o array a um único valor, aplicando uma função acumuladora.
const arr = [1, 2, 3];
const sum = arr.reduce((acc, num) => acc + num, 0);
console.log(sum); // 6
16. reduceRight
Funciona como reduce, mas processa o array da direita para a esquerda.
const arr = [1, 2, 3];
const sum = arr.reduceRight((acc, num) => acc + num, 0);
console.log(sum); // 6
17. filter
Retorna um novo array com elementos que atendem a uma condição.
const arr = [1, 2, 3];
const result = arr.filter(num => num > 1);
console.log(result); // [2, 3]
18. some
Verifica se pelo menos um elemento do array atende a uma condição.
const arr = [1, 2, 3];
const hasEven = arr.some(num => num % 2 === 0);
console.log(hasEven); // true
19. every
Verifica se todos os elementos do array atendem a uma condição.
const arr = [2, 4, 6];
const allEven = arr.every(num => num % 2 === 0);
console.log(allEven); // true
20. isArray
Verifica se um valor é um array.
console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray("not array")); // false
Trabalhando com Arrays de Objetos
Um array de objetos em JavaScript é especialmente útil para representar conjuntos de dados mais complexos.
const usuarios = [
{ nome: 'João', idade: 30 },
{ nome: 'Maria', idade: 25 },
];
console.log(usuarios[0].nome); // Saída: 'João'Podemos aplicar métodos como filter() ou map() para manipular dados em arrays de objetos:
const adultos = usuarios.filter(usuario => usuario.idade >= 18);
console.log(adultos);// Filtra usuários maiores de idade
Melhores Práticas com Arrays
- Evite Modificar o Array Original
Muitos métodos, como map() e filter(), criam novos arrays em vez de modificar o original. Isso melhora a legibilidade e reduz erros. - Use Métodos Adequados
Escolha métodos como forEach(), map(), ou reduce() de acordo com o objetivo. - Documente o Conteúdo do Array
Comente ou nomeie variáveis de forma clara para indicar o tipo de dados armazenados.
Perguntas Frequentes Sobre Arrays em JavaScript
1. Qual a diferença entre array e objeto no JavaScript?
Um array é uma coleção ordenada de valores acessados por índices, enquanto um objeto é uma coleção de pares chave-valor acessados por suas chaves.
2. Posso misturar tipos diferentes em um array?
Sim, o array em JavaScript aceita valores de tipos diferentes.
const misto = [1, 'texto', true];3. O que é o método arrayFilter?
É um método para criar um novo array com base em uma condição aplicada a cada elemento do array original.
Conclusão
Os arrays no JavaScript são fundamentais para qualquer desenvolvedor, seja iniciante ou experiente. Entender como criar, manipular e aplicar métodos a arrays, incluindo arrays de objetos, é essencial para trabalhar de forma eficiente com dados.
Esperamos que este guia tenha ajudado você a entender melhor o funcionamento dos arrays JavaScript. Com essas dicas e exemplos, você estará mais preparado para lidar com essa estrutura poderosa.