Conjuntos JavaScript

Índice

    Mostrar índice

Um conjunto JavaScript é uma coleção de valores exclusivos.

Cada valor só pode ocorrer uma vez em um Conjunto.

Um conjunto pode conter qualquer valor de qualquer tipo de dados.

Definir métodos

new Set()

Cria um novo conjunto

add()

Adiciona um novo elemento ao Conjunto

delete()

Remove um elemento de um conjunto

has()

Retorna verdadeiro se existir um valor

clear()

Remove todos os elementos de um conjunto

forEach()

Invoca um retorno de chamada para cada elemento

values()

Retorna um Iterador com todos os valores de um Conjunto

keys()

O mesmo que valores()

entries()

Retorna um Iterador com os pares [valor,valor] de um Conjunto

size

Retorna os elementos numéricos em um conjunto

Como criar um conjunto

Você pode criar um conjunto JavaScript por:

  • Passando um array para new Set()

  • Crie um novo conjunto e use add() para adicionar valores

  • Crie um novo conjunto e use add() para adicionar variáveis

O novo método Set()

Passe um Array para o construtor new Set():

Exemplo

// Create a Set
const letters = new Set(["a","b","c"]);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Create a Set from an Array:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

Crie um conjunto e adicione valores literais:

Exemplo

// Create a Set
const letters = new Set();

// Add Values to the Set
letters.add("a");
letters.add("b");
letters.add("c");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Add values to a Set:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set();

// Add Values to the Set
letters.add("a");
letters.add("b");
letters.add("c");

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

Crie um conjunto e adicione variáveis:

Exemplo

// Create Variables
const a = "a";
const b = "b";
const c = "c";

// Create a Set
const letters = new Set();

// Add Variables to the Set
letters.add(a);
letters.add(b);
letters.add(c);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Add variables to a Set:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set();

// Create Variables
const a = "a";
const b = "b";
const c = "c";

// Add the Variables to the Set
letters.add(a);
letters.add(b);
letters.add(c);

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

O método add()

Exemplo

letters.add("d");
letters.add("e");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Adding new elements to a Set:</p>

<p id="demo"></p>

<script>
// Create a new Set
const letters = new Set(["a","b","c"]);

// Add a new Element
letters.add("d");
letters.add("e");

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

Se você adicionar elementos iguais, apenas o primeiro será salvo:

Exemplo

letters.add("a");
letters.add("b");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Adding equal elements to a Set:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set();

// Add values to the Set
letters.add("a");
letters.add("b");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

O método forEach()

O método forEach() invoca uma função para cada elemento Set:

Exemplo

// Create a Set
const letters = new Set(["a","b","c"]);

// List all entries
let text = "";
letters.forEach (function(value) {
  text += value;
})

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>forEach() calls a function for each element:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// List all Elements
let text = "";
letters.forEach (function(value) {
  text += value + "<br>";
})

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

O método values()

O método values() retorna um objeto Iterator contendo todos os valores em um Set:

Exemplo

letters.values()   // Returns [object Set Iterator]

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Set.values() returns a Set Iterator:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// Display set.size
document.getElementById("demo").innerHTML = letters.values();
</script>

</body>
</html>

Agora você pode usar o objeto Iterator para acessar os elementos:

Exemplo

// Create an Iterator
const myIterator = letters.values();

// List all Values
let text = "";
for (const entry of myIterator) {
  text += entry;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Iterating Set values:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// List all Elements
let text = "";
for (const x of letters.values()) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

O método keys()

Um conjunto não possui chaves.

keys() retorna o mesmo que valores().

Isso torna os Sets compatíveis com o Maps.

Exemplo

letters.keys()   // Returns [object Set Iterator]

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Set.keys() returns a Set Iterator:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// Display set.size
document.getElementById("demo").innerHTML = letters.keys();
</script>

</body>
</html>

O método entries()

Um conjunto não possui chaves.

entries() retorna pares [valor,valor] em vez de pares [chave, valor].

Isso torna os Sets compatíveis com o Maps:

Exemplo

// Create an Iterator
const myIterator = letters.entries();

// List all Entries
let text = "";
for (const entry of myIterator) {
  text += entry;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>entries() Returns an Iterator with [value,value] pairs from a Set:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// List all entries
const iterator = letters.entries();
let text = "";
for (const entry of iterator) {
  text += entry + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Conjuntos são objetos

Para um conjunto, typeof retorna o objeto:

typeof letters;      // Returns object

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets Objects</h2>
<p>The typeof operator returns object:</p>

<p id="demo"></p>

<script>
// Create a new Set
const letters = new Set(["a","b","c"]);

// Display typeof
document.getElementById("demo").innerHTML = typeof letters;
</script>

</body>
</html>

Para um conjunto, instanceof Set retorna verdadeiro:

letters instanceof Set;  // Returns true

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>The instanceof operator returns true:</p>

<p id="demo"></p>

<script>
// Create a new Set
const letters = new Set(["a","b","c"]);

// Display typeof
document.getElementById("demo").innerHTML = letters instanceof Set;
</script>

</body>
</html>