Se você ja programou, programa ou pretende programar, você precisa conhecer esses métodos para Javascript Arrays.
É bem provável que todos lendo esse artigo já tenham utilizado pelo menos um dos métodos, se não usou, você vai usar, não tenha dúvidas. Cada método é bastante relevante dentro da sua categoria, então confira a lista com calma, você pode até usar esse artigo como uma documentação básica e voltar quantas vezes quiser se caso precisar. Temos um outro artigo também sobre os métodos para Strings se você tiver interesse.
Acho que nada mais justo que iniciar a nossa lista com ele.
De todos os métodos javascript o método for talvez seja aquele que todos os programadores aprendam no inicio da jornada. Me diga se essa sintaxe não é similar para você.
for (inicialização; condição; finalização) {...}
ou talvez seja mais fácil de lembrar com esse exemplo:
for(i = 0 ; i < 10 ; i++){
console.log(i);
}
// 0 1 2 3 4 5 6 7 8 9
Pela sintaxe também já podemos ver que o método for() não recebe uma função como parâmetro, e sim um conjunto de expressões (como vamos chamar).
| Argumento | Descrição |
|---|---|
| inicialização | Uma expressão ou declaração de variável avaliada uma vez antes do início do loop. |
| condição | Uma expressão a ser avaliada antes de cada iteração do loop. Se esta expressão for avaliada como verdadeira, a declaração é executada. |
| finalização | Uma expressão a ser avaliada no final de cada iteração de loop. Isto ocorre antes da próxima avaliação da condição. Geralmente usado para atualizar ou incrementar o valor inicial. |
O método for() é um loop “universal” ou seja ele não depende de um array ou objeto para rodar o loop, apenas de um simples contador. (as vezes nem disso)
Traduzindo, o método for() pode funcionar com qualquer dado e não está restrito apenas a coleções de dados como arrays.
const aux = [1,2,3,4,5];
//pode iterar sobre todos os elementos de um array
for (let i = 1; i < aux.length; i++) {
console.log("Completo: "+i);
}
// "Completo: 1"
// "Completo: 2"
// "Completo: 3"
// "Completo: 4"
No entanto esse é um dos métodos javascript no qual você precisa tomar alguns cuidados, por exemplo, tentar acessar um valor fora do array, isso vai gerar um valor undefined.
const aux = [1,2,3,4,5];
for (let i = 0; i < aux.length; i++) {
console.log(`aux[${i+1}]=${aux[i+1]}`);
}
// > aux[1]=2
// > aux[2]=3
// > aux[3]=4
// > aux[4]=5
// > aux[5]=undefined
Utilizando esse método você pode iterar o array por completo ou apenas parcialmente. Daí uma outra vantagem sobre alguns dos outros métodos javascript que veremos. Por exemplo:
const aux = [1,2,3,4,5];
//pode iterar sobre todos os elementos de um array
for (let i = 1; i < aux.length; i++) {
console.log("Completo: "+i);
}
// "Completo: 1"
// "Completo: 2"
// "Completo: 3"
// "Completo: 4"
//pode iterar sobre apenas alguns dos elementos de um array
for (let i = 1; i < (aux.length - 2); i++) {
console.log("Parcial: "+i);
}
// "Parcial: 1"
// "Parcial: 2"
Ok, próximo na nossa lista de métodos javascript, vamos passar para mais um loop, uma coisa que precisa ser falada antes, porque existe um pouco de confusão nisso.
array.forEach()itera sobre os itens de um array, em ordem ascendente, sem alterar o array.
Segundo, de uma olhada na sintaxe do forEach().
Primeiro parâmetro Segundo Parâmetro
_________________________________ _________
| | | |
array.forEach(function(currentValue, index, arr), thisValue)
Pela sintaxe podemos ver que o método forEach() recebe uma função como primeiro parâmetro e o this como segundo parâmetro.
Você vai perceber que esse é um padrão bem comum entre os métodos javascript para arrays.
| Argumento | Descrição |
|---|---|
| function() | Obrigatório. Função callback que será executada em cada elemento. |
| thisValue | Opcional. Valor à ser usado como this enquanto se executa a função callback. |
E essa função que é passada como parâmetro para o forEach() por sua vez pode receber outros três parâmetros.
| Argumento | Descrição |
|---|---|
| currentValue | Obrigatório. O valor do elemento atual. |
| index | Opcional. O índice do array do elemento atual. |
| arr | Opcional. O objeto do array ao qual o elemento pertence |
O trabalho do forEach() então é passar para essa função um elemento do array por vez.
Usando Arrow function, podemos reescrever a sintaxe: (eu prefiro essa sintaxe)
array.forEach((element, index, array) => { ... })
Vamos ver como fica um exemplo com as duas opções:
//Sem Arrow Function
let soma = 0;
const numbers = [65, 44, 12, 4];
function myFunction(item) {
soma += item;
}
numbers.forEach(myFunction);
console.log(soma); //125
//Com arrow function
let soma = 0;
const numbers = [65, 44, 12, 4];
numbers.forEach((item) => soma += item);
console.log(soma); //125
O foreach() é um loop simples, e ao contrário do seu irmão for() ele necessita de outras variáveis para executar o método, nesse caso um array.
A primeira coisa que eu preciso chamar atenção sobre o método map() é que ele cria uma novo array preenchido com os resultados da chamada de uma função fornecida em cada elemento do array no qual ele foi chamado. Ok, tendi nada, vamos dar uma olhada na sintaxe pra tentar deixar isso mais claro.
// Sem arrow function
array.map(currentValue, index, arr) { ... }, thisValue)
// Com arrow function
array.map((currentValue, index, arr) => { ... } )
A sintaxe, como ja tinha te falado, é muito parecida com a que vimos no método forEach(), esse método também recebe uma função como parâmetro. Então você já consegue entender que o trabalho do método map() é passar para essa função cada item do array que você está iterando retornando ao final, um novo array.
Mas a diferença entre foreach() e map(), não fica por aí, temos esse artigo se quiser saber mais. Saber a diferença entre os métodos javascript, vai te ajudar a fazer a melhor escolha.
Essa função então executa o que você quiser lá dentro, e retorna um novo array. Deixa eu dar um exemplo.
const array1 = [4, 2, 9, 16];
// passando uma função para o método map
const map1 = array1.map(x => x * 2);
// map1 é o novo array gerado pelo método map()
console.log(map1); // Array [2, 8, 18, 32]
console.log(array1); // Array [4, 2, 9, 16]
O método map() é bem útil quando você precisa manipular um array, sem alterar o valor do array original e ainda sem precisar criar variáveis externas.
Agora o primeiro dos métodos javascript que não é um loop. slice(), esse método retorna uma cópia parcial (ou completa) de um array. Bem simples a principio né? Vamos ver a sua sintaxe primeiro.
array.slice(start, end)
Você pode traduzir essa sintaxe como:
remova todo mundo partindo do start até end, porém o start fica e o end vai.
0 1 2 3 4
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(0,1)); //Array ["ant"]
console.log(animals.slice(0,2)); //Array ["ant", "bison"]
console.log(animals.slice(0,3)); //Array ["ant", "bison", "camel"]
console.log(animals.slice(1,1)); //Array []
console.log(animals.slice(1,2)); //Array ["bison"]
console.log(animals.slice(1,3)); //Array ["bison", "camel"]
Lembrando que se o start não for definido, ele é inicializado com 0 de qualquer maneira, e o end, é inicializado com o valor final do array. E se o início for maior que o intervalo do array, um array vazio é retornado.
O método slice() é muito útil, mas você tem que ficar espero com algumas coisas. Vou dar um exemplo pra mostrar do que eu to falando, imagine duas famílias, a primeira com dois membros, Pai e Filho, a segunda apenas Filho.
Sem repetir a declaração do array eu posso simplesmente remover o valor do pai do primeiro array usando o método slice(), mantendo o filho. O método se encarrega de me entregar uma cópia desse novo array.
const familia = [{ pai: { idade: 62 } }, { filho: { idade: 28 } }];
const newFamilia = familia.slice(1);
console.log(familia); // Array [{ pai: { idade: 62 }}, { filho: { idade: 28 }}]
console.log(newFamilia); // Array [{ filho: { idade: 28 }}]
Até o dia de hoje, os dois Filhos tinham a mesma idade, só que é aniversário do filho da primeira família, então precisamos mudar a sua idade. Mas olha o que acontece.
// Alterando a idade do filho da primeira familia
familia[1].filho.idade = 29;
Como num passe de magica o filho da Segunda família também ficou um ano mais velho, porque isso?
console.log(familia); // Array [{ pai: { idade: 62 }}, { filho: { idade: 29 }}]
console.log(newFamilia); // Array [{ filho: { idade: 29 }}]
Essa é a “pegadinha” do método slice(), ele copia a referência do objeto para o novo array. Mas para strings, números e booleans, o método copia o valor, não a referência. Por isso é seguro fazer algo assim:
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2)); // Array ["camel", "duck", "elephant"]
Tanto a matriz original quanto a nova se referem ao mesmo objeto. Se um objeto muda, as mudanças são visíveis tanto para a novo array de objetos quanto para o array de objetos original. Até recomendo dar uma lida na documentação oficial, se caso ficar alguma duvida.
Esse é mais um método que recebe como parâmetro uma função, (como falei, é quase um padrão nos métodos javascript arrays) e nesse caso o método reduce() recebe e executa uma função redutora para cada valor de um array.
O método recebe uma função e um valor inicial, como parâmetros obrigatórios, como você pode ver na sintaxe.
reduce((accumulator, currentValue, index, array) => { ... }, initialValue)
| Argumento | Descrição |
|---|---|
| accumulator | Obrigatório. O acumulador acumula os valores do retorno da função callback. |
| currentValue | Obrigatório. O valor do elemento atual. |
| index | Opcional. O índice do array do elemento atual. |
| array | Opcional. O objeto do array ao qual o elemento pertence |
Então explicando de uma maneira bem simples, o método reduce() é executa uma função sobre cada elemento do array, e retorna um resultado final único, ou seja, o método reduz o seu array a um único valor, a partir do valor inicial(currentValue). Exemplo simples:
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
// 1 + 2 + 3 + 4
//Sem valor inicial
console.log(array1.reduce(reducer)); //10
// 5 + 1 + 2 + 3 + 4
//Com valor inicial 5
console.log(array1.reduce(reducer, 5)); //15
Nesse exemplo super simples, eu apenas somo todos os valores do array. No primeira chamada do método array1.reduce() eu não passo nenhum valor inicial já na segunda chamada eu passo o valor 5 como valor inicial, então esse valor é adicionado ao resultado final.
E vale lembrar, muito importante, reduce() não altera o array original.
Deixe um comentário