Métodos de manipulação de arrays em JavaScript — map, filter e find

Quando estamos trabalhando com requisições de API, webservices, etc, na maioria das vezes, iremos necessitar fazer o tratamento destes dados, de forma que os mesmos atendam ao desejado para cada caso. Esses dados, em grandes partes das vezes, vêm em forma de um array, podendo ter objetos JSON (JavaScript Object Notation). No presente artigo, será explicado como utilizar três métodos para proceder em arrays: map, filter e find.

1. Filter

Como o próprio nome diz, esse método irá fazer um filtro no array para localizar os objetos ou os elementos que satisfaçam a condição passada como parâmetro. Observe o exemplo abaixo:

Figura 1 — Exemplo do uso do método filter. Fonte: Autoria própria.

Foi declarado um array linguagens, com seis elementos de linguagens de programação, descrevendo o tipo que ela é (frontend ou backend) e, o nome dela.
Para fazer um filtro de somente trazer os elementos que são backend, utiliza-se a função filter, passando o array linguagens com os objetos criados e, acompanhado da condição para localizar os que são backend, acessando através do tipo, ou seja, linguagens.tipo.
Nota-se que foi declarada outra variável, linguagens2, para trazer os resultados. Isto foi necessário para não sobrecarregar a variável linguagens, criando outra, ficando mais leve a mesma, trazendo todos os resultados, que no console do navegador, será igual a:

Figura 2— Resultado do uso do método filter — condição backend. Fonte: Autoria própria.

Ele trouxe somente Java, Ruby e Node.js, que se enquadram como back-end.

Mudando a condição para frontend, o resultado seria somente os elementos React, CSS e JavaScript.

Figuras 3 e 4 — Resultado do uso do método filter — condição frontend. Fonte: Autoria própria.

2. Find

As condições são similares ao filter, os parâmetros e etc. Contudo, o método find só retornará o primeiro elemento que satisfará a condição passada. Ou seja, podendo ter 10, 15, 50, 100 resultados, o find só trará o primeiro, conforme exemplo:

Figura 5 — Exemplo do uso do método find. Fonte: Autoria própria.

A declaração é idêntica ao filter, apenas mudando o nome do método. Como resultado no console do navegador, trará apenas o CSS, visto que é o primeiro que satisfaz a condição de ser do tipo frontend.

Figura 6— Resultado do exemplo do uso do método find — condição frontend. Fonte: Autoria própria.

O método find, como trará apenas um item do retorno, ele é ideal para localizar ids específicos de seu banco de dados, por exemplo, visto que, se um id é uma chave primária, a mesma não se repetirá mais de uma vez e, com isso, só retornará apenas um resultado, satisfazendo as condições do método find.

Vejamos se o mesmo exemplo for aplicado em backend. O resultado precisará ser Java, visto que, é o primeiro elemento que satisfaz esta condição:

Figura 6 — Resultado do exemplo do uso do método find — condição backend. Fonte: Autoria própria.

E o resultado foi exatamente este:

Figura 8 — Resultado do exemplo do uso do método find — condição backend (2). Fonte: Autoria própria.

3. Map

No método map, ele pode ser dividido em dois outros arrays, com as propriedades separadas do objeto principal.
Para o exemplo, será usado um array com times brasileiros:

Figura 9 — Exemplo do uso do método filter. Fonte: Autoria própria.

Para houver a separação entre nomes dos times e o estado deles, foram declaradas as variáveis timesA e timesB, cuja mesma foi passada o array inicial com o método map, fazendo uma invocação ao array com as propriedades que o mesmo deve receber. No caso, timesA receberá o nome e o timesB receberá o estado, concatenando com o acesso às variáveis do objeto (times.nome e times.estado). Vejamos o resultado no console do navegador:

Figura 10 — Impressão do array inicial. Fonte: Autoria própria.

Figura 11 — impressão dos nomes dos times — vetor timesA. Fonte: Autoria própria.

Figura 12— impressão dos estados dos times — vetor timesB. Fonte: Autoria própria.

Esses foram alguns métodos apresentados para a manipulação dos vetores em JavaScript. Eles são imprescindíveis caso você esteja aprendendo algum framework como React, visto que, como mencionado no início, em algum momento, dados de retorno de uma API, de um banco de dados precisarão ser tratados e, para isso, terá que ser utilizado algum destes métodos para fazer um filtro neles, conforme desejado.

Se você deseja aprofundar seus conhecimentos sobre o JavaScript, não deixe de conferir o artigo que aborda alguns conceitos básicos sobre a biblioteca React.js, clicando aqui.