Introdução aos Arrays

O array, também conhecido como vetor, é um objeto de extrema importância em qualquer linguagem de programação, e no JavaScript não é diferente. Podemos pensar em um array como uma lista na qual podemos armazenar diversos itens. Cada item pode ser de qualquer tipo de dado, como uma string, número ou até mesmo um objeto.

O básico sobre arrays consiste em como declará-los, adicionar, acessar e remover itens. Vamos explorar na prática essas funcionalidades, começando pelas formas mais simples e tradicionais de declarar um array vazio: a forma literal e a criação por meio do construtor.

// forma literal 
const dias = [];

// construtor
const meses = new Array();

A forma mais comumente utilizada, tanto por mim quanto pela maioria dos desenvolvedores, é a forma literal, utilizando colchetes. Podemos observar que essa abordagem acaba sendo mais prática.

Adicionando itens

Agora vamos aprender como adicionar novos itens ao nosso array. Inicialmente, podemos fazer isso de forma simples tanto utilizando a forma literal quanto por meio do construtor.

// forma literal 
const dias = ['Segunda', 'Terça'];

// construtor
const meses = new Array('Fevereiro', 'Março');

No código acima, inicializamos o array com alguns valores. Mas e se precisarmos adicionar valores após a declaração, ou seja, de forma dinâmica? Existem dois métodos que nos ajudam nessa tarefa: push e unshift. A diferença entre eles é que o push adiciona um novo item no final do array, enquanto o unshift o adiciona no início. Veja o exemplo abaixo:

dias.push('Quarta');
dias.unshift('Domingo');

console.log(dias);
// ['Domingo', 'Segunda', 'Terça', 'Quarta']

Como mencionado anteriormente, “Domingo” se tornou o primeiro item do array e “Quarta” o último. Ao lidarmos com as posições do array, é importante lembrar que o primeiro item está no índice 0 (zero). Por exemplo, se precisarmos exibir apenas o primeiro e o segundo item do nosso array, podemos fazer da seguinte forma:

console.log(dias[0]); // Domingo

console.log(dias[1]); // Segunda

Como podemos ver, acessamos o item desejado utilizando colchetes e informando o número do índice. No exemplo acima, ao acessar o índice 0, exibimos o valor “Domingo”. Essa parte, por mais simples que possa parecer, é de extrema importância, pois é comum que novos desenvolvedores se confundam e esqueçam que a primeira posição do array está no índice 0, a segunda está no índice 1 e assim por diante.

Caso seja necessário adicionar mais de um item ao array, podemos evitar chamar repetidamente os métodos push ou unshift. Em vez disso, podemos passar vários valores ao mesmo tempo. Por exemplo, para adicionar “Quinta” e “Sexta”, podemos fazer o seguinte:

dias.push('Quinta', 'Sexta'); // Domingo

console.log(dias); 
// ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta']

Lembrando que o mesmo se aplica ao método unshift.

Outro aspecto interessante sobre os métodos push e unshift é que ambos retornam o tamanho atual do array, ou seja, a quantidade de itens que ele contém.

console.log(dias.push('Sábado')); 
// 7

console.log(dias);  
/* 
[
    'Domingo', 
    'Segunda', 
    'Terça', 
    'Quarta', 
    'Quinta', 
    'Sexta', 
    'Sábado'
]
*/

Agora nosso array de dias está completo, contendo todos os sete dias da semana.

Removendo um item

O JavaScript nos oferece os métodos pop e shift. O método pop remove o último item do array, enquanto o método shift remove o primeiro item. Vamos ver como fica o nosso código para remover “Domingo” e “Sábado” do nosso array de dias.

dias.shift();
dias.pop(); 

console.log(dias); 
// ['Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta']

É importante observar que tanto o método pop quanto o método shift retornam o item removido do array. Vamos fazer uma alteração no código anterior para remover e exibir os itens removidos no console.

console.log(dias.shift());
// Domingo

console.log(dias.pop()); 
// Sábado

Você pode estar se perguntando como remover um item específico do meio do array ou pesquisar por um item em particular. Nesses casos, precisamos primeiro identificar a posição do item no array, o que pode ser feito utilizando a função indexOf. Em seguida, podemos utilizar a função splice para remover o item.

const dias = [
    'Domingo', 
    'Segunda', 
    'Terça', 
    'Quarta', 
    'Quinta', 
    'Sexta', 
    'Sábado'
];

const indice = dias.indexOf('Quarta');
if (indice > -1) {
    dias.splice(indice, 1);
}

console.log(dias); 
// ['Domingo', 'Segunda', 'Terça', 'Quinta', 'Sexta', 'Sábado']

No exemplo acima, utilizamos a função indexOf para encontrar o índice do item no array. Caso a função não encontre o item, seu retorno será -1 e nenhuma alteração será feita no array.

Por sua vez, a função splice recebe dois parâmetros: o primeiro indica a partir de qual índice ocorrerá a exclusão, e o segundo indica a quantidade de itens a serem removidos a partir desse índice. No exemplo, informamos 1 como segundo parâmetro, o que significa que será excluído apenas o item na posição encontrada pelo indexOf. Além disso, a função splice retorna o item que foi excluído do array.

console.log(dias.splice(indice, 1));
// Quarta

Percorrendo o array

Para percorrer cada item do array, podemos utilizar laços de repetição. Caso você não esteja familiarizado com laços de repetição, recomendo que leia o arquivo correspondente em meu blog. Basta clicar aqui para acessá-lo.

Normalmente, a escolha recai sobre o uso do for ou do forEach. Ambos produzem o mesmo resultado, mas suas estruturas diferem.

No exemplo abaixo, utilizaremos a propriedade length para obter a quantidade total de itens no array. Em seguida, percorreremos todos os itens do início ao fim.

const dias = [
    'Domingo', 
    'Segunda', 
    'Terça', 
    'Quarta', 
    'Quinta', 
    'Sexta', 
    'Sábado'
];

for(let i=0; i<dias.length;i++) {
    console.log(dias[i]); 
}

Fazendo uso do forEach o código fica o seguinte:

const dias = [
    'Domingo', 
    'Segunda', 
    'Terça', 
    'Quarta', 
    'Quinta', 
    'Sexta', 
    'Sábado'
];

dias.forEach(function(dia){
    console.log(dia);
})

E como podemos observar, ambos os códigos produzem a mesma saída.

// Domingo, 
// Segunda
// Terça
// Quinta
// Sexta
// Sábado

Lidando com objetos

Como mencionado anteriormente, podemos armazenar qualquer tipo de dado em um array, e é bastante comum trabalharmos com arrays de objetos. Para adicionar um objeto ao array, podemos utilizar o método push, como já vimos.

const alunos = [
    { nome: 'João', idade: 20 },
    { nome: 'Maria', idade: 22 },
];

alunos.push({ nome: 'Pedro', idade: 23 });

Note que, quando se trata de remover itens de um array de objetos, as funções unshift, pop e splice funcionam normalmente. No entanto, a abordagem para descobrir o índice do objeto no array muda um pouco.

O método indexOf não é útil nesse caso, pois ele não compara o conteúdo dos objetos. Em vez disso, o método findIndex se encaixa muito bem, pois possui o mesmo comportamento funcional do indexOf. Se o item não for encontrado, seu retorno será -1. Observe como fica o código:

const indice = alunos.findIndex(aluno => aluno.nome === 'Maria');
if (indice > -1) {
    alunos.splice(indice, 1);
}

Conclusão

Neste artigo vimos como:

Declarar arrays
Adicionar itens no inicio e fim do array
Remover um item do array
Percorrer o array com laços de repetição
Trabalhar com array de objetos

E para você continuar avançando em seus estudos, não deixe de ler o artigo Avançando com arrays.