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:
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
- 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'];
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}`);
});
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`);
}
Podemos melhorar a escrita do código usando arrow functions como segue:
/** Exemplo 03 */
nomes.forEach((nome) => console.log(`O nome da pessoa é: ${nome}`));
- 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
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.
- 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)
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}
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.
- 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);
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.
- 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);
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.
- 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);
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.
- 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);
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)