ES6: set-add

Cómo quitar los elementos repetidos en una sola línea

👨‍💻 Para crear un array sin elementos repetidos, podemos utilizar Set y el operador de propagación de la siguiente manera:

const array = [1, 1, 2, 2, 3, 4, 4, 5]

const sinRepetidos = [ ... new Set(array)]
console.log(sinRepetidos) // [ 1, 2, 3, 4, 5 ]

Set es parecido al array, pero una de las diferencias con el array es que impide agregar elementos repetidos

Hola Chic@s 😃

• set-add

const list = new Set();

list.add("item 1");
list.add("item 2").add("item 3");

console.log(list);

Metodos utiles de Set:

• add
• has
• delete
• size

const set = new Set();
set.add('item 1');                  	// Set ['item 1']
set.add('item 2').add('item 3'); // Set ['item 1','item 				2','item 3']
set.has('item 2');                 // true
set.delete('item 1');             // Set ['item 2','item 3', 1]                    
set.size();                        // 2

Algo que siento es importante saber y destacar acerca de Map/Set es que es básicamente una implementación de la estructura de datos hash-map ya que se basa en guardar nuestros datos como Key-Value.

Te dejo un recurso/lectura donde se habla de esto a fondo
https://javascript.info/map-set

SET - Un Set es una colección de elementos sin un orden en particular, en donde cada elemento puede aparecer una sola vez. Es una estructura muy similar a los arrays, pero con la particularidad de que cada elemento que posee es único.

En JS los sets ya están implementados mediante la clase Set, por lo tanto, si queremos crear un nuevo set debemos instanciarlo utilizando la palabra reservada new Set()

var array = [1,1,1,2,3,4,4,5,5,3]
var set1  = new Set(array)
console.log(array)   // [ 1,1,1,2,3,4,4,5,5,3 ]
console.log(set1)   // Set { 1, 2, 3, 4, 5 }

ES6: Set-add

En ECMAScript 6, se introdujo una nueva característica llamada “Set”. Un “Set” es una estructura de datos que te permite almacenar un conjunto de valores únicos, lo que significa que no puede haber duplicados en un “Set”. La operación “add” en un “Set” se utiliza para agregar elementos nuevos.

Imagina que tienes una colección de elementos y quieres asegurarte de que no haya duplicados. Un “Set” es perfecto para esta situación. Cuando usas el método “add”, puedes insertar un nuevo elemento en el “Set”. Sin embargo, si ese elemento ya existe en el “Set”, no se agregaría de nuevo. Esto es útil para mantener una lista de elementos únicos.

Aquí hay un ejemplo simple de cómo podrías usar “Set” y el método “add” en JavaScript ES6:

// Crear un nuevo Set
const miSet = new Set();

// Agregar elementos usando el método add
miSet.add(10);
miSet.add(20);
miSet.add(10); // No se agregará porque ya existe

// Tamaño del Set después de agregar elementos
console.log(miSet.size); // Esto mostrará 2, ya que solo hay dos elementos únicos

// También puedes agregar elementos en una sola línea
miSet.add(30).add(40);

// Iterar a través de los elementos del Set usando un ciclo for...of
for (const elemento of miSet) {
  console.log(elemento);
}

En este ejemplo, el “Set” llamado miSet contiene los elementos 10, 20, 30 y 40. Sin embargo, como notarás, el valor 10 solo se agregó una vez, a pesar de que se intentó agregar dos veces. Esto demuestra cómo el método “add” en un “Set” garantiza que los elementos sean únicos.

Ejemplos utilizando Set()

Aquí tienes algunos ejemplos adicionales de cómo puedes usar la estructura de datos Set en JavaScript ES6:

Ejemplo 1: Eliminando elementos de un Set

Puedes usar el método delete para eliminar elementos de un Set.

const numeros = new Set([1, 2, 3, 4, 5]);

console.log(numeros.size); // Muestra 5

numeros.delete(3); // Elimina el elemento 3 del Set

console.log(numeros.size); // Ahora muestra 4

Ejemplo 2: Verificando la existencia de un elemento en un Set

Puedes usar el método has para verificar si un elemento existe en un Set.

const colores = new Set(['rojo', 'verde', 'azul']);

console.log(colores.has('verde')); // Devuelve true
console.log(colores.has('amarillo')); // Devuelve false

Ejemplo 3: Convirtiendo un Array en un Set y viceversa

Puedes convertir fácilmente entre un Array y un Set utilizando los constructores y métodos respectivos.

const arrayDeNumeros = [2, 4, 6, 8, 10];
const setDeNumeros = new Set(arrayDeNumeros);

console.log(setDeNumeros.size); // Muestra 5

const arrayDesdeSet = Array.from(setDeNumeros);
console.log(arrayDesdeSet); // Muestra [2, 4, 6, 8, 10]

Ejemplo 4: Trabajando con Objetos en un Set

Los Set también pueden almacenar objetos.

const personas = new Set();

const persona1 = { nombre: 'Juan', edad: 30 };
const persona2 = { nombre: 'María', edad: 25 };

personas.add(persona1);
personas.add(persona2);

console.log(personas.size); // Muestra 2

// Puedes iterar y acceder a los objetos dentro del Set
for (const persona of personas) {
  console.log(persona.nombre, persona.edad);
}

Estos son solo algunos ejemplos de cómo puedes utilizar la estructura de datos Set en JavaScript ES6 para almacenar y manipular conjuntos únicos de valores.

Esta estructura me resulta interesante! 🤔

Espero sea de utilidad la información. 👨‍💻

Seria más productivo si, se viera ejemplos prácticos. Eso ayudaria muchísimo.

📇 Archivos del Proyecto 📇

Pasos 📌

• • Dentro de la carpeta es6, crear el archivo llamado: 10-set-add.js
  • • ◦ El código queda:

//Compilar: seleccionar el código + click derecho + Run Code

//Ejercicio #1
const list = new Set();

list.add('item 1');
list.add('item 2').add('item 3');

console.log(list);

/*output:
Set(3) { 'item 1', 'item 2', 'item 3' }
*/

El método add( ) inserta un nuevo elemento con un valor específico en un objeto seleccionado, si este valor ya exisite en el objeto, éste nuevo elemento no se inserta.

Hola comunidad! probé guardar en una variable lo que hicimos con list.add y luego a esa variable agregarle el add y funciona.

const list = new Set();

const result = 
list.add('item 1');
list.add('item 2').add('item 3');

console.log(list);
console.log('result', result);

result.add('item 4');

console.log('result', result);

//Set(3) { 'item 1', 'item 2', 'item 3' }
//result Set(3) { 'item 1', 'item 2', 'item 3' }
//result Set(4) { 'item 1', 'item 2', 'item 3', 'item 4' }

Para quien hizo el curso de Programacion basica en JavaScritp recordara el juego Mokepon, en el cual, el rival aleatoriamente elegia 5 ataques, los cuales no debian repetirse, en su momento este asunto no se resolvio.
En su momento lo resolvi, usando ciclos for y condicionales, pero esta herramienta de SET, hubiera sido muy util en esa situacion. mi tarea será re-escribir mi logica implementando esta herramienta.

Las razones para usar ES6 son muchas, en primer lugar la optimización de los distintos navegadores hace que ES6 sea increíblemente rápido, un requisito fundamental para una página web. ES6 también admite la gestión de clases y la introducción de funciones de flecha simplifica muchos aspectos de la programación. La adición de plantillas en cadenas simplifica la lectura del código y con ES6 es posible resolver los mismos problemas que se resolvieron con CoffeeScript pero de mejor manera. CoffeeScript es un lenguaje de programación creado con la intención de resolver problemas anteriores de Javascript.

La lista podría ser aún más larga, pero el mensaje principal es este: ES6 no solo ha sido capaz de corregir los errores del pasado sino que ha conseguido dar nuevas herramientas y simplificar la vida de los desarrolladores, y por ello incluso hoy, años después , se toma como punto de referencia.

✨🦄 Una cosa que se debe recalcar

sobre Set, es que si bien este permite el control sobre elementos repetidos, no se puede acceder a los elementos mediante una posición numérica.
Por ejemplo, si en un array normal queremos acceder al primer elemento, simplemente lo podemos hacer con:

let array = [1,2,3,4]
array[0] // 1

Pero en un Set esto no es posible. En su lugar podríamos recorrer el Set con un ciclo for of:

//Set y add
const list = new Set();

list.add('Item 1');
list.add('Item 2');
//Set no permite agregar elementos repetidos
list.add('Item 2');

let i = 0;
for (let element of list) {
    if (i == 0) {
    console.log(`[${i}] = ${element}`);
    i++;
  }
}

O en su lugar, transformar el Set a array para posteriormente acceder al elemento deseado por un index numérico.

const arrayFromSet = [...list];
console.log(arrayFromSet[0]); // Accede al primer elemento

// ¿Qué es un conjunto? 
// Un conjunto es una colección de valores únicos. Se puede crear un conjunto a partir de una matriz utilizando el operador de propagación (...). También se puede crear un conjunto utilizando la nueva palabra clave. 

// Ejemplo de creación de un conjunto a partir de un array utilizando el operador de dispersión (...) 
// lista constante = [1, 2, 3, 4, 5]; 
// const set = new Set([...lista]); 

// ¿Cuál es la diferencia entre un conjunto y un array? 
// Un conjunto es similar a una matriz pero no permite valores duplicados. Un conjunto es una colección desordenada de valores únicos. Un conjunto se puede iterar en el orden de inserción de los elementos.

const list = new Set();

list.add(1);
list.add(2);
// list.add(2).add(3).add(4).add(5);
list.add(3);
list.add(4);
list.add(5);

console.log(list); // Set { 1, 2, 3, 4, 5 }
console.log(list.has(1)); // true
console.log(list.has(6)); // false

Muy flojo el profesor explicando esta parte, literalmente no dijo nada que aporte valor.

//Crea un nuevo objeto Set.
const set = new Set();
//Añade value al objeto Set. Devuelve el objeto Set con el valor añadido.
set.add('item 1');                  
set.add('item 2').add('item 3').add('item 4').add('item 5'); 
set.has('item 2');  
//Devuelve el número de valores en el objeto Set.             
set.size;   
console.log(set);
set.size;
console.log(set.size);
//Elimina el elemento asociado a value
set.delete('item 3');                      
console.log(set);
console.log(set.size);
// //Devuelve un booleano que afirma si un elemento está presente con el valor dado en el objeto Set o no.
console.log(set.has('item 2'));
set.add('item 3'); 

// iterar sobre los elementos en Set
for (let item of set) 
console.log(item)//

// imprime en consola los elementos en el orden
for (let item of set.keys()) 
console.log(item)

// imprime en consola los elementos en el orden
for (let [key, value] of set.entries()) 
console.log(key)

// convertir el objeto Set en un objeto Array, con Array.from
const myArr = (Array.from(set))
console.log(myArr);

En ECMAScript 6 (también conocido como ES6 o ES2015), se introdujo un nuevo tipo de dato llamado “Set”. Un Set es una colección de valores únicos, lo que significa que no puede contener elementos duplicados.

El método add() se utiliza en conjunción con el objeto Set para agregar elementos a la colección. Aquí tienes un ejemplo de cómo se utiliza:

const mySet = new Set();

mySet.add(1);
mySet.add(2);
mySet.add(3);

console.log(mySet); // Set { 1, 2, 3 }

En este ejemplo, creamos un nuevo objeto Set llamado mySet. Luego, utilizamos el método add() para agregar los elementos 1, 2 y 3 al Set.

Es importante tener en cuenta que el método add() devuelve el objeto Set actualizado, lo que nos permite encadenar múltiples llamadas al método add(), si así lo deseamos:

const mySet = new Set();

mySet.add(1).add(2).add(3);

console.log(mySet); // Set { 1, 2, 3 }

Además, el método add() realiza una verificación automática para evitar agregar elementos duplicados. Si intentamos agregar el mismo elemento varias veces, solo se agregará una vez al Set:

const mySet = new Set();

mySet.add(1);
mySet.add(2);
mySet.add(1); // Intento de agregar un elemento duplicado

console.log(mySet); // Set { 1, 2 }

En este caso, el segundo intento de agregar el número 1 al Set es ignorado, ya que el elemento ya existe en la colección.

El objeto Set también proporciona otros métodos útiles, como delete() para eliminar un elemento del Set, has() para verificar si un elemento existe en el Set y clear() para eliminar todos los elementos del Set.

</*SET-ADD 
Is a similar method to the add method of the Set object.
Is a similar method use in python list

*/

const array1 = [1, 2, 3, 4, 5];
const array2 = [6, 7, 8, 9, 10];
const array3 = [11, 12, 13, 14, 15];

/* Methos for set
    add(value): añade un nuevo valor.
    delete(value): elimina un elemento que contiene el Set, retorna un booleano si existía o no el valor.
    has(value): retorna un booleano si existe o no el valor dentro del Set.
    clear(value): elimina todos los valores del Set.
    size: retorna la cantidad de elementos del Set.
*/
const list = new Set();
//add
list.add(array1);
list.add(array2);
list.add(array3);
console.log(list);

//delete
list.delete(array1);
console.log(list);

//has
list.has(list);
console.log(list);

//size
const size_list = list.size;
console.log(size_list);

//clear
list.clear();
//Print list 
console.log(list);


//Not reapeat values for use Set method
const array_mutable = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5];
const list2 = new Set();
const list_not_repeat = [new Set(array_mutable)];
console.log(list_not_repeat);> 

waos

Les comparto este recurso, me ayud mucho a entenderlo e interorizar esta clase:

https://www.w3schools.com/js/js_object_sets.asp

Mi resumen

17/35 ES6: set-add

Set es una estructura de datos que permite almacenar elementos únicos sin repetición, lo que significa que no puede haber elementos duplicaod en un set. Para crear un set, se utiliza la clase set y se le pasa un iterable como parámetro, generalmente un array. Además, para manipular los elementos del Set, se pueden utilizar los siguientes métodos:

• add
• delete
• has
• clear
• size

// Crear un Set de nombres de estudiantes
const listaAsistencia = new Set(['Ana', 'Pedro', 'Luis', 'Ana']);

// Agregar un nombre al Set
listaAsistencia.add('Juan');

// Eliminar un nombre del Set
listaAsistencia.delete('Luis');

// Verificar si un nombre se encuentra en el Set
if (listaAsistencia.has('Pedro')) {
  console.log('Pedro asistió a clase');
}

// Obtener la cantidad de estudiantes que asistieron a clase
const cantidadEstudiantes = listaAsistencia.size;
console.log(`Asistieron ${cantidadEstudiantes} estudiantes`);

// Limpiar todos los nombres del Set
listaAsistencia.clear();

link a la documentación del objecto Set en JavaScript

const my_set = new Set();

my_set.add('item 1');
my_set.add('item 2');
my_set.add('item 3');

// no se añaden porque Set no permite valores repetidos.
my_set.add('item 1');
my_set.add('item 1');

SACARLE VENTAJA

De nuevo JavaScript copiandose de Python con los sets jajaja