O que é e como usar Array JavaScript

Nesse artigos você vai aprender tudo sobre array Javascript com um guia completo abordando os principais pontos desse assunto. Vamos começar!

O Array JavaScript não mais é que uma das estruturas de dados mais fundamentais na programação com JavaScript. Eles permitem armazenar múltiplos valores em uma única variável, facilitando a organização e manipulação de grandes conjuntos de dados.

Com diversos métodos e funcionalidades, os Arrays em JavaScript oferecem uma ampla gama de operações, desde a simples adição e remoção de elementos até transformações complexas e filtragens. Entender como utilizar Arrays eficientemente é essencial para qualquer desenvolvedor que deseja criar aplicações robustas e performáticas.

1. O que é um Array?

Um JavaScript Array é uma estrutura de dados usada para armazenar múltiplos valores em uma única variável. É uma coleção de elementos, onde cada elemento tem um índice (posição).

2. Como criar um Array?

Como usar Colchetes ([]) no JavaScript Array

let frutas = ["Maçã", "Banana", "Laranja"];

Construtor Array

O construtor Array() pode ser usado para criar um array de duas maneiras:

• Criar um array vazio:

const novoArray = new Array(); // Cria um array vazio chamado "novoArray"

• Criar um array com elementos iniciais:

const novoArray = new Array("laranja", "uva", "pêssego"); // Cria um array com os elementos "laranja", "uva" e "pêssego"

3. Acessando elementos de um Array

Você pode acessar os elementos de um Array usando seu índice, que começa em 0.

let frutas = ["Maçã", "Banana", "Laranja"];
console.log(frutas[0]); // Saída: Maçã
console.log(frutas[1]); // Saída: Banana
console.log(frutas[2]); // Saída: Laranja

4. Métodos básicos de Arrays

push()

O método push() é usado para adicionar um ou mais elementos ao final de um array em JavaScript. Ele modifica o array original, aumentando seu tamanho e inserindo os novos elementos na última posição.

Como funciona:

• Retorno: O push() retorna o novo comprimento do array após a inserção dos elementos.
• Elementos: O push() pode receber um ou mais elementos como argumentos. Esses elementos podem ser de qualquer tipo, como números, strings, objetos ou até mesmo outros arrays.
• Inserção: Podemos inserir os elementos no final do array, na ordem em que nós fornecemos ao método.

let frutas = ["Maçã", "Banana"];
frutas.push("Laranja");
console.log(frutas); // Saída: ["Maçã", "Banana", "Laranja"]

pop()

O método pop() usamos para remover o último elemento de um array em JavaScript e retornar esse elemento removido. Ele modifica o array original, diminuindo seu tamanho em um.

Como funciona:

• Comprimento: Se o array estiver vazio, o pop() retorna undefined.
• Remoção: O pop() remove o último elemento do array. Atenção, quando você remove o elemento, não tem como recuperar após a chamada do método.
• Retorno: O pop() retorna o elemento que foi removido do array. Isso significa que você pode armazenar o elemento removido em uma variável ou usá-lo em outra operação.

const frutas = ["maçã", "banana", "laranja"];

const ultimaFruta = frutas.pop();

console.log(frutas); // ["maçã", "banana"]
console.log(ultimaFruta); // "laranja"

shift()

O método shift() em JavaScript utilizamos para remover o primeiro elemento de um array e retornar esse elemento removido. Ele modifica o array original, diminuindo seu tamanho em um.

Como funciona:

• Comprimento: Se o array estiver vazio, o shift() retorna undefined.
• Remoção: O shift() remove o elemento do índice zero do array. Esse elemento é efetivamente removido do array e não pode ser recuperado após a chamada do método.
• Retorno: O shift() retorna o elemento que foi removido do array. Isso significa que você pode armazenar o elemento removido em uma variável ou usá-lo em outra operação.
• Reordenação: Os demais elementos do array são reordenados para ocupar as posições anteriores, com o elemento no índice um assumindo a posição zero e assim por diante.

const frutas = ["maçã", "banana", "laranja"];

const primeiraFruta = frutas.shift();

console.log(frutas); // ["banana", "laranja"]
console.log(primeiraFruta); // "maçã"

unshift()

O método unshift() em JavaScript usamos para adicionar um ou mais elementos ao início de um array e retornar o novo tamanho do array. Ele modifica o array original, aumentando seu tamanho e movendo os elementos existentes para as posições seguintes.

Como funciona:

• Retorno: O unshift() retorna o novo tamanho do array após a inserção dos elementos.
• Inserção: O unshift() recebe um ou mais elementos como argumentos. Esses elementos são inseridos no início do array, na ordem em que são fornecidos ao método.
• Reordenação: Os elementos existentes no array se reordenam para ocupar as posições posteriores, com o primeiro elemento original assumindo a posição um e assim por diante.

const frutas = ["banana", "laranja"];

frutas.unshift("maçã", "uva");

console.log(frutas); // ["maçã", "uva", "banana", "laranja"]

5. Iterando sobre Arrays

Uso do for

O loop for é uma das maneiras mais básicas e comuns de iterar sobre os elementos de um array em JavaScript. Ele permite percorrer cada elemento do array, um por um, e executar um bloco de código para cada elemento. É uma ferramenta simples e versátil para realizar diversas operações em arrays, como exibir valores, aplicar funções ou modificar elementos.

Estrutura do loop for:

for (let i = 0; i < array.length; i++) {
  // Código a ser executado para cada elemento
}

Explicação:

• for: A palavra-chave que inicia o loop.
• let i = 0: Declaração da variável de controle i, inicializada com o valor 0. Essa variável será utilizada para controlar a iteração sobre os elementos do array.
• i < array.length: Condição de parada do loop. A cada iteração, o valor de i é comparado com o length do array (que indica o número total de elementos). Se i for menor que o length, o loop continua. Caso contrário, o loop é finalizado.
• i++: Incremento da variável de controle i. A cada iteração, o valor de i é incrementado em 1, fazendo com que a variável percorra os índices do array sequencialmente.
• // Código que executará cada elemento: Bloco de código que executará cada elemento do array. Esse bloco pode conter qualquer tipo de instrução JavaScript, como exibir o valor do elemento, aplicar uma função ou modificar o array.

let frutas = ["Maçã", "Banana", "Laranja"];
for (let i = 0; i < frutas.length; i++) {
    console.log(frutas[i]);
}
// Saída:
// Maçã
// Banana
// Laranja

Usando for…of

O loop for…of é uma maneira moderna e concisa de iterar sobre os elementos de um array em JavaScript. Ele permite percorrer cada elemento do array e executar um bloco de código para cada elemento, de forma similar ao loop for, mas com uma sintaxe mais simples e legível.

Estrutura do loop for…of:

for (const elemento of array) {
  // Código a ser executado para cada elemento
}

Explicação:

• for: A palavra-chave que inicia o loop.
• const elemento: Declaração da variável elemento que receberá cada elemento do array durante a iteração. A palavra-chave const garante que a variável seja imutável.
• of array: A parte of array especifica o array sobre o qual o loop irá iterar. O array pode ser qualquer tipo de array válido em JavaScript.
• // Código que executará cada elemento: Bloco de código que executará cada elemento do array.Esse bloco pode conter qualquer tipo de instrução JavaScript, como exibir o valor do elemento, aplicar uma função ou modificar o array

let frutas = ["Maçã", "Banana", "Laranja"];
for (let fruta of frutas) {
    console.log(fruta);
}
// Saída:
// Maçã
// Banana
// Laranja

Usando forEach

O método forEach() em JavaScript é uma maneira concisa e eficiente de iterar sobre os elementos de um array e executar uma função callback para cada elemento. Ele oferece uma alternativa mais simples e moderna ao loop for tradicional, sendo ideal para realizar operações simples em cada elemento do array.

Estrutura do método forEach():

array.forEach(callbackFunction);

Explicação:

• array: O array sobre o qual a iteração será realizada.
• forEach(): O método que inicia a iteração.
• callbackFunction: A função callback que será executada para cada elemento do array. Essa função recebe como argumentos:
  • elemento: O valor do elemento atual na iteração.
  • indice: O índice do elemento atual na iteração.
  • array: O array original sobre o qual a iteração está sendo realizada.

let frutas = ["Maçã", "Banana", "Laranja"];
frutas.forEach(function(fruta) {
    console.log(fruta);
});
// Saída:
// Maçã
// Banana
// Laranja

6. Métodos de transformação de Arrays

map()

O método map() é um método de array em JavaScript usado para transformar cada elemento do array em um novo elemento e retornar um novo array contendo esses elementos transformados. Ele é uma ferramenta poderosa para processar e modificar arrays de maneira concisa e eficiente.

Como funciona:

• Função de callback: O map() recebe uma função de callback como argumento. Cada Elemento do array original chama Essa função, na ordem.
• Transformação: A função de callback recebe como argumento o elemento atual do array e deve retornar um novo valor. Esse novo valor pode ser de qualquer tipo, como um número, string, objeto ou até mesmo outro array.
• Novo array: O map() cria um novo array vazio e vai preenchendo-o com os valores retornados pela função de callback para cada elemento do array original.
• Retorno: O map() retorna o novo array contendo os elementos transformados.

const numeros = [1, 2, 3, 4, 5];

const cuadrados = numeros.map(function(numero) {
  return numero * numero;
});

console.log(cuadrados); // [1, 4, 9, 16, 25]

filter()

O método filter() usamos para filtrar elementos de um array em JavaScript. Ele cria um novo array contendo apenas os elementos que atendem a um critério específico, definido por uma função callback.

Como funciona:

1. Função callback: O método filter() recebe uma função callback como argumento. Cada Elemento do array original chama Essa função, na ordem.
2. Retorno da função: A função callback deve retornar um valor booleano (true ou false).
3. Novo array: Se a função callback retornar true para um elemento, ele será incluído no novo array filtrado. Se retornar false, o elemento será ignorado.

let numeros = [1, 2, 3, 4];
let pares = numeros.filter(function(num) {
    return num % 2 === 0;
});
console.log(pares); // Saída: [2, 4]

reduce()

O método reduce() em JavaScript utilizamos para reduzir um array a um único valor, aplicando uma função de callback a cada elemento do array e acumulando o resultado em um valor único. É uma ferramenta poderosa para realizar cálculos agregados, combinar elementos e transformar arrays de maneira concisa e eficiente.

Como funciona:

• Função de callback: O reduce() recebe uma função de callback como argumento. Cada Elemento do array original chama Essa função, na ordem.
• Acumulador: O reduce() também recebe um valor inicial, que pode ser especificado como um argumento ou ser o primeiro elemento do array se nenhum valor inicial for fornecido.
• Aplicação da função: A função de callback recebe como argumentos:
  • Acumulador: O valor acumulado até o momento.
  • Valor atual: O elemento atual do array sendo processado.
  • Índice: O índice do elemento atual no array.
  • Obs.: A função de callback deve retornar um novo valor que usará como o novo valor do acumulador na próxima iteração.
• Retorno: O reduce() retorna o valor final do acumulador após processar todos os elementos do array.

let numeros = [1, 2, 3, 4];
let soma = numeros.reduce(function(total, num) {
    return total + num;
}, 0);
console.log(soma); // Saída: 10

7. Métodos de pesquisa de Arrays

find()

O método find() em JavaScript usamos para encontrar o primeiro elemento de um array que atende a uma condição específica e retornar esse elemento. Ele é uma ferramenta útil para buscar por valores específicos em arrays de maneira concisa e eficiente.

Como funciona:

• Retorno: Se a função de callback retornar true para algum elemento, o find() retorna esse elemento encontrado. Se nenhum elemento atender à condição, o find() retorna undefined.
• Função de callback: O find() recebe uma função de callback como argumento. Cada Elemento do array original chama Essa função, na ordem.
• Condição: A função de callback recebe como argumento o elemento atual do array e deve retornar um valor booleano. Se o valor retornado for true, o elemento atual considerará o elemento de busca e a função find() interrompe a iteração pelo array.

let numeros = [1, 2, 3, 4];
let maiorQueDois = numeros.find(function(num) {
    return num > 2;
});
console.log(maiorQueDois); // Saída: 3

const frutas = ["maçã", "banana", "laranja", "uva"];

const frutaComA = frutas.find(function(fruta) {
  return fruta.startsWith("a");
});

console.log(frutaComA); // "maçã"

findIndex()

O método findIndex() em JavaScript é similar ao find(), mas em vez de retornar o elemento em si, ele retorna o índice do primeiro elemento do array que atende a uma condição específica. É uma ferramenta útil para localizar a posição de um valor específico em um array de maneira concisa e eficiente.

Como funciona:

• Retorno: Se a função de callback retornar true para algum elemento, o findIndex() retorna o índice desse elemento encontrado. Se nenhum elemento atender à condição, o findIndex() retorna -1.
• Função de callback: O findIndex() recebe uma função de callback como argumento. Cada Elemento do array original chama Essa função, na ordem.
• Condição: A função de callback recebe como argumento o elemento atual do array e deve retornar um valor booleano. Se o valor retornado for true, o índice do elemento atual considerará o índice de busca e a função findIndex() interrompe a iteração pelo array.

let numeros = [1, 2, 3, 4];
let indiceMaiorQueDois = numeros.findIndex(function(num) {
    return num > 2;
});
console.log(indiceMaiorQueDois); // Saída: 2

const frutas = ["maçã", "banana", "laranja", "uva"];

const indiceFrutaComA = frutas.findIndex(function(fruta) {
  return fruta.startsWith("a");
});

console.log(indiceFrutaComA); // 0

8. Outros métodos úteis

concat()

O método concat() em JavaScript utilizamos para combinar dois ou mais arrays em um novo array, preservando os arrays originais. É uma ferramenta útil para concatenar, unir ou mesclar arrays de maneira concisa e eficiente.

Como funciona:

• Retorno: O concat() retorna o novo array contendo os elementos concatenados.
• Combinação: O concat() recebe um ou mais arrays como argumentos. O novo array concatena esses arrays, na ordem especificada.
• Elementos individuais: Se um dos argumentos for um elemento simples (string, número, booleano, etc.), conversão dele será em um array de um único elemento e concatenado ao novo array.
• Novo array: O concat() cria um novo array vazio e vai preenchendo-o com os elementos dos arrays originais, na ordem especificada.

let array1 = ["A", "B"];
let array2 = ["C", "D"];
let novoArray = array1.concat(array2);
console.log(novoArray); // Saída: ["A", "B", "C", "D"]

const frutas1 = ["maçã", "banana"];
const frutas2 = ["laranja", "uva"];
const legumes = ["batata", "cenoura"];

const frutasTodas = frutas1.concat(frutas2);
const tudoMisturado = frutasTodas.concat(legumes);

console.log(frutasTodas); // ["maçã", "banana", "laranja", "uva"]
console.log(tudoMisturado); // ["maçã", "banana", "laranja", "uva", "batata", "cenoura"]

slice()

O método slice() em JavaScript utilizamos para extrair uma parte de um array e retornar essa parte como um novo array, sem modificar o array original. É uma ferramenta poderosa para selecionar subconjuntos de um array de maneira concisa e eficiente.

Como funciona:

• Índices: O slice() recebe dois argumentos numéricos: start e end. O índice start indica a posição inicial da parte a ser extraída, e o índice end indica a posição final (não incluída).
• Seleção: Se os valores de start e end forem positivos, a parte do array a ser extraída começa na posição start e vai até a posição end-1.
• Índices negativos: Se os valores de start e end forem negativos, eles indicam posições a partir do final do array. Por exemplo, start: -2 indica o penúltimo elemento e end: -1 indica o último elemento.
• Limites: Se o valor de start for maior que o valor de end, o slice() retorna um array vazio.
• Retorno: O slice() retorna um novo array contendo a parte extraída do array original.

let frutas = ["Maçã", "Banana", "Laranja", "Uva"];
let algumasFrutas = frutas.slice(1, 3);
console.log(algumasFrutas); // Saída: ["Banana", "Laranja"]

const numeros = [1, 2, 3, 4, 5];

const subArray1 = numeros.slice(1, 4); // [2, 3, 4]
const subArray2 = numeros.slice(-3); // [3, 4, 5]
const subArray3 = numeros.slice(2, -1); // [3, 4]

console.log(subArray1);
console.log(subArray2);
console.log(subArray3);

splice()

O método splice() em JavaScript é uma ferramenta poderosa para modificar o conteúdo de um array, permitindo adicionar, remover e substituir elementos de maneira concisa e eficiente. Ele é um dos métodos mais versáteis para manipular arrays, oferecendo diversas funcionalidades em uma única função.

Como funciona:

• Posição inicial: O splice() recebe três argumentos principais: start, deleteCount e item1, item2, … (opcional). O argumento start indica a posição inicial no array onde a modificação deve ocorrer.
• Elementos a serem removidos: O argumento deleteCount indica o número de elementos a serem removidos a partir da posição start. Se deleteCount for zero, nenhum elemento será removido.
• Elementos a serem adicionados: Os argumentos opcionais item1, item2, …, contendo valores de qualquer tipo, indicam os elementos que serão inseridos no array a partir da posição start, substituindo os elementos removidos (se houver) ou adicionando novos elementos no final do array.
• Modificação do array: O splice() modifica o array original no local.
• Retorno: O splice() retorna um novo array contendo os elementos removidos do array original.

let frutas = ["Maçã", "Banana", "Laranja"];
frutas.splice(1, 1, "Uva");
console.log(frutas); // Saída: ["Maçã", "Uva", "Laranja"]

const numeros = [1, 2, 3, 4, 5];

// Removendo elementos
const removidos = numeros.splice(2, 2); // remove os elementos 3 e 4, armazenando-os em "removidos"
console.log(numeros); // [1, 2, 5]
console.log(removidos); // [3, 4]

// Substituindo elementos
numeros.splice(1, 2, 6, 7); // substitui os elementos 2 e 3 por 6 e 7
console.log(numeros); // [1, 6, 7, 5]

// Adicionando elementos
numeros.splice(3, 0, 8, 9); // insere os elementos 8 e 9 após o elemento 2
console.log(numeros); // [1, 6, 7, 8, 9, 5]

sort()

O método sort() em JavaScript utilizamos para ordenar os elementos de um array, de acordo com um critério específico. Ele é uma ferramenta poderosa para organizar e estruturar dados em arrays de maneira concisa e eficiente.

Como funciona:

1. Critério de ordenação: O sort() recebe um argumento opcional, que é uma função de comparação. Essa função é chamada para cada par de elementos consecutivos do array, na ordem. A função de comparação deve retornar um valor numérico:
   • Negativo (a < b): Se o primeiro elemento (a) for menor que o segundo elemento (b), a função deve retornar um valor negativo.
   • Zero (a === b): Se os elementos forem considerados iguais, a função deve retornar zero.
   • Positivo (a > b): Se o primeiro elemento (a) for maior que o segundo elemento (b), a função deve retornar um valor positivo.
2. Ordenação interna: O sort() utiliza um algoritmo de ordenação interna, como o quicksort ou o merge sort, para ordenar os elementos do array de acordo com os valores de retorno da função de comparação.
3. Modificação do array: O sort() modifica o array original no local.
4. Retorno: O sort() não retorna nenhum valor.

const numeros = [5, 2, 4, 1, 3];

numeros.sort(); // Ordena em ordem crescente: [1, 2, 3, 4, 5]

numeros.sort((a, b) => b - a); // Ordena em ordem decrescente: [5, 4, 3, 2, 1]

const frutas = ["banana", "maçã", "laranja", "uva"];

// Ordenação alfabética (crescente)
frutas.sort();
console.log(frutas); // ["banana", "laranja", "maçã", "uva"]

// Ordenação por tamanho (crescente)
function compararTamanho(a, b) {
  return a.length - b.length;
}

frutas.sort(compararTamanho);
console.log(frutas); // ["uva", "maçã", "banana", "laranja"]

9. Array multidimensional (array dentro de array)

Um Array que contém outros Arrays.

let matriz = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];
console.log(matriz[0][0]); // Saída: 1
console.log(matriz[1][1]); // Saída: 5
console.log(matriz[2][2]); // Saída: 9

10. Verificando se é um Array

Array.isArray()

let frutas = ["Maçã", "Banana", "Laranja"];
console.log(Array.isArray(frutas)); // Saída: true

let naoArray = "Hello";
console.log(Array.isArray(naoArray)); // Saída: false

Essa é uma visão geral do JavaScript Array, cobrindo desde a criação e manipulação básica até métodos mais avançados. Arrays são uma parte da programação em JavaScript e entender como trabalhar com eles é crucial para desenvolver aplicações eficazes.