No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

ES6: set-add

17/35
Recursos

Set es una nueva estructura de datos para almacenar elementos 煤nicos, es decir, sin elementos repetidos.

C贸mo utilizar los Sets

Para iniciar un Set, se debe crear una instancia de su clase a partir de un iterable. Generalmente, un iterable es un array.

const set = new Set(iterable)

C贸mo manipular los Sets

Para manipular estas estructuras de datos, existen los siguientes m茅todos:

  • 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.

Contribuci贸n creada por Andr茅s Guano (Platzi Contributor).

Aportes 29

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

Si llegaste aqu铆 como yo, sin saber que son los Map y los Set, te dejo este enlace para que puedas comprender lo que son.

Explicaci贸n: https://www.digitalocean.com/community/tutorials/understanding-map-and-set-objects-in-javascript-es

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 }

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' }
*/

ES6: Set-add

En ECMAScript 6, se introdujo una nueva caracter铆stica llamada 鈥淪et鈥. Un 鈥淪et鈥 es una estructura de datos que te permite almacenar un conjunto de valores 煤nicos, lo que significa que no puede haber duplicados en un 鈥淪et鈥. La operaci贸n 鈥渁dd鈥 en un 鈥淪et鈥 se utiliza para agregar elementos nuevos.

Imagina que tienes una colecci贸n de elementos y quieres asegurarte de que no haya duplicados. Un 鈥淪et鈥 es perfecto para esta situaci贸n. Cuando usas el m茅todo 鈥渁dd鈥, puedes insertar un nuevo elemento en el 鈥淪et鈥. Sin embargo, si ese elemento ya existe en el 鈥淪et鈥, 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 鈥淪et鈥 y el m茅todo 鈥渁dd鈥 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 鈥淪et鈥 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 鈥渁dd鈥 en un 鈥淪et鈥 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. 馃懆鈥嶐煉

// 驴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.

鉁煢 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

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.

//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 鈥淪et鈥. 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);> 

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.

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

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' }

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.