Arrays

Continuando com objetos, Javascript tem um tipo de objeto muito comum em outras linguagens: o Array.

Em Javascript, a gente pode criar um array vazio usando let array = [];

Perceba que não precisamos declarar o tamanho nem o tipo de valor que vai no array, pois em Javascript, arrays são dinâmicos.

Para adicionar elementos em um array, podemos por um elemento diretamente no indice desejado, fazendo array[indice] = valor.

Exemplo:

array[0] = 1;
array[1] = 2;
array[2] = 3;
array[10] = "string aleatoria";
array[20] = true;

Perceba que não precisamos fazer isso sequencialmente, podemos tranquilamente saltar do indice 2 pro indice 10 sem problemas, embora não seja muito interessante, pois teremos diversas posições vazias.

Para acessar o valor armazenado em um determinado índice, basta fazer array[indice]

Por exemplo:

console.log(array[0]);
console.log(array[10]);

Posições vazias (isto é, que ainda não foram preenchidas) tem o valor undefined.

Diferentemente de um objeto comum, acessamos arrays por um índice numérico,então nós temos um mapeamento índice-valor, enquanto objetos comum em Javascript temos um mapeamento chave-valor.

Também podemos criar um array que já possui alguns valores:

let array = [1, 2, 3, 4, 5, 6, 7, "Azul"];

Basta separar cada valor por uma virgula valor1, valor2, valor3, ....

Se quisermos adicionar mais valores posteriormente, podemos adicionar sem problemas.

O objeto Array tem uma propriedade muito útil para sabermos o tamanho do array: array.length. Essa propriedade contem a quantidade de elementos presentes no Array.

Embora seja possivel adicionar valores pelo índice, em Javascript é mais comum utilizar alguns métodos de Arrays.

Array.push permite adicionar um novo elemento no fim do Array.

Exemplo:

let a = [];
a.push(1);
a.push(3);
a.push("10");
console.log(a.length); // 3

Temos o Array [1, 3, "10"], com 3 elementos.

Array.unshift permite adicionar um novo elemento no começo do Array

Exemplo:

let a = [];
a.unshift(1);
a.unshift(3);
a.unshift("10");
console.log(a.length); // 3

Temos o Array ["10", 3, 1], com 3 elementos.

Também existem métodos para remover elementos do final e do começo do Array:

Array.pop remove e retorna o último elemento do Array

let array = [1, 2, 3, "5"];
let ultimo =  array.pop();

console.log(ultimo); // "5"
console.log(array.length); // 3

Array agora só tem [1, 2, 3].

Array.shift remove e retorna o primeiro elemento do Array

let array = [1, 2, 3, "5"];
let primeiro =  array.shift();

console.log(primeiro); // 1
console.log(array.length); // 3

Existem também alguns métodos que podem ser úteis em algumas situações:

Array.sort serve pra ordenar o Array de acordo com alguma função de comparação:

let arr = [3, 1, 0, 15, 13, 7];

arr.sort(function compara(a, b) {
    if (a < b) {
        return -1;
    } 

    if (a > b) {
        return 1;
    }

    return 0;
});

console.log(arr); //  [0, 1, 3, 7, 13, 15 ]

Normalmente, Array.sort recebe uma função com dois parâmetros como argumento. Essa função serve pra comparar os dois valores de alguma forma.

Se o retorno da função de comparação for menor que 0, a virá antes de b no vetor ordenado
Se o retorno da função de comparação for maior que 0, b virá antes de a no vetor ordenado
Se o retorno da função de comparação for 0, significa que os valores são iguais.

Essa função de comparaçao será aplicada em cada elemento do Array, visando ordenar todo o Array.

Essa função modifica o array original, tornando-o ordenado.

Para mais informações sobre esse método ou em caso de dúvida, é sempre interessante consultar a documentação da MDN.

Array.splice é um método que pode ser utilizado para remover um ou mais itens do Array, e esse método também pode adicionar elementos no Array. É quase um canivete suíço.

Irei apresentar como remover elementos a partir de um índice, e como inserir elementos em determinado índice.

Para você remover vários elementos a partir de um índice, basta chamar Array.splice com dois parâmetros: o indice inicial para começar a deletar elementos, e a quantidade de elementos a serem deletados.

Por exemplo, deletando o elemento do indice 0 e 1:

let arr = [1, 2, 3, 4, 5];
arr.splice(0, 2);

console.log(arr); // [3, 4, 5]
console.log(arr.length); // 3

Para adicionar elementos em determinado indice, devemos chamar Array.splice com 3 parâmetros: indice inicial, elementos a serem removidos, e os elementos a serem adicionados (podendo ser um ou vários elementos)

Por exemplo, adicionando os numeros 1, 3 e a string "opa" a partir do indice 2 do Array [1, 2, 3, 4, 5, 6, 7]. Perceba que passamos 0 pro segundo parâmetro porque desejamos remover zero elementos (nenhum).

let arr = [1, 2, 3, 4, 5, 6, 7];
arr.splice(2, 0, 1, 3, "opa");

console.log(arr); // [ 1, 2, 1, 3, "opa", 3, 4, 5, 6, 7 ]
console.log(arr.length); // 10

E é assim que podemos usar o método { Array.splice! Faça alguns testes no seu console, veja as possibilidades que esse método traz, recomendo a leitura da documentação da MDN para esse método, pois ele pode ser bem confuso.

Existe um outro método que pode ser útil também: Array.reverse. O nome diz tudo: esse método serve pra inverter a ordem dos elementos do Array, ou seja, o úlimo elemento passa a ser o primeiro, o penultimo a ser o segundo, e assim sucessivamente. Esse método modifica o Array original, então, é importante usar com cuidado.

Exemplo:

let arr = [1, 2, 3];
arr.reverse();

console.log(arr); // [3, 2, 1]
console.log(arr.length); // 3

Existe um método que permite executar uma função com cada valor do Array.

Esse método se chama Array.forEach, e recebe como parâmetro uma função que vai ser aplicada em cada elemento do Array.

Essa função que vai ser aplicada em cada elemento é chamada pelo Javascript com 3 parâmetros: o valor do elemento atual que está sendo lido, o indice desse elemento, e o array que está sendo percorrido. Esse método é muito útil pra percorrer um array e fazer algo com os valores.

Por exemplo, imprimir cada elemento do Array no console:

let arr = [1, 2, 3, 4, 5];

arr.forEach(function imprime(valor, indice, array) {
    console.log('No indice: ' + indice + ' temos o elemento: ' + valor);
});

Esse método é equivalente ao seguinte loop for:

for (let i = 0; i < arr.length; i++) {
    console.log('No indice: ' + i + ' temos o elemento: ' + arr[i]);
}

Existem alguns métodos que são muito utilizados para programação funcional: Array.map, Array.filter e Array.reduce. Esses métodos são chamados “funcionais” porque eles seguem o principio da imutabilidade, portanto, não modificam o array original, e sim criam um novo caso necessário.

Array.map serve pra modificar os valores existentes em um Array, sem alterar o array original, criando assim, um Array novo contendo as modificações desejadas.

Array.map é um método que recebe uma função map (pode ter outro nome), essa função map é chamada com 3 parâmetros: o valor do elemento atual que está sendo lido, o indice desse elemento, e o array que está sendo percorrido.

Essa função map deve retornar o elemento com as modificações desejadas (o valor processado).

Exemplo: elevando ao quadrado os elementos de um Array. Observe que a função que estamos usando para alterar os elementos se chama elevaAoQuadrado.

let arr = [1, 2, 3, 4, 5];

let novoArray = arr.map(function elevaAoQuadrado(atual, indice, array) {
    return atual * atual;
});

console.log(arr); // [1, 2, 3, 4, 5]
console.log(novoArray); // [1, 4, 9, 16, 25]

Perceba que nesse caso, recebemos um novo Array, e o Array original permanece inalterado.

Array.filter é um método que testa cada elemento do Array com uma função, e retorna um Array novo apenas com os valores que passaram no teste.

A função que é passada como parâmetro pra esse método recebe os mesmos argumentos da função map (do método Array.map).

Exemplo de uso:

let arr = [1, 2, 3, 4, 5, 6];

function filtraPares(atual, indice, array) {
    return atual % 2 == 0;
}

let pares = arr.filter(filtraPares);

console.log(pares); // [2, 4, 6]
console.log(arr); // [1, 2, 3, 4, 5, 6]

Por último, temos o método Array.reduce. Array.reduce atua como um acumulador, que vai “processando” todos os valores da função e retorna um único resultado final.

Um exemplo de uso para o Array.reduce é somar todos os elementos de um Array, por exemplo.

Array.reduce é um método que é chamado com uma função reducer. Essa função reducer é chamada com 4 argumentos:

Um acumulador, que é usado para retornar um valor final do método Array.reduce.
O valor atual do elemento que está sendo processado no array
O indice do elemento atual que está sendo processado
O array que estamos chamando a função Array.reduce.

Um exemplo: usando Array.reduce para somar todos os elementos de um Array

let arr = [1, 2, 3, 4, 5];

let soma = arr.reduce(function reducer(acumulador, atual, indice, array) {
    return acumulador + atual;
});

console.log(soma); // 15
console.log(arr); // [1, 2, 3, 4, 5]

Perceba que somamos todos os elementos de arr, você pode enxergar esse método reduce da seguinte forma:

let acumulador = 0;

for (let i = 0; i < arr.length; i++) {
    acumulador += arr[i];
}

É isso que o método Array.reduce faz pra nós, para ver outros exemplos e mais detalhes, recomendo sempre a documentação da MDN.