{"componentChunkName":"component---src-templates-blog-post-js","path":"/javascript-array-flatmap/","result":{"data":{"markdownRemark":{"fields":{"slug":"/javascript-array-flatmap/"},"frontmatter":{"title":"Explorando Javascript: Array FlatMap","description":"Nivelando arrays no javascript usando flat() e flatMap()","date":"20 de setembro de 2020","image":"/assets/img/screen-shot-2020-09-20-at-19.38.46.png"},"html":"

\n \n

Método flatMap()

\n

E o método flatMap() é basicamente a junção dos dois.

\n

Mas vamos a outro cenário, um array de objetos que será uma lista de pessoas e cada pessoa tem no mínimo 2 telefones cadastrados para ela. E queremos uma lista dos telefones de todas as pessoas.

\n

Ao meu ver esse cenário tá um pouco mais próximo da realidade de como usar do que um simples array de números.

\n
const pessoas = [\n  {\n    idade: 20,\n    nome: \"Fulano 1\",\n    telefones: [\n      { tipo: \"celular\", numero: \"(81)9.9999-9999\" },\n      { tipo: \"casa\", numero: \"(81)3444-4444\" },\n    ],\n  },\n  {\n    idade: 27,\n    nome: \"Fulano 2\",\n    telefones: [\n      { tipo: \"celular\", numero: \"(84)9.8888-888\" },\n      { tipo: \"casa\", numero: \"(84)3455-5555\" },\n    ],\n  },\n  {\n    idade: 32,\n    nome: \"Fulano 3\",\n    telefones: [\n      { tipo: \"celular\", numero: \"(83)9.7777-7777\" },\n      { tipo: \"celular\", numero: \"(83)9.6666-6666\" },\n      { tipo: \"casa\", numero: \"(83)3466-6666\" },\n    ],\n  },\n]
\n

Para esse caso usamos o flatMap() no array de pessoas e a função que passamos para ele retorna os telefones.

\n
const telefones = pessoas.flatMap(pessoa => pessoa.telefones)
\n

E o retorno de telefones fica assim:

\n
[\n  { tipo: \"celular\", numero: \"(81)9.9999-9999\" },\n  { tipo: \"casa\", numero: \"(81)3444-4444\" },\n  { tipo: \"celular\", numero: \"(84)9.8888-888\" },\n  { tipo: \"casa\", numero: \"(84)3455-5555\" },\n  { tipo: \"celular\", numero: \"(83)9.7777-7777\" },\n  { tipo: \"celular\", numero: \"(83)9.6666-6666\" },\n  { tipo: \"casa\", numero: \"(83)3466-6666\" },\n]
\n

Referência:

\n

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap

\n

~🌟~

\n

Bem.. é isso. 😉

\n

Houve a necessidade de usarmos o flatMap() semana passada, nunca tinha usado e na hora nas pressas não assimilei direito, aí passei por ele com calma e decidi mostrar nesse post como usar. 🙃

\n

Minha frequência de posts diminuiu um pouco nessas ultimas semanas basicamente por motivos de saúde mental, nada grave só organizando e analisando alguns pensamentos e atitudes, e pensando bastante sobre focos e objetivos da minha vida profissional e pessoal. Mas to suave. 🙃

\n

Espero que este post possa ser útil para alguém 😊.

\n

Até a próxima. 🤙🏽

","timeToRead":3}},"pageContext":{"slug":"/javascript-array-flatmap/","previousPost":{"fields":{"slug":"/exibindo-um-loader-para-uma-requisicao-no-react/"},"frontmatter":{"title":"Exibindo um Loader para uma requisição no React"}},"nextPost":{"fields":{"slug":"/react-capturando-erros-com-errorboundary/"},"frontmatter":{"title":"React: Capturando erros com ErrorBoundary"}}}},"staticQueryHashes":["1595325003","2037742868","764694655"]}