Método ADD en ECMAScript 6: Agregando Elementos a un Set

Clase 17 de 35 • Curso de ECMAScript: Historia y Versiones de JavaScript

Resumen

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

Christopher Andrés Guano Valencia

student•

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 ]

Sergio Javier Lopez Olivera

student•

Saludos Christopher, podrías por favor, explicar como el operador de propagacion y Set eliminan los números repetidos? Gracias de antemano!

Christopher Andrés Guano Valencia

student•

Se realiza la conversión de Array a Set. Set es una estructura que no admite elementos repetidos. Por lo tanto, tenemos un Set con los elementos del array sin repetidos.
Como tenemos una estructura Set, debemos convertirlo a Array.
El operador de propagación, como su nombre lo indica, propaga los elementos de un iterable en otro iterable. Los Sets son iterables como los Arrays, por lo que sus elementos pueden propagarse dentro de un iterable array [... new Set(array)]. Lo que se asemeja a propagar los elementos de un array dentro de otro array.

const array = [1, 1, 2, 2, 3, 4, 4, 5]
// 1. Convertir de Array a Set
const set = new Set(array) // Set(5) {1, 2, 3, 4, 5}
// 2. Convertir de Set a Array
const arraySinRep = Array.from(set) // [1, 2, 3, 4, 5]
// 3. Propagar los elementos del Array dentro de otro Array
const sinRepetidos = [ ...arraySinRep] // [1, 2, 3, 4, 5]

¡Nunca pares de aprender! 🙌

Catriel Perez

student•

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

Irving Caamal

student•

Oh sí eso es algo súper útil!! buena observación, igual cabe destacar que esto no funciona by default para los Array de objetos a menos que los tengas guardados con un Key especifico

Josue Cerron Tuesta

student•

O sino también puedes usar Symbols Irving.

Magdiel Linares

student•

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

Teo Zavala

student•

gracias, buen aporte

Andy Simancas

student•

Buen aporte! gracias!

Yuli Alexandra Pulido Castañeda

student•

Hola Chic@s :)

set-add

const list = new Set();

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

console.log(list);

Edgar López Laynez

student•

Soe Lucas

student•

Alguna aplicación en el mundo real? Como un lugar concreto donde sea usada esta función, como ser insertado en el botón de bñusqueda de KAYAK, por poner un ejemplo. Aprendería más rápido si viera más ejemplos aplicados del mundo real...

Juan Carlos Montilla Sánchez

student•

Hola, Soeluc.

Puedes buscar ejercicios en javascript que hagan algún objetivo en específico, como: buscar un usuario dentro de un objeto y eliminarno o agregar uno nuevo y/o hacer que el array que te pase el usuario retorne los valores sin estar duplicados.

Eso depende también del contexto en como lo apliques.

Codesignal es una página con ejercicios que te piden en el mundo laborar o entrevistas de trabajo.

Saludos.

Irving Caamal

student•

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

Josue Cerron Tuesta

student•

Gracias bro! Yo también uso esa página para resolver dudas.

Agu Damonte

student•

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 }

Luis Alfredo Suarez

student•

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. 👨‍💻

Edgar Roy Huaman Pumachapi

student•

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

Maria Gabriela Rodriguez Cuevas

student•

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

Javier Núñez

student•

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.

Elcira Ibarra

student•

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

Porfirio González López

student•

También hiciste que "los objetos tuvieran nombre" no se si así se le denomina.

CRISTIAN DARIO AGUDELO PORRAS

student•

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.

Andrés Soret Chacin

student•

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.

Cristian Acalo

student•

✨🦄 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

Matías Wasiak

student•

// ¿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

Facundo Velastiquí Domene

student•

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

Alejandro Mejia Escobar

student•

Por lo que veo en la consola las listas que se crean con Set son un tipo de objeto, con valores sin atributos, osea más parecido a un array... ¿Qué son y para qué sirven las listas?

Francisco Ponce

student•

En JavaScript, un Set es un objeto que representa una colección de valores únicos. Al igual que los arrays, los Sets te permiten almacenar múltiples valores en una sola estructura de datos, pero a diferencia de los arrays, los Sets no permiten valores repetidos y no tienen un orden específico.

Los Sets son útiles cuando necesitas almacenar un conjunto de valores únicos y hacer operaciones como verificar si un valor está presente en la colección o agregar y eliminar valores de la misma. Además, los Sets pueden ser utilizados para eliminar duplicados de un array y para hacer operaciones de conjunto como la unión, intersección y diferencia.

Carlos Eduardo Menendez Martinez

student•

Que ventajas tiene usar set por sobre arrays???

Cristian Ignacio Zuñiga Medina

student•

Segun me he informado aqui mismo en la seccion de comentarios de esta clase, te sirve cuando quieres tener un array que no tenga valores duplicados, considerando que el set es un objeto que tiene una coleccion con estos valores

Kyb3r Cipher

student•

Me encanta este curso

Método ADD en ECMAScript 6: Agregando Elementos a un Set

Introducción

Historia y evolución de ECMAScript y JavaScript

Actualización y Propuestas en ECMAScript y JavaScript

Configuracion

Configuración de Herramientas para Desarrollo en JavaScript Avanzado

¿Qué se implementó en ES6?

Características de ECMAScript 6 para JavaScript Moderno

Template Literals y Multilínea en ECMAScript 6

Asignación de Parámetros por Defecto en ECMAScript 6

Desestructuración de Arrays y Objetos en JavaScript ECMAScript 6

Uso del Operador de Propagación y Parámetros Rest en JavaScript

Playground: Combina objetos JSON con el Spread Operator

Asignación y manejo de objetos en ECMAScript 6

Promesas en JavaScript: Manejo del Asincronismo con ECMAScript 6

Clases y Herencia en JavaScript: Sintaxis y Aplicaciones

Uso de Módulos en JavaScript ES6

Playground: Obtén una lista de películas

Generators en JavaScript: Cómo implementar y usar iteradores personalizados

Playground: Generador de identificadores para michis