Introdução
As funções de array foram criadas para facilitar na manipulação de arrays Javascript.
Essas funções de array são implementações de funções continuamente utilizadas no dia a dia.
São para adicionar valor, remover valor, percorrer a lista, juntar listas, fazer filtros e entre outros.
Neste post vou mostrar algumas das principais funções de array que mais utilizo no meu dia a dia.
Adicionar valor
Começando as funções de array, é possível adicionar valor no começo, no final e no meio do array.
Para o começo e o final, há funções próprias para isso, são elas unshift e push.
let linguagens = ["Javascript", "PHP", "Python"];
linguagens.push("Java");
console.log(linguagens); //["Javascript", "PHP", "Python", "Java"];
linguagens.unshift("Cobol");
console.log(linguagens); //["Cobol", "Javascript", "PHP", "Python", "Java"];
Já para adicionar um valor no meio, será preciso utilizar a função splice.
Essa função serve tanto para adicionar, quanto para remover elementos do meio da lista, mas aqui vamos focar na parte de inserir.
Vamos supor na lista de linguagens, caso a gente queira inserir a linguagem Ruby depois de PHP.
Para isso vamos indicar qual posição desejamos colocar esse valor, e no caso o PHP está na posição 2 (após a inserção de Cobol pelo unshift), então queremos colocar na posição 3.
let posicaoDoRuby = 3;
linguagens.splice(posicaoDoRuby, 0, "Ruby");
console.log(linguagens); //['Cobol', 'Javascript', 'PHP', 'Ruby', 'Python', 'Java']
E dessa forma é possível inserir valores no meio da lista onde desejar.
Percorrer array
Esta é uma ação muito comum, e tem algumas funções para fazer isso, cada função tem sua particularidade.
forEach
O forEach é utilizado para percorrer a lista sem retornar nenhum valor.
Você pode percorrer a lista, manipular os valores e esses valores não serão refletidos na lista original.
Por exemplo, na lista de linguagens, vamos percorrer toda a lista e imprimir no console:
linguagens.forEach(linguagem => {
console.log(`Linguagem: ${linguagem}`);
});
// Linguagem: Cobol
// Linguagem: Javascript
// Linguagem: Ruby
// Linguagem: PHP
// Linguagem: Python
// Linguagem: Java
Exibir os valores é apenas uma das coisas que da para fazer.
Em outras situações é possível manipular essa string, caso seja um número é possível fazer cálculos, verificações e entre outros.
map
A função map também é utilizada para percorrer a lista, porém a diferença com o forEach é que o map retorna os valores.
Na prática, isso significa que você pode manipular os valores e criar uma nova lista modificada. A lista original não é afetada.
Por exemplo, em uma lista de números caso queira uma nova lista com o dobro de cada número:
let numeros = [2, 4, 6];
let dobros = numeros.map(numero => {
return numero * 2;
});
console.log(dobros); // [4, 8, 12]
Isso é útil, pois você consegue manter os valores originais e ainda sim ter uma nova lista modificada.
Para cada situação você pode avaliar se deseja ter uma nova lista, caso não seja necessário, melhor usar o forEach, caso seja, use o map.
Filtrar array
Nas funções de array, também existe função própria para filtro, e é a função filter.
Funciona de forma parecida com o map, é possível percorrer a lista, e para cada item fazer uma condição, se o item atender a essa condição, ele será retornado a nova lista, caso contrário, não será.
Usando o mesmo exemplo dos números, é possível filtrar números menores que 10:
let numeros = [5, 7, 12, 8];
let numerosMenoresQue10 = numeros.filter(numero => {
return numero < 10;
});
console.log(numerosMenoresQue10); // [5, 7, 8]
Procurar um valor
Para procurar um valor específico também tem uma função, que é a função find.
Um pouco diferente do filter, o find busca por somente um valor, mas também com base em uma condição.
Pense em uma lista de pessoas, é possível localizar uma pessoa específica:
let pessoas = [
{ nome: 'jose', idade: 25 },
{ nome: 'maria', idade: 21 },
{ nome: 'pedro', idade: 23 },
];
let pessoa = pessoas.find(pessoa => {
return pessoa.nome === 'pedro';
});
console.log(pessoa); // { nome: 'pedro', idade: 23 }
Conclusão
As funções de array do javascript são muito úteis no dia a dia, pois com elas é possível ter mais produtividade e assertividade na manipulação dos arrays.
Muitas funções que teriam que ser feitas manualmente, já foram incorporadas nas funções de array do Javascript.
Então vale muito a pena dar uma boa estudada sobre o assunto e praticar cada vez mais.
Para ver outros canais onde o posto conteúdo sobre Javascript, veja os Links do Programando Soluções.
Desenvolvimento Web com HTML, CSS e JavaScript
Aprenda a testar Aplicações Javascript
Referências
https://www.gigasystems.com.br/artigo/89/funcoes-para-manipulacao-de-arrays-com-javascript
https://www.treinaweb.com.br/blog/javascript-metodos-de-arrays-que-voce-precisa-conhecer
https://ricardo-reis.medium.com/splice-969723f47d26
https://warcontent.com/metodos-arrays-javascript/#filter-javascript