alguém pode me explicar como que se usa o .filter e o .map? to com dificuldade em entender.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
alguém pode me explicar como que se usa o .filter e o .map? to com dificuldade em entender.
Tanto o filter quanto o map são Prototype para o Array que surgiram para resolver diferentes problemas.
Primeiro vou falar sobre o Filter... Basicamente o Filter vai "filtrar" os dados de uma array de acordo com as regras definidas e retornar uma nova array com os dados filtrados.
Por exemplo, digamos que vc vá receber uma Array de pessoas com nome e nacionalidade .
const json = [
{
nome: "Rui Guilherme",
nacionalidade: "Brasileiro"
},
{
nome: "João Silva",
nacionalidade: "Brasileiro"
},
{
nome: "Backman Tavares",
nacionalidade: "Alemão"
}
]Agora eu quero selecionar apenas os Brasileiros, como vc faria isso? Uma solução seria usando o for of:
// lembra-se de colocar o json aq, eu fiz o json lá em cima.
const brasileiros = []
for (const data of json) {
const { nacionalidade } = data
if(nacionalidade === "Brasileiro") {
brasileiros.push(data)
}
}
console.log(brasileiros)Você acha que essa solução ficou boa? Existem várias formas de resolver ela, e uma dessas formas é usando o filter:
// lembra-se de colocar o json aq, eu fiz o json lá em cima.
const brasileiros = json.filter(data => data.nacionalidade === "Brasileiro")
console.log(brasileiros)usuárioPara deixar mais claro, digamos que a aplicação vá receber 5 frutas do usuario, e o sistema precisa saber quais frutas tem o nome com mais de 5 letras.
const frutas = ['Banana', 'Tomate', 'Kiwi', 'Uva', 'Abacaxi']
const resultado = frutas.filter(data => data.length > 5)
console.log(resultado)Conseguiu entender? Você pode ir mais além, por exemplo verificar quais são os números maiores que 10 pelo usuario.
function maiorQueDez(value) {
return value > 10
}
const array = [11, 8, 152, 5451, 3, 4, 54, 12, 6]
const resultado = array.filter(maiorQueDez)
console.log(resultado)Agora o map recebe uma Array e retorna uma nova Array com dados "populados/modificados", digamos que o usuario vá digitar vários números e precisa saber a metade deles?
const numeros = [2, 5, 10, 15, 20, 25]
const metade = numeros.map(valores => valores / 2)
console.log(metade)Você tbm pode dobrar e somar com 10:
const numeros = [2, 5, 10, 15, 20, 25]
const resultado = numeros.map(valores => {
return {
dobro: valores * 2,
soma: valores + 10
}
})
console.log(resultado)Solte sua imaginação agora e faça alguns scripts usando esses dois prototypes, só para relembrar: O filter retorna uma array nova com os valores que passarem pelo filtro que vc definiu (Lembra-se que o filtro é uam função) e o map retorna uma nova array com os dados modificados de acordo com as regras de negocio definida por vc.