Novedades ES6

Funciones con parámetros Rest

Operador Spread

Arrow Functions

Nombres de métodos abreviados

Declaración de clases

Herencia en ES6

Definición de Getters y Setters

Definición de métodos estáticos

Estructura repetitiva 'for of'

Modulos en ES6

Map en ES6

Set en ES6

WeakSet y WeakMap en ES6

Novedades de ES6 en Arrays

Novedades en ES6 - API fetch

Novedades de ES6 - Set

El objeto Set permite almacenar valores únicos de cualquier tipo, incluso valores primitivos u referencias a objetos.

Los objetos Set son colecciones de valores. Se puede iterar sus elementos en el orden de su inserción. Un valor en un Set sólo puede estar una vez; éste es único en la colección Set.

new Set([iterable]);

Parámetros

iterable Si un objeto iterable es pasado, todos sus elementos serán añadidos al nuevo Set. Si no se especifica este parámetro, o si su valor es null, el nuevo Set estará vacío.

Igualdad de valores

Ya que cada valor en el Set tiene que ser único, la igualdad del valor será comprobada y esta igualdad no se basa en el mismo algoritmo usado en el operador ===. Específicamente, para Sets, +0 (el cual es estrictamente igual a -0) y -0 son valores distintos. Sin embargo, esto ha cambiado en la última especificación ECMAScript 6. Iniciando con Gecko 29.0 (Firefox 29 / Thunderbird 29 / SeaMonkey 2.26) (error 952870) y un recent nightly Chrome, +0 y -0 son tratados como el mismo valor en objetos Set.

NaN y undefined también pueden ser almacenados en un Set. NaN es considerado igual que NaN (A pesar que NaN !== NaN).

Hemos visto en conceptos anteriores que JavaScript implementa los siguientes objetos:

Array
Map

Con ES6 se presenta el objeto llamado 'Set' que nos evita tener que implementar desde cero una estructura de datos tipo conjunto.

El objeto 'Set' permite almacenar una colección de elementos que pueden ser de tipo primitivo u objeto y que no se pueden repetir.

Creación de un conjunto (Set).

Podemos crear un Set vacío y posteriormente añadir elementos al conjunto mediante el método 'add':

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>

<body>
  <script>
    const conjunto1 = new Set();
    conjunto1.add("C");
    conjunto1.add("Pascal");
    conjunto1.add("PHP");
    conjunto1.add("Python");
	console.log(conjunto1); 
  </script>
</body>

</html>

Utilizamos el método log del objeto console para mostrar el contenido del mapa (recordar que en Chrome y FireFox debemos presionar la tecla 'F12' para que se muestre la ventana de la console):

Podemos crear un Set e inmediatamente pasar los datos iniciales en el constructor del mismo mediante un arreglo:

  <script>
    const conjunto1 = new Set(["C", "Pascal", "PHP", "Python"]);
     for(let elemento of conjunto1)
      document.write(`${elemento}
`);
  </script>

Verificar la existencia de un determinado valor y la cantidad de valores del Set.

Disponemos del método 'has' que nos retorna si el conjunto almacena un determinado valor.

Problema

Generar 10 números aleatorios comprendidos entre 1 y 50. Almacenar los mismos en un Set. Verificar luego si el conjunto tiene el valor 12.

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>

<body>
  <script>
    const conjunto1 = new Set();
    for (let x = 0; x < 10; x++)
      conjunto1.add(parseInt(Math.random() * 50) + 1);
    document.write(`La cantidad de números aleatorios distintos son ${conjunto1.size}<br>`)
    if (conjunto1.has(12))
      document.write("Si se generó el número 12")
    else
      document.write("No se generó el número 12")      
  </script>
</body>

</html>

Ver ejemplo anterior

Como un conjunto no puede almacenar valores repetidos luego si queremos saber la cantidad de números aleatorios distintos debemos acceder a la propiedad 'size' del 'Set':

    document.write(`La cantidad de números aleatorios distintos son ${conjunto1.size}<br>`)

El método 'has' retorna true si el conjunto almacena el dato que le pasamos como parámetro:

    if (conjunto1.has(12))

Eliminación de elementos del Set.

Podemos eliminar elementos mediante el método 'delete':

  <script>
    const conjunto1 = new Set(["C", "Pascal", "PHP", "Python"]);
    console.log(conjunto1.size);  // 4
    conjunto1.delete("Pascal");
    console.log(conjunto1.size);  // 3
  </script>

El método 'delete' retorna true si se eliminó la entrada en el Set y false en caso que le hayamos pasado un valor que no exista.

Para eliminar todos los elementos del conjunto disponemos del método 'clear':

  <script>
    const conjunto1 = new Set(["C", "Pascal", "PHP", "Python"]);
    console.log(conjunto1.size);  // 4
    conjunto1.clear();
    console.log(conjunto1.size);  // 0
  </script>

Recorrido de un Set.

Los elementos almacenado en el 'Set' mantienen el orden en que se agregaron.

Podemos recorrer un 'Set' mediante la estructura repetitiva 'for of':

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>

<body>
  <script>
    const conjunto1 = new Set(["C", "Pascal", "PHP", "Python"]);
    for(let elemento of conjunto1)
      document.write(`${elemento}<br>`);
  </script>
</body>

</html>

Ver ejemplo anterior

Al ejecutar el algoritmo podemos ver como recorrer el conjunto y recuperar en forma individual cada uno de los elementos que conforman el 'Set'.

El objeto Set igual que los objetos Array y Map dispone de un método 'forEach' para iterar sobre los elementos del 'Set':

  <script>
    const conjunto1 = new Set(["C", "Pascal", "PHP", "Python"]);
    mapa1.forEach((elemento) => document.write(`${elemento}<br>`));
  </script>