DEV Community 👩‍💻👨‍💻

Wanderson Alves Rodrigues
Wanderson Alves Rodrigues

Posted on

Métodos Auxiliares para Array

De todos os novos métodos auxiliares que existem em array no JavaScript, vou apresentar os seguintes:

  • forEach
  • map
  • filter
  • find
  • every
  • some
  • reduce

Antes de começar vou abordar como será realizado os testes dos código, primeiramente teremos que ter o node instalado na máquina e também o npm, caso tenha dificuldade de instalar o node segue alguns link:

NodeJs
Digital Ocean

Feito a instalação do node para executar nossos exemplo em um servidor http, vamos instalar via npm o http-server segue as instruções no link abaixo:
http-server

  1. ForEach

O forEach é o primeiro método que veremos,ele é útil quando precisamos passar por todos os elementos de dentro de dentro de um array.
Para testar o forEach vamos criar criar um array de nomes de pessoas:

let nomes = ['Maria','João','Joaquim','Larissa'];
Enter fullscreen mode Exit fullscreen mode

Para testar o loop dos nomes vamos usar o método forEach passando como parâmetros uma função de retorno que aceita um outro parâmetro.

/** Exemplo 01 */
let nomes = ['Maria','João','Joaquim','Larissa'];
nomes.forEach(function(nome){
  console.log(`O nome da pessoa é: ${nome}`);
});
Enter fullscreen mode Exit fullscreen mode

O que acontece no código forEach acima, dentro do método forEach passamos uma função anônima de retorno, conhecida como callback, essa função é executada para cada item do array e o valor do item é atribuída a variável passada como parâmetro do callback.
A função não precisa ser anônima poderíamos ter criado uma função e atribuir ao forEach como segue:

/** Exemplo 02 */
function imprimirLogArray(nome){
  console.log(`O nome ${nome} foi definido em uma função não anônima`);
}
Enter fullscreen mode Exit fullscreen mode

Podemos melhorar a escrita do código usando arrow functions como segue:

/** Exemplo 03 */
nomes.forEach((nome) => console.log(`O nome da pessoa é: ${nome}`));
Enter fullscreen mode Exit fullscreen mode
  1. Map

Esse método é útil quando queremos passar por todos o array e também modificá-lo. Vamos imaginar um simples exemplo passado um array com números de 1 até 5 queremos saber o triplo deles. Para ter um código mais limpo podemos usar o Map como segue:

/** Exemplo 01 */
let numeros = [1,2,3,4,5]
let triplo = numeros.map(function(numero){
  return numero*3;
});
console.log(`O Triplo é: ${triplo}`);//[3,6,9,12,15
Enter fullscreen mode Exit fullscreen mode

o map executar o método callback para cada elemento contido no array e constrói um novo array de acordo com o retorno de cada elemento da chamada.
Como é retornado um novo array o original não é alterado, mantendo sua integridade.

  1. Filter

Como o nome já indica usamos esse método para filtrar um array usando um critério.
Vamos imaginar um exemplo onde queremos filtrar uma Array de profissionais por profissão e tempo de experiência:

/** Exemplo 01 */
let profissionais = [
    {nome:'João', profissao: 'Engenheiro da Computação', sigla: 'ENGCOMP', experienciaEmAnos:1},
    {nome:'Joaquim', profissao: 'Engenheiro Ambiental', sigla: 'ENGAMB', experienciaEmAnos:3},
    {nome:'Maria', profissao: 'Engenheiro da Computação', sigla: 'ENGCOMP', experienciaEmAnos:2},
    {nome:'Rafael', profissao: 'Físico', sigla: 'FISICO', experienciaEmAnos:5},
    {nome:'Larissa', profissao: 'Engenheiro da Computação', sigla: 'ENGCOMP', experienciaEmAnos:4}
  ];
  let proffisionaisEngenhariaComputacao = profissionais.filter(function(profisional){
    return profisional.sigla==='ENGCOMP';
  });
  console.log(proffisionaisEngenhariaComputacao)
Enter fullscreen mode Exit fullscreen mode

A saída foi:

{nome: João, profissao: Engenheiro da Computação, sigla: ENGCOMP, experienciaEmAnos: 1}
{nome: Maria, profissao: Engenheiro da Computação, sigla: ENGCOMP, experienciaEmAnos: 2}
{nome: Larissa, profissao: Engenheiro da Computação, sigla: ENGCOMP, experienciaEmAnos: 4}
Enter fullscreen mode Exit fullscreen mode

A função callback recebe cada elemento do array é atribui a variável profissional do nosso exemplo, então é verificado se esse elemento atende ao condição que no nosso caso profissionais de Engenharia da Computação se for verdadeira(true), o elemento é adicionado ao um novo array que ao final da execução de todos os elementos do array e retornado.

  1. Find

Esse método é interessante quando queremos encontrar um item especifico no array.
Como exemplo temos uma array de carros queremos encontrar uma ferrari:

/** Exemplo 01 */
let carros = ['Ferrari', 'Fusca', 'Palio','Palio','Opala','Ladra'];
let carro = carros.find(function(car){
  return car==='Ferrari';
});
console.log(carro);
Enter fullscreen mode Exit fullscreen mode

Caso exista dois carros com o nome Ferrari somente o primeiro encontrado será retornado, então quanto mais especifico for nosso critério melhor o resultado obtido.

  1. Every

Esse método é bem interessante porém ao contrario de outros que já vimos, esse não retorna uma novo array com os elementos mas sim o valor booleano.
O every é bom para avaliar todos os elementos de um array respeitando uma dada condição,se todos atenderem a essa condição retorna true senão false.

Vamos ao um exemplo de uma array de alunos, onde queremos se todos são maiores de idade:

/** Exemplo 01 */
let alunos = [
    {nome:'João', idade:21},
    {nome:'Maria', idade:18},
    {nome:'Joaquim', idade:20},
    {nome:'Larissa', idade:25}
  ];
  let maioreDeIdade = alunos.every(function(aluno){
    return aluno.idade >= 18;
  });
  console.log(maioreDeIdade);
Enter fullscreen mode Exit fullscreen mode

A função itera cada um dos elementos sob a condição e usa o operador lógico AND em cada um dos retornos, caso um dos elementos não satisfaça a condição,o resultado do every de imediato será false,se todos atendam à condição, o true é retornado como resultado da função.

  1. Some

Se queremos avaliar se pelo menos um elementos satisfaz a condição,o método some é a escolha perfeita.
Vamos usar o mesmo exemplo dos alunos maiores de idade agora queremos saber se existem pelo menos um aluno maior de idade na lista:

/** Exemplo 01 */
let alunos = [
    {nome:'João', idade:15},
    {nome:'Maria', idade:17},
    {nome:'Joaquim', idade:20},
    {nome:'Larissa', idade:25}
  ];
  let maioreDeIdade = alunos.some(function(aluno){
    return aluno.idade >= 18;
  });
  console.log(maioreDeIdade);
Enter fullscreen mode Exit fullscreen mode

O array é percorrido é se caso exista algum elemento que atenda ao critério então e retornado true,caso contrario é percorrido todos o array caso não encontre é retornado falso.

  1. Reduce

A ideia desse método é pegar todos os valores de um array e condensá-los em um único.
Para exemplificar temos um array de idades e queremos saber o somatório das idades:

/** Exemplo 01 */
let idades = [15,20,18,25];
let soma = 0;
  soma = idades.reduce(function(soma,idade){
  return soma + idade;
});
console.log(soma);
Enter fullscreen mode Exit fullscreen mode

Diferentemente dos outros métodos o reduce aceita dois parâmetros,para cada interação o valor soma se torna o valor retornado da iteração anterior,sendo que na primeira chamada o valor inicial é o que definimos como o segundo parâmetro da função.

Todos os código podem ser encontrado no GitHub.

Top comments (0)

Build Anything...


Use any Linode offering to create something for the DEV x Linode Hackathon 2022. A variety of prizes are up for grabs, inculding $1,000 USD. 👀

Join the Hackathon <-