Utilizando o Filter e Map para manipular arrays em JavaScript

  Olá, seja muito bem vindo(a), vamos aprender a manipular um array em JavaScript usando o método Filter, no qual ele percorre todo o array e produz um novo com os elementos que passaram pela condicional que passaremos.

  Primeiro vamos construir uma constante no qual podemos preencher com qualquer dado, no meu caso irei preencher com dados pessoais fictícios como nome, idade e status civil. No final teremos um array de dados da seguinte maneira:

const dadosPessoais = [

 {nome: "Beto", idade: 18, statusCivil: "solteiro"},

 {nome: "Ana", idade: 25, statusCivil: "Casado"},

 {nome: "Hiago", idade: 40, statusCivil: "Casado"},

 {nome: "Lucas", idade: 20, statusCivil: "solteiro"}

];

  Nossa missão é apresentar dados apenas das pessoas casadas, usaremos o filter para isso, no qual precisaremos acessar a propriedade statusCivil dentro do array e colocar a condicional de que se o conteúdo for igual a “Casado” ele pegaria os dados para o novo array. Da seguinte forma:

const pessoasCasadas = dadosPessoais.filter(data => (data.statusCivil == "Casado"));

console.log(pessoasCasadas);

Obteremos como resultado o array abaixo:

[

 { nome: 'Ana', idade: 25, statusCivil: 'Casado' }, 

 { nome: 'Hiago', idade: 40, statusCivil: 'Casado' }

]

  Agora, recebemos um array com as informações, mas se quiséssemos manipular essas informações para serem apresentadas de uma outra forma? Para isso podemos utilizar o método Map() que percorre o array e executa alguma transformação com os dados, no nosso caso, apresentar as informações em formato de texto.

  Primeiro vamos conectar o método map ao método filter, assim os dados das pessoas casadas serão obtidos e depois poderemos manipular apenas eles, mas poderíamos separar os métodos e manipular todos os dados dentro do array. 

const pessoasCasadas = dadosPessoais.filter(data => (data.statusCivil == "Casado")).map(data => `${data.nome} é Casado(a) e tem ${data.idade} anos`);

console.log(pessoasCasadas);

Com isso o resultado vai ser o seguinte:

[ 'Ana é Casado(a) e tem 25 anos', 'Hiago é Casado(a) e tem 40 anos' ]

  Com isso nós aprendemos a utilizar o filter e o map para manipular arrays no JavaScript, espero que você tenha gostado e aprendido com esse artigo, caso deseje aprender mais, eu deixo o link do meu blog, tem muito conteúdo de qualidade disponível: https://programacao-descomplicada.blogspot.com/. Um abraço e até o próximo artigo.

Blog: https://programacao-descomplicada.blogspot.com/2023/01/utilizando-o-filter-e-map-para.html