Fala pessoal, beleza?
Estou com uma dúvida, deve ser pq não sei muito bem quando devo usar cada um.
Mas vamos lá. Eu tenho um array, e nesse array eu quero pegar dois campos, o titulo e as tarefas e acessar um campo dentro de tarefas que chama CODE.
const ArrayData=[{ qtTarefa: 2, tarefas: [[Object], [Object]], titulo: "CLOSED" }];Como deveria proceder, alguém me da uma luz nesse problema.
Olá Thiago, tudo bem ?
Então antes de dizer qual utilizar, acredito que seja melhor dar uma boa explicação sobre cada, certo?
Esse aqui já podemos descartar de primeira, iremos utilizar o reduce quando queremos reduzir vários dados em apenas um valor, por exemplo: se quiséssemos saber a quantidade de tarefas que temos no nosso arrayData, exemplo:
const arrayData = [
{
qtTarefa: 8,
tarefas: [
{ CODE: 1, nome: "Ex"},
{ CODE: 2, nome: "Outro Ex"}
],
titulo: "CLOSED"
},
{
qtTarefa: 5,
tarefas: [
{ CODE: 1, nome: "Ex"},
{ CODE: 2, nome: "Outro Ex"}
],
titulo: "CLOSED"
},
{
qtTarefa: 3,
tarefas: [
{ CODE: 1, nome: "Ex"},
{ CODE: 2, nome: "Outro Ex"}
],
titulo: "CLOSED"
},
{
qtTarefa: 15,
tarefas: [
{ CODE: 1, nome: "Ex"},
{ CODE: 2, nome: "Outro Ex"}
],
titulo: "CLOSED"
},
]Poderiamos reduzir todo esse array em apenas um número inteiro da seguinte forma:
arrayData.reduce( (elementoAnterior, elementoAtual) => elementoAnterior += elementoAtual.qtTarefa, 0) E teriamos como resposta 31
O filter gera um array com os objetos que passam por um teste booleano, então dado um array de 10 elementos, eu seleciono os elementos que deram positivo para aquele teste
Por exemplo pegar a quantidade de tarefas maior que 6, seria da seguinte maneira:
arrayData.filter( elemento => elemento.qtTarefa > 6)Teríamos como resposta um array com os 2 últimos objetos, mas como vimos, não mexemos na estrutura, apenas selecionamos os elementos que dão verdadeiro para a nossa função
O map nos devolve um novo array onde cada elemento é o resultado de uma função aplicada sobre esse elemento, então aqui sim criamos um novo array com mudanças na estrutura!
Bem... E se criássemos uma função que devolve um objeto com alguns dados do elemento?
Podemos fazer isso da seguinte maneira:
arrayData.map( element => {
return {
titulo element.titulo,
tarefas: element.tarefas
}
})Ou em uma linha: `
arrayData.map( element => ( { titulo: element.titulo, tarefas: element.tarefas } ))Dessa maneira teremos:
0: Object { titulo: "CLOSED", tarefas: (2) […] }
1: Object { titulo: "CLOSED", tarefas: (2) […] }
2: Object { titulo: "CLOSED", tarefas: (2) […] }
3: Object { titulo: "CLOSED", tarefas: (2) […] }Conseguiu compreender?
Abraços e Bons Estudos!