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.

Un conjunto puede contener cualquier valor de cualquier tipo de datos.

Establecer métodos

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

clear()

Elimina todos los elementos de un conjunto.

forEach()

Invoca una devolución de llamada para cada elemento.

values()

Devuelve un iterador con todos los valores de un conjunto.

keys()

Igual que los valores()

entries()

Devuelve un iterador con los pares [valor,valor] de un conjunto

size

Devuelve los elementos numéricos 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 nuevo método 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>

Cree un conjunto y agregue valores literales:

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

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 una función para cada elemento Set:

Ejemplo

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

// List all entries
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 values()

El método values() devuelve un 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

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

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

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>

El método keys()

Un Set no tiene claves.

keys() devuelve lo mismo que valores().

Esto hace que los conjuntos sean compatibles con Maps.

Ejemplo

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

Pruébelo usted mismo →

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

El método entries()

Un Set no tiene claves.

entries() devuelve pares [valor,valor] en lugar de pares [clave,valor].

Esto hace que los conjuntos sean compatibles con Maps:

Ejemplo

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

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

Pruébelo usted mismo →

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

Los conjuntos son objetos

Para un conjunto, typeof devuelve el objeto:

typeof letters;      // Returns object

Pruébelo usted mismo →

<!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 un conjunto, instanceof Set devuelve verdadero:

letters instanceof Set;  // Returns true

Pruébelo usted mismo →

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