Resumo : neste tutorial, você aprenderá sobre o Set
objeto JavaScript que permite gerenciar efetivamente uma coleção de valores exclusivos de qualquer tipo.
Introdução ao Set
objeto JavaScript
ES6 fornece um novo tipo Set
que armazena uma coleção de valores exclusivos de qualquer tipo. Para criar um novo vazio Set
, você usa a seguinte sintaxe:
let setObject = new Set();
Linguagem de código: JavaScript ( javascript )
O Set
construtor também aceita um objeto iterável opcional . Se você passar um objeto iterável para o Set
construtor, todos os elementos do objeto iterável serão adicionados ao novo conjunto:
let setObject = new Set(iterableObject);
Linguagem de código: JavaScript ( javascript )
Set
Métodos úteis
O Set
objeto fornece os seguintes métodos úteis:
add(value)
– acrescenta um novo elemento com um valor especificado ao conjunto. Ele retorna oSet
objeto, portanto, você pode encadear este método com outroSet
método.clear()
– remove todos os elementos doSet
objeto.delete(value)
– exclui um elemento especificado pelo valor.entries()
– retorna um novoIterator
que contém um array de[value, value]
.forEach(callback [, thisArg])
– invoca um retorno de chamada em cada elemento doSet
com othis
valor definidothisArg
em cada chamada.has(value)
– retornatrue
se um elemento com um determinado valor está no conjunto oufalse
não.keys()
– é o mesmo quevalues()
função.[@@iterator]
– retorna um novoIterator
objeto que contém valores de todos os elementos armazenados no pedido de inserção.
Set
Exemplos de JavaScript
Crie um novo conjunto a partir de um array
O exemplo a seguir mostra como criar um novo Set a partir de um array .
let chars = new Set(['a', 'a', 'b', 'c', 'c']);
Linguagem de código: JavaScript ( javascript )
Todos os elementos do conjunto devem ser únicos, portanto, contém chars
apenas 3 elementos distintos a
e b
.c
console.log(chars);
Linguagem de código: JavaScript ( javascript )
Saída:
Set { 'a', 'b', 'c' }
Linguagem de código: JavaScript ( javascript )
Quando você usa o typeof
operador para chars
, ele retorna object
.
console.log(typeof(chars));
Linguagem de código: JavaScript ( javascript )
Saída:
object
O chars
conjunto é uma instância do Set
tipo, portanto a instrução a seguir retorna true
.
let result = chars instanceof Set;
console.log(result);
Linguagem de código: JavaScript ( javascript )
Obtenha o tamanho de um conjunto
Para obter o número de elementos que o conjunto contém, você usa a size
propriedade do Set
objeto:
let size = chars.size;
console.log(size);// 3
Linguagem de código: JavaScript ( javascript )
Adicionar elementos a um conjunto
Para adicionar um elemento ao conjunto, você usa o add()
método:
chars.add('d');
console.log(chars);
Linguagem de código: JavaScript ( javascript )
Saída:
Set { 'a', 'b', 'c', 'd' }
Linguagem de código: JavaScript ( javascript )
Como o add()
método pode ser encadeado, você pode adicionar vários itens a um conjunto usando uma instrução chain:
chars.add('e')
.add('f');
Linguagem de código: JavaScript ( javascript )
Verifique se um valor está no conjunto
Para verificar se um conjunto possui um elemento específico, você usa o has()
método. O has()
método retorna true
se o conjunto contém o elemento, caso contrário, ele retorna false
. Como o chars
conjunto contém 'a'
, a seguinte instrução retorna true
:
let exist = chars.has('a');
console.log(exist);// true
Linguagem de código: JavaScript ( javascript )
A instrução a seguir retorna false
porque o chars
conjunto não contém o 'z'
valor.
exist = chars.has('z');
console.log(exist); // false
Linguagem de código: JavaScript ( javascript )
Remover elementos de um conjunto
Para excluir um elemento especificado de um conjunto, você usa o delete()
método. A instrução a seguir exclui o 'f'
valor do chars
conjunto.
chars.delete('f');
console.log(chars); // Set {"a", "b", "c", "d", "e"}
Linguagem de código: JavaScript ( javascript )
Saída:
Set { 'a', 'b', 'c', 'd', 'e' }
Linguagem de código: JavaScript ( javascript )
O delete()
método retorna true
indicando que o elemento foi removido com sucesso. Para excluir todos os elementos de um conjunto, você usa o clear()
método:
chars.clear();
console.log(chars); // Set{}
Linguagem de código: JavaScript ( javascript )
Loop dos elementos de um conjunto JavaScript
Um objeto Set mantém a ordem de inserção de seus elementos, portanto, quando você itera sobre seus elementos, a ordem dos elementos é a mesma da ordem inserida. Suponha que você tenha um conjunto de funções de usuário conforme a seguir.
let roles = new Set();
roles.add('admin')
.add('editor')
.add('subscriber');
Linguagem de código: JavaScript ( javascript )
O exemplo a seguir usa o loop for…of para iterar sobre o conjunto de caracteres.
for (let role of roles) {
console.log(role);
}
Linguagem de código: JavaScript ( javascript )
Saída:
admin
editor
subscriber
O Set
também fornece métodos keys(),
values(),
e entries()
como Map . No entanto, as chaves e os valores Set
são idênticos. Por exemplo:
for (let [key, value] of roles.entries()) {
console.log(key === value);
}
Linguagem de código: JavaScript ( javascript )
Saída
true
true
true
Linguagem de código: JavaScript ( javascript )
Invoque uma função de retorno de chamada em cada elemento de um conjunto
Se quiser invocar um retorno de chamada em cada elemento de um conjunto, você pode usar o forEach()
método.
roles.forEach(role => console.log(role.toUpperCase()));
Linguagem de código: JavaScript ( javascript )
Conjuntos Fracos
A WeakSet
é semelhante a a, Set
exceto que contém apenas objetos. Como os objetos em a WeakSet
podem ser automaticamente coletados como lixo, a WeakSet
não possui size
propriedade. Assim como a WeakMap
, você não pode iterar elementos de a WeakSet
, portanto, descobrirá que WeakSet raramente é usado na prática. Na verdade, você só usa a WeakSet
para verificar se um valor especificado está no conjunto. Aqui está um exemplo:
let computer = {type: 'laptop'};
let server = {type: 'server'};
let equipment = new WeakSet([computer, server]);
if (equipment.has(server)) {
console.log('We have a server');
}
Linguagem de código: JavaScript ( javascript )
Saída
We have a server
Neste tutorial, você aprendeu sobre o Set
objeto JavaScript e como manipular seus elementos.