O guia para iniciantes em JavaScript Set Type no ES6

Resumo : neste tutorial, você aprenderá sobre o Setobjeto JavaScript que permite gerenciar efetivamente uma coleção de valores exclusivos de qualquer tipo.

Introdução ao Setobjeto JavaScript

ES6 fornece um novo tipo Setque 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 Setconstrutor também aceita um objeto iterável opcional . Se você passar um objeto iterável para o Setconstrutor, todos os elementos do objeto iterável serão adicionados ao novo conjunto:

let setObject = new Set(iterableObject);Linguagem de código:  JavaScript  ( javascript )

SetMétodos úteis

O Setobjeto fornece os seguintes métodos úteis:

• add(value)– acrescenta um novo elemento com um valor especificado ao conjunto. Ele retorna o Setobjeto, portanto, você pode encadear este método com outro Setmétodo.
• clear()  – remove todos os elementos do Setobjeto.
• delete(value)– exclui um elemento especificado pelo valor.
• entries()– retorna um novo Iteratorque contém um array de  [value, value].
• forEach(callback [, thisArg])– invoca um retorno de chamada em cada elemento do Setcom o thisvalor definido thisArgem cada chamada.
• has(value)– retorna truese um elemento com um determinado valor está no conjunto ou falsenão.
• keys()– é o mesmo que values()função.
• [@@iterator]– retorna um novo Iteratorobjeto que contém valores de todos os elementos armazenados no pedido de inserção.

SetExemplos 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 charsapenas 3 elementos distintos ae 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   typeofoperador para chars, ele retorna object.

console.log(typeof(chars));Linguagem de código:  JavaScript  ( javascript )

Saída:

object

O  charsconjunto é uma instância do Settipo, 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 sizepropriedade do Setobjeto:

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 truese o conjunto contém o elemento, caso contrário, ele retorna false. Como o   charsconjunto 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 falseporque o   charsconjunto não contém o 'z'valor.

exist = chars.has('z');
console.log(exist); // falseLinguagem 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   charsconjunto.

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 trueindicando 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 Settambém fornece métodos keys(), values(),e entries()como Map . No entanto, as chaves e os valores Setsã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
trueLinguagem 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, Setexceto que contém apenas objetos. Como os objetos em a WeakSetpodem ser automaticamente coletados como lixo, a WeakSetnão possui sizepropriedade. 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 WeakSetpara 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 Setobjeto JavaScript e como manipular seus elementos.