Conjuntos JavaScript

Índice

    Mostrar índice

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

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

Métodos de conjunto essenciais

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 no Conjunto

forEach()

Invoca um retorno de chamada para cada elemento do Conjunto

values()

Retorna um iterador com todos os valores em um Conjunto

size

Retorna o número de elementos 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 método novo 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:

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 a Set
const letters = new Set();

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

// 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 →

O método forEach()

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

Exemplo

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

// List all Elements
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 novo objeto iterador contendo todos os valores em um Conjunto:

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

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

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>