O que são matrizes?

Arrays são uma estrutura de dados que armazena uma coleção ordenada de elementos. Em JavaScript, os arrays são classificados como um tipo especial de objeto e podem armazenar números, strings, objetos ou outros arrays. Os elementos de uma matriz são colocados entre colchetes [] e usam um índice baseado em zero. Um índice baseado em zero significa que o primeiro elemento de uma matriz terá um índice de 0, o segundo elemento terá um índice de 1 e assim por diante.

const names = ["David", "Hannah", "William"];
console.log(names[0]); // returns the first element
// returns "David"
console.log(names[1]); // returns the second element
// returns "Hannah"
console.log(names[2]); // returns the third element
// returns "William"

Como os arrays podem ser modificados ou manipulados?

Índice do elemento em uma matriz

Um novo elemento pode ser adicionado a um array atribuindo um valor a um índice vazio.

names[3] = "Eric";
console.log(names);
// returns ["David", "Hannah", "William", "Eric"]

Elementos em uma matriz podem ser modificados reatribuindo um novo valor a um índice existente.

names[1] = "Juniper";
console.log(names);
// returns ["David", "Juniper", "William", "Eric"]

Métodos de matriz

Arrays também podem ser modificados ou manipulados com métodos de array como 'push', 'pop', 'unshift', 'shift', 'slice' e 'splice'.

'empurrar()'

O método 'push' pega um ou mais elementos como argumentos, adiciona os elementos ao final do array e retorna o comprimento do array modificado.

names.push("Bob");
// returns 5 
console.log(names);
// returns ["David", "Juniper", "William", "Eric", "Bob"]

'pop()'

O método 'pop' não aceita argumentos, remove o último elemento do array e retorna o elemento removido.

names.pop();
// returns "Bob"
console.log(names);
// returns ["David", "Juniper", "William", "Eric"]

'unshift()'

O método 'unshift' pega um ou mais elementos como argumentos, adiciona os elementos ao início do array e retorna o comprimento do array modificado.

names.unshift("Jack", "Jane");
// returns 6
console.log(names);
// returns ["Jack", "Jane", "David", "Juniper", "William", "Eric"]

'mudança()'

O método 'shift' não aceita argumentos, remove o primeiro elemento de um array e retorna o elemento removido.

names.shift();
// returns "Jack"
console.log(names);
// returns ["Jane", "David", "Juniper", "William", "Eric"]

'fatiar()'

O método 'slice' recebe dois argumentos opcionais (startIndex, endIndex) e retorna um novo array com os elementos do startIndex para, mas não incluindo, o endIndex do array original.
Se startIndex for omitido, 0 será usado.
Se endIndex for omitido, o comprimento da matriz será usado. Números de índice negativos podem ser usados ​​para fazer a contagem regressiva a partir do final da matriz.

names.slice(1, 3);
// returns ["David", "Juniper"]
names.slice(3);
// returns ["Juniper", "William", "Eric"]
names.slice(-2, 1);
// returns ["William", "Eric", "Jane"]
names.slice();
// returns ["Jane", "David", "Juniper", "William", "Eric"]

'emenda ()'

O método 'splice' recebe um ou mais argumentos (startIndex, deleteCount, element1, element2, ...) e retorna um novo array contendo todos os elementos removidos. Do startIndex, o número de elementos deleteCount é excluído e os seguintes argumentos do elemento serão adicionados à matriz começando no startIndex. Se deleteCount for omitido, todos os elementos de startIndex até o final da matriz serão excluídos. Se os argumentos dos elementos forem omitidos, nenhum elemento será adicionado.

names.splice(0, 1, "Joe", "Alex"); 
// returns ["Jane"]
console.log(names);
// returns ["Joe", "Alex", "David", "Juniper", "William", "Eric"]
names.splice(1, 4);
// returns ["Alex", "David", "Juniper", "William"]
console.log(names);
// returns ["Joe", "Eric"]
names.splice(0, 0, "Bob", "Frank", "Maria")
// returns []
console.log(names);
// returns ["Joe", "Bob", "Frank", "Maria", "Eric"]

Como 'push', 'pop', 'unshift', 'shift e 'splice' modificam o array original, eles são classificados como métodos destrutivos. O método 'slice' deixa o array original intacto, por isso é classificado como não destrutivo.

Operador de propagação '...'

Para adicionar elementos ou copiar um array de forma não destrutiva, o operador spread pode ser usado. O operador spread espalha um array em seus elementos.

const array = [1, 2, 3];
const newArray = [0, ...array, 4, 5];
// ...array spreads [1, 2, 3] into 1, 2, 3
console.log(newArray);
// returns [1, 2, 3, 4, 5]

Sem o operador spread, o array original seria aninhado no novo array.

const array = [1, 2, 3];
const newArray = [0, array, 4, 5];
console.log(newArray);
// returns [0, [1, 2, 3], 4, 5];

Métodos de matriz iterativa

Métodos de array iterativos chamam uma função fornecida em cada elemento de um array e retornam um valor ou um novo array. A função fornecida é chamada com três argumentos: o elemento atual, o índice do elemento atual e o array original em que o método foi chamado.

function callbackFunction (currentElement, currentIndex, originalArray) {
// function body
}

Alguns exemplos de métodos de array iterativos são: 'find', 'filter', 'map' e 'reduce'.

'encontrar()'

O método 'find' pega uma função como argumento e retorna o primeiro elemento do array que satisfaça as condições da função.

const numbers = [5, 10, 15, 20, 25];
numbers.find(number => number > 15);
// returns 20;

'filtro()'

O método 'filter' é semelhante ao método 'find', mas em vez disso retorna uma matriz de todos os elementos que satisfazem as condições da função fornecida.

const numbers = [5, 10, 15, 20, 25];
numbers.filter(number => number > 15);
// returns [20, 25];

'mapa()'

O método 'map' retorna um novo array com os resultados da chamada da função em cada elemento do array original.

const numbers = [1, 2, 3, 4, 5];
numbers.map(number => number * number);
// returns [1, 4, 9, 16, 25]

'reduzir()'

O método 'reduce' usa uma função e um valor inicial como argumento. A função fornecida recebe quatro argumentos: o acumulador, o valor atual, o índice atual e o array original. O valor inicial fornecido é o valor do acumulador para o primeiro elemento da matriz. O resultado da função para cada elemento é usado como o valor do acumulador para o próximo elemento da matriz. Se um valor inicial não for fornecido, o acumulador é definido como o primeiro elemento da matriz e a função de retorno de chamada é chamada a partir do segundo elemento.

const numbers = [1, 2, 3, 4, 5]
numbers.reduce(((acc, number) => acc   number), 0);
// returns 15