Conjuntos de JavaScript

Tabla de contenido

    Mostrar tabla de contenidos

Un conjunto de JavaScript es una colección de valores únicos.

Cada valor sólo puede aparecer una vez en un Conjunto.

Métodos de conjuntos esenciales

new Set()

Crea un nuevo conjunto

add()

Agrega un nuevo elemento al conjunto.

delete()

Elimina un elemento de un conjunto

has()

Devuelve verdadero si existe un valor en el conjunto.

forEach()

Invoca una devolución de llamada para cada elemento del conjunto.

values()

Devuelve un iterador con todos los valores de un conjunto.

size

Devuelve el número de elementos de un conjunto.

Cómo crear un conjunto

Puede crear un conjunto de JavaScript mediante:

  • Pasar una matriz a new Set()

  • Cree un nuevo conjunto y use add() para agregar valores

  • Cree un nuevo conjunto y use add() para agregar variables

El método new Set()

Pase una matriz al constructor new Set():

Ejemplo

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

Pruébelo usted mismo →

<!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>

Crea un conjunto y agrega valores:

Ejemplo

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

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

Pruébelo usted mismo →

<!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>

Cree un conjunto y agregue variables:

Ejemplo

// 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);

Pruébelo usted mismo →

<!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>

El método add()

Ejemplo

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

Pruébelo usted mismo →

<!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>

Si añades elementos iguales, sólo se guardará el primero:

Ejemplo

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

Pruébelo usted mismo →

<!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>

El método forEach()

El método forEach() invoca (llama) una función para cada elemento Set:

Ejemplo

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

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

Pruébelo usted mismo →

<!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>

El método valores()

El método values() devuelve un nuevo objeto iterador que contiene todos los valores de un conjunto:

Ejemplo

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

Pruébelo usted mismo →

<!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>

Ahora puedes usar el objeto Iterador para acceder a los elementos:

Ejemplo

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

Pruébelo usted mismo →

<!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>