como usar o conjunto em JavaScript ES6 para encontrar itens únicos

Um Set é um conjunto exclusivo de itens, e tem a vantagem sobre os objetos JavaScript que você pode iterar os itens de um Set na ordem de inserção.

“o objeto Set permite armazenar valores únicos de qualquer tipo, sejam valores primitivos ou referências de objetos.”- MDN Docs

em outras palavras, você pode fazer um loop através de um Set como um array, e os itens permanecem na ordem em que foram encontrados. As propriedades de um objeto JavaScript não retêm sua ordem de inserção, então a ordem que as propriedades foram adicionadas a um objeto é perdida na tradução se o uso tentar filtrar itens únicos usando um objeto.

Set é uma funcionalidade ES6 suportada em todos os navegadores modernos, incluindo o IE11, de acordo com a página para Set() em CanIUse.com.

neste artigo, você vai aprender a usar Set para lidar com a tarefa comum de encontrar uma lista de itens únicos em um array, se você precisa encontrar valores primitivos únicos (como números ou strings) ou objetos.

eu vou cobrir tanto usando Set com referências de objetos (o comportamento padrão), bem como com o conteúdo desses objetos (encontrando objetos únicos por valor).

Como Definir Verifica a Igualdade de Valor

Set utiliza o triplo operador de igualdade (===) também conhecido como o operador de igualdade estrita, a fim de verificar a igualdade de valores primitivos ou objetos.

“um valor no Set só pode ocorrer uma vez; é único na colecção de Set.”— MDN Docs

no Entanto, existem algumas diferenças com a implementação de comparação de igualdade para Set versus ===, pelo menos desde ECMAScript 2015 (ES6).

para Set, +0 (zero positivo) e -0 (zero negativo) são considerados o mesmo valor, embora +0 !== -0 em JavaScript.

Similarly, Set treats NaN (not-a-number) differently than ===, in that Set makes all NaN values equal and will only store one in the Set.

NaN é tipicamente o único valor que não se iguala em JavaScript, significando que NaN === NaN é falso e NaN !== NaN é verdadeiro.Para mais detalhes sobre como funciona o NaN, consulte o meu artigo sobre como verificar se NaN:

valores indefinidos (undefined) também podem ser armazenados em um Set, e novamente apenas um valor undefined será mantido. Isso é comportamento normal para ===, no entanto.

em conjunto, o comportamento de Set é um pouco mais próximo do de outra característica ES6 Object.is() em comparação com ===.

Usando Set Exclusivo Valores Primitivos em uma Matriz

Uso de Set é simples, na medida em objetos JavaScript, acesse: você chamar o Set() construtor com a new palavras-chave: new Set() // Set .

o equivalente ao método .push() de arrays (Array.prototype.push()) para um Set é chamado .add() (Set.prototype.add()). Ele funciona da mesma forma-exceto que apenas um de cada valor único será adicionado ao Set.

isso significa que você pode fazer um loop através de um array usando .forEach() (Array.prototype.forEach()) ou um loop for...of, então .add() cada item para um novo Set. O objeto resultante Set terá apenas os valores únicos.

mais simplesmente, você pode simplesmente passar a matriz para o construtor Set() diretamente. Isso funciona porque o construtor Set() aceita um objeto iterável, como um array, como seu único parâmetro.

” objetos iteráveis embutidos em String, Array, objetos tipo matriz (por exemplo, arguments ou NodeList), TypedArray, Map, Set, e iterables definidos pelo utilizador.”- MDN Docs

o parâmetro do construtor é opcional; new Set() torna um vazio Set.

para converter um Set de volta a um array, um método para fazê-lo é Array.from(). Vou falar sobre outro método usando o operador de spread (...) mais tarde, mas o método Array.from() funciona tão bem e é fácil de ler.

aqui está um excerto de código demonstrando usando Set com valores primitivos, como números e strings, para encontrar os valores únicos em um array JavaScript.

você como o one-liner encontrar a única itens em uma matriz usando Set?

Sim, eu também!!! Thanks obrigado ES6.

Note que a ordem do resultante Set ou matriz é a “ordem de inserção” – a ordem que os valores foram encontrados na matriz ou lista original.

Únicas Referências de Objeto em uma Matriz Usando Set

Quando se trabalha com valores primitivos, como números ou cadeias de caracteres, um Set objeto funciona como seria de esperar, não só de valores exclusivos são mantidas.

no entanto, ao trabalhar com objetos, quaisquer objetos que contenham os mesmos dados são considerados objetos diferentes por Set porque eles têm diferentes referências de objetos-os “ponteiros” reais na memória para esses objetos.

Para colocar de outra forma, uma matriz com apenas o número 1, em que nunca será igual a outra matriz, mesmo se ele também contém apenas 1: !== // true

no Entanto, ainda podemos usar Set para encontrar únicas referências de objeto em uma matriz ou outras iterable objeto. Isso é super útil se o mesmo objeto pode ter sido adicionado várias vezes a um array, e nós só queremos os objetos únicos.

por exemplo, se atribuir um objecto a uma variável, e depois adicionar essa variável a uma matriz repetidamente, poderá usar Set para remover os duplicados:

Compreender o conceito de referências de objeto em JavaScript é algo que eu tenho enfrentado antes, em meu artigo sobre fundo de copiar objetos no JavaScript:

mais adiante neste artigo, Eu vou falar sobre o uso de Set para comparar objetos, os valores que eles contêm, em vez de referências de objeto apontando para eles.

Como Fazer uma Matriz a Partir de um Conjunto de

o Meu método favorito para transformar um Set em uma matriz está usando (...) propagação do operador com um par de colchetes : .

Você pode até mesmo escrevê-lo como um one-liner:

Uau! É claro que usar o operador de spread (...) é exatamente equivalente ao método Array.from() que eu estava usando antes. Sinta-se à vontade para usar qualquer um.

uma vez que você tem um array, você pode iterar através dele com seus métodos de array usuais, como um laço for...of, .forEach(), .map() e .reduce().

Você também pode iterar através do Set diretamente, como eu discuto na próxima seção, porque um Set é também um tipo de objeto iterável, assim como arrays em si.

Iterar por Meio de um Conjunto de Valores Exclusivos

Há duas maneiras básicas para iterar através de um Set em JavaScript, mas eles não são os mesmos métodos que você vai usar para matrizes:

1 — Use Set.prototipo.chaves () ou Set.prototipo.valores ()

estes dois métodos são equivalentes; ambos devolvem um novo objecto Iterator, incluindo os valores para cada elemento na ordem de inserção Set.

ter um objeto Iterator nos permite chamar o método .next() diretamente, se isso é algo que você precisa fazer em seu código JavaScript.Yasser Arafat Salman tem um belo artigo explicando os iteradores sobre CodeBurst.io.

2 — Conjunto de utilizações.prototipo.forEach() with a Callback Function

The .forEach() method for a Set is similar to the method of the same name for arrays, so you can call it directly on a Set object.

” callbackFn uma vez para cada valor presente no objeto Set, em ordem de inserção. Se for fornecido um parâmetro thisArg, será utilizado como valor this para cada invocação de callbackFn.”- MDN Docs

é claro que você pode usar uma função de seta como a função de callback, o mesmo que você faria ao trabalhar com um array.

3 — Use a para…of Loop Directly With the New Set

As Set is a type of iterable object, a for...of loop will work the same way with a Set as it would with a JavaScript array.