Arrays

Os arrays permitem-nos armazenar múltiplos dados, do mesmo tipo, numa só variável.

Cada dado armazenado num array é um elemento do array e cada elemento é numerado com um índice que começa no zero.

Acedemos a cada elemento do array através do seu índice.

Os arrays em Javascript são estruturas dinâmicas cujo numero de elementos pode aumentar ou diminuir em tempo de execução.

Declaração de um array

Um array é declarado e criado usando parentes rectos:

let nomes = [];

No exemplo acima foi criado o array vazio nomes.

Podemos declarar um array já com elementos:

let cores = ['vermelho', 'verde', 'amarelo'];

Acesso aos membros de um array

Acedemos a um membro de um array através do seu índice:

cores[2] = 'laranja';   //modifica o v=alor do 3º elemento do array

console.log( cores[1] );  //mostra o 2º elemento do array

Os arrays são objetos

Os arrays são um tipo especial de objectos.

Se fizermos console.log( typeof nomes );

o output será ‘object’.

Enquanto objetos os arrays possuem uma variedade de métodos e propriedades que nos permitem manipular o array.

Tamanho de um array

O tamanho de um array é dado pela propriedade length:

let cores = ['vermelho', 'verde', 'amarelo']; 

console.log( cores.length ); //mostra 3

Adicionar elementos a um array

Podemos adicionar um elemento no fim do array de duas maneiras:

Usando a propriedade length:

let cores = ['vermelho', 'verde', 'amarelo']; 

cores[cores.length] = 'castanho'; //adiciona no fim do array 

console.log( cores );

O output será:

(4) [“vermelho”, “verde”, “amarelo”, “castanho”]

Usando o método push():

let cores = ['vermelho', 'verde', 'amarelo'];

cores.push('castanho'); //adiciona no fim do array 

console.log( cores );

O output será:

(4) [“vermelho”, “verde”, “amarelo”, “castanho”]

Percorrer um array

Existem várias maneiras de percorrer um array em JavaScript.

Loop for

A maneira mais comum é usar um loop for. Por exemplo, o seguinte código percorre o array numeros e imprime cada elemento:

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

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

Loop for … of

O loop for … of é um tipo de loop criado especificamente para percorrer arrays:

      const nrs = [3, 5, 7, 9];

      for (nr of nrs) {
        console.log(nr);
      }

Método forEach

O método forEach recebe como parâmetro uma função de calllback. O método percorre todo o array e, para cada elemento, chama a função de callback que tem como argumento o elemento do array. O método forEach não exige um índice, então não é necessário manter o controle do índice do elemento atual. Por exemplo, o seguinte código usa o loop forEach para imprimir cada elemento do array numeros:

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

numeros.forEach(function(elemento) {
   console.log(elemento);
});

Ordenar um array

O método sort() ordena o array:

let cores = ['vermelho', 'verde', 'amarelo']; 

console.log( cores.sort() );

O output deste código será:

(3) [“amarelo”, “verde”, “vermelho”]

Métodos de um array

Os arrays têm vários métodos que podem ser usados para manipular os seus elementos. Alguns dos métodos mais comuns incluem:

push()

O método push() adiciona um elemento no final do array:

let numeros = [1, 2, 3]; 
numeros.push(4); 
console.log(numeros); // [1, 2, 3, 4]

unshift()

O método unshift() adiciona um elemento no inicio do array:

let numeros = [1, 2, 3]; 
numeros.unshift(0); 
console.log(numeros); // [0, 1, 2, 3]

pop()

O método pop() elimina e devolve o último elemento de um array:

let numeros = [1, 2, 3, 4]; 
let lastElement = numeros.pop(); 
console.log(numeros); // [1, 2, 3] 
console.log(lastElement); // 4

shift()

O método shift() elimina e devolve o primeiro elemento de um array:

let numeros = [1, 2, 3]; 
let firstElement = numeros.shift(); 
console.log(numeros); // [2, 3] 
console.log(firstElement); // 1

splice()

O método splice() permite adicionar e/ou remover elementos de um array.

A sintaxe é a seguinte:

array.splice(start[, deleteCount[, item1[, item2[, …]]]])

O parâmetro start é o índice do array onde os elementos serão inseridos ou removidos.

O parâmetro deleteCount indica o numero de elementos que serão removidos a partir de start. Se deleteCount fôr omitido, todos os elementos, a partir de start serão removidos.

Os parâmetros item1, item2, etc. são os novos elementos que serão inseridos no array. Se o parâmetro item1, item2, etc. forem omitidos, os elementos do array a partir do índice start serão removidos e o tamanho do array será reduzido em deleteCount.

Exemplo 1:

const numeros = [1, 2, 3, 4, 5]; 
numeros.splice(0, 2); 
console.log(numeros); // [3, 4, 5]

Exemplo 2:

const numeros = [1, 2, 3, 4, 5];
numeros.splice(2, 0, 6, 7); 
console.log(numeros); // [1, 2, 3, 6, 7, 4, 5]

slice()

O método slice() cria um novo array com uma parte dos elementos do array original.

Tem como parâmetros os índices de início e fim dos elementos do array original que irão fazer parte do novo array:

let newArray = numeros.slice(2, 4); 
console.log(newArray); // [3, 4] 

indexOf()

O método indexOf() retorna o índice da primeira ocorrência de um elemento de um array.

Se o elemento não existir no array, retorna -1.

Exemplo 1:

let numeros = [1, 2, 3, 4, 5]; 
let index = numeros.indexOf(3); 
console.log(index); // 2

Exemplo 2:

let numeros = [1, 2, 3, 4, 5]; 
let index = numeros.indexOf(7); 
console.log(index); // -1

lastIndexOf

O método lastIndexOf() retorna o índice da última ocorrência de um elemento de um array.

Se o elemento não existir no array, retorna -1.

Exempo 1:

let numeros = [1, 2, 3, 3, 4, 5]; 
let index = numeros.lastIndexOf(3); 
console.log(index); // 3

Exemplo 2:

let numeros = [1, 2, 3, 3, 4, 5]; 
let index = numeros.lastIndexOf(7); 
console.log(index); // -1

find()

O método find() em JavaScript é usado para encontrar o primeiro elemento de um array que satisfaça uma determinada condição. O método retorna o primeiro elemento que satisfaça a condição, ou undefined se não houver nenhum elemento que satisfaça a condição.

Sintaxe:

array.map(function(currentValue, index, arr), thisValue)

thisValue           Opcional. Valor de defeito: undefined. Valor passado à função para ser usada como o valor this.

function()           Obrigatório. Função que é chamada para cada elemento do array

currentValue    Obrigatório. O valor do elemento corrente.

index    Opcional. O indice do elemento corrente.

arr         Opcional. O array do elemento corrente.

Retorno: retorna o 1º elemento que satisfaça a condição. Se nenhum elemento que satisfaça essa condição, retorna undefined.

O método find() tem como argumento uma função de callback. Essa função é chamada uma vez para cada elemento do array, sendo esse elemento passado à função. Nessa função, normalmente, existe uma condição que testa esse elemento. Se o resultado da condição for true, a função retorna o elemento e já não verifica mais nenhum elemento. Senão, retorna undefined.

Exemplo:

const cores = ["vermelho", "amarelo", "laranja"]; 
cor = cores.find((c) => c.length === 7); 
console.log(cor); //amarelo

Neste exemplo, a função de callback é chamada duas vezes porque na segunda vez, o tamanho do elemento é 7 e a função find() retorna esse elemento e para.

map()

O método map() aplica uma função de callback que executa uma operação em cada um dos elementos do array e retorna um novo array com os novos elementos alterados por essa operação.

Sintaxe:

array.map(function(currentValue, index, arr), thisValue)

• function()           Obrigatório. Função que é chamada para cada elemento do array
• currentValue    Obrigatório. O valor do elemento corrente.
• index    Opcional. O indice do elemento corrente.
• arr         Opcional. O array do elemento corrente.
• thisValue           Opcional. Valor de defeito: undefined. Valor passado à função para ser usada como o valor this.

Retorno: retorna um novo array.

const numeros = [2, 4, 6, 8]; 
nrs2 = numeros.map((n) => n * 2); 
console.log(nrs2); // [4, 8, 12, 16] 

No exemplo acima, o método map() percorre cada elemento do array, passando esse elemento para a função de callback que multiplica esse elemento por dois. O método map() retorna um novo array com todos os elementos do original multiplicados por 2.

filter()

O método filter() retorna um array preenchido com todos os elementos do array que satisfazem uma condição que está definida na função de callback. Essa função de callback é passada para o método find() e é chamada uma vez para cada elemento do array.

Sintaxe:

array.filter(function(currentValue, index, arr), thisValue)

• function()           Obrigatório. Função que é chamada para cada elemento do array
• currentValue    Obrigatório. O valor do elemento corrente.
• index    Opcional. O indice do elemento corrente.
• arr         Opcional. O array do elemento corrente.
• thisValue           Opcional. Valor de defeito: undefined. Valor passado à função para ser usada como o valor this.

Retorno: retorna um array com os elementos que satisfaçam a condição ou um array vazio se nenhum elemento satisfazer essa condição.

const cores = ["vermelho", "amarelo", "laranja", "azul", "verde"]; 
cores2 = cores.filter((c) => c.length > 5); 
console.log(cores2); // ['vermelho', 'amarelo', 'laranja'] 

Neste exemplo, o método filter() chama a função de callback 5 vezes (o nr de elementos do array), e seleciona as cores cujo nome tenha um tamanho superior a 5.

No final retorna um array com essas cores ( [“vermelho”, “amarelo”, “laranja”].