JavaScript

Como pegar os itens diferentes em um array de objetos com JavaScript

1 de dezembro de 2021

Como pegar os itens diferentes em um array de objetos com JavaScript

Neste artigo você vai aprender a como pegar os itens diferentes em um array de objetos em JavaScript, de uma maneira simples

pegar os itens diferentes em um array de objetos capa

Fala programador(a), beleza? Bora aprender mais sobre arrays, objetos e JavaScript!

A ideia deste artigo é conseguir obter apenas os objetos que são diferentes em um array de objetos

Ou seja, os itens únicos de um array de objetos, excluíremos os duplicados

Faremos isso de uma maneira simples, utilizando recursos nativos da linguagem

Vamos utilizar o recurso de Set, que cria um array único, sem repetição de elementos

E para fazer o loop entre os itens utilizamos o método de array map, escolhendo qual é a chave que será transferida para o array

Veja o código na prática:

const data = [
  { name: 'Matheus', age: 30 }, 
  { name: 'Pedro', age: 33 }, 
  { name: 'Marcos', age: 21 },
  { name: 'Matheus', age: 30},
  { name: 'Marcos', age: 21}
];

const uniqueObjects = [...new Set(data.map(item => item.name))]; 

console.log(uniqueObjects) // ["Matheus", "Pedro", "Marcos"]

E desta maneira obtemos apenas os itens únicos do array de objetos, simples não é?

Lembrando que o Set é um recurso moderno, se você precisa de compatibilidade em todos os navegadores use um transpiler, como o Babel

Conclusão

Neste artigo você aprendeu a como pegar os itens diferentes em um array de objetos em JavaScript

Ou seja, criar um array de itens únicos, que vieram de um array de objetos

Utilizamos dois recursos: Set, para criar o array único, e map, para percorrer todos os elementos do array

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x