Entendendo como funciona o Set do Javascript.

Pablo Gomes — Wed, 10 Feb 2021 02:01:29 +0000

Exatamente hoje dia 09/02, me deparei com o seguinte problema:

Eu deveria pegar um array com os nomes das categorias do produtos e seta-las dentro do filtro da table, usando os components da ANT Design of React, (O que é ANT Design? É uma biblioteca React UI que contém um conjunto de componentes e demos de alta qualidade para a construção de interfaces de usuário ricas e interativas, https://ant.design/).

Basicamente eu deveria poder fazer um filtro nos produtos pelas categorias, mas como alguns produtos tem a mesma categoria, como por exemplo os itens/produtos "computador" e "celular", que estão na mesma categoria, "eletronicos".
Eu tinha por exemplo esse array

Eu estava fazendo assim pra pegar os dados, setar no filters:

O que acontecia era que o nome eletrônicos se repetia várias vezes, de acordo a quantidade de itens que fossem da mesma categoria:

Ai que entra no "Set", lembra que eu tava passando

Aqui ele tava me retornando todos os dados que fossem relacionados a categoria, ou seja, se houvesse categorias repetidas, iria vir os nomes repetidos.
O que eu fiz? usei o "Set", O Set é uma estrutura de dados muito utilizada em várias linguagens de programação que, por padrão, não aceita valores repetidos. Ao contrário do array ou do List.
Como cada valor no Set deve ser único, nesse meu caso ele é muito apropriado, por que o que eu queria era literalmente limpar o array e remover os valores repetidos.
Ficou assim:

Além disso utilizei o Spread Operator para criar um novo array com os valores do nosso Set (que não aceita valores repetidos).
Resultado:

Foi a maneira mais simples e facil que encontrei de resolver meu problema, mas me conta ai, como você faria?
Se gostou comenta ai e comparatilha...

Forte abraço e me siga ai nas redes sociais...
https://www.linkedin.com/in/pablo-r-gomes/
https://twitter.com/PabloGomesDev
https://github.com/pablojr17
https://www.instagram.com/pablo___gomes/

Referências:
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Set
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Spread_operator
https://dicasdejavascript.com.br/javascript-como-remover-valores-repetidos-de-um-array/

[PT-BR] 6 métodos de console de javascript

Pablo Gomes — Mon, 05 Oct 2020 23:13:55 +0000

Nessa ultima semana, resolvi escrever meu 1º artigo sobre tecnologia, fui impulsionado pelo amigo JP o "Brabo", que no dia 30/09 escreveu seu 1º artigo sobre tecnologia, com titulo: Primeiros passos com o Nunjucks! muito bom diga-se de passagem, segue o link https://dev.to/jpbrab0/nunjucks-template-engine-1k30...

Escolhi um tema fácil, mas que passa meio que desapercebido no meio dos devs.

Talvez assim como eu, você já conheça algum método de console do javascript, a aposto que é o console.log hahahaha, mas por incrível que pareça, ele não é o único, existem vários outros métodos, pelas minhas contagens tem pelo menos uns 21 kkkkk, sim 21, são eles | assert(), clear(), count(), countReset(), dir(), dirxml(), error(), group(), groupCollapsed(), groupEnd(), info(), log(), profile(), profileEnd(), table(), time(), timeEnd(), timeLog(), timeStamp(), trace(), warn() |, mas nesse artigo eu quero apresentar apenas 6.

Antes de tudo precisamos aprender o que é o "console": O console é basicamente um objeto, e como todo objeto ele tem diversos métodos associados a ele, vamos pra lista dos 6:

1 - console.log, o mais conhecido e usado pelos devs, ele é utilizado para a emissão de informações de registro em geral. Você pode utilizar substituição de string e outros argumentos com este método.

2 - console.error, como o nome já diz, o método grava uma mensagem de erro no console, simples assim😉.

3 - console.assert, esse método emite uma mensagem e traça a sequência de operações até o primeiro argumento for falso, se a afirmação é verdadeira, nada acontece.

4 - console.count(), esse método exibe o número de vezes em que a chamada count() em particular foi invocada. Essa função recebe um argumento opcional label.

Esse 2 últimos, iremos aplicá-los juntos.

5 - console.time, esse método inicia um cronômetro na visualização do console e permite cronometrar certas operações em seu código para fins de teste.

6 - console.timeEnd, já esse método interrompe o temporizador que foi anteriormente iniciado por na chamada do console.time().

Tentei nesse artigo mostrar apenas 6 métodos de uma lista vasta, espero ter ajudado alguém que assim como eu está ainda engatinhando nessa área..
Diz ai o que você achou, o feedback é importante, vou tentar escrever 1 artigo por mês.

Se quiser me encontrar nas redes sociais, segue os links, me mande lá o que vocề achou...
https://twitter.com/PabloGomesDev
https://www.instagram.com/pablo___gomes/?hl=pt-br
https://www.linkedin.com/in/pablo-r-gomes/
https://www.facebook.com/pablo.joserocha.7/

Forte abraço

Referencias:
https://developer.mozilla.org/pt-BR/
https://www.w3schools.com/default.asp

DEV Community: Pablo Gomes

Entendendo como funciona o Set do Javascript.

[PT-BR] 6 métodos de console de javascript