ES6 | Recopilación

Posted on by Rudeus Greyrat

ES6 es una serie de nuevas funciones añadidas a JavaScript. En la versión ES6 incluye nuevas colecciones de tipos de datos, por lo que ya no es necesario utilizar objetos y es más fácil implementar las cosas de forma sencilla. 
En la versión ES6, se introducen dos cosas nuevas en JavaScript. 
 

  • Mapa
  • Conjuntos

Mapas: los mapas son colecciones de claves y valores de cualquier tipo, en palabras simples, Map es una colección de pares clave-valor . Funciona como un objeto en JavaScript. Devuelve un mapa nuevo o vacío.
Sintaxis: 
 

var map = new Map();
Métodos Descripción
Tamaño de mapa() Determina el número de claves o valores en el mapa.
mapa.set() Establece el valor de la clave. Toma dos parámetros, la clave y el valor de la clave.
mapa.has() Comprueba si una clave está presente en el mapa o no y luego devuelve verdadero .
mapa.get() Toma un valor asociado con una clave. Si el valor no está disponible, entonces no está definido.
map.keys() Devuelve un iterador para todas las claves del mapa.
mapa.entradas() Devuelve una nueva array de iteradores que contiene un par clave-valor para cada elemento por orden de inserción.
mapa.valores() Devuelve un iterador para cada uno de los valores del mapa.
mapa.eliminar() Se utiliza para eliminar una entrada.
mapa.clear() Borra todos los pares clave-valor del mapa.
mapa.paraCada() Ejecuta la función de devolución de llamada una vez. Esta función se ejecuta para cada elemento del mapa.

for…of Loop: El for..of es un bucle que proporciona una sintaxis muy clara y concisa para iterar sobre todo tipo de iterables y enumerables . for…of itera sobre objetos iterables. Este ciclo itera en Array, String, objetos tipo array, TypedArray, Map y cualquier objeto iterable definido por el usuario.
 

  • Ejemplo: 
     

javascript

// Simple JavaScript program to illustrate for...of loop
<script>
var arr = ['a', 3 , 'b', 2 , 'c', 1 ,'d'];
document.write("array elements are : ");
for (let ele of arr) {
  document.write(ele+' ');
}
</script> 
  • Producción: 
     
array elements are : a 3 b 2 c 1 d

Ejemplos de mapa: 
 

  • Programa 1: Implementar el método map.size(), map.set() 
     

javascript

// Simple JavaScript program to implement Map.size
<script>
var m = new Map()
m.set('a', 1);
m.set('b', 2);
m.set('c', 3);
document.write(m.size);
</script>                    
  • Producción: 
     
size of the map is : 3
  • Programa 2: Implementar el método map.set(), map.get(), map.delete(), map.clear(), map.has() 
     

javascript

<script>
/ Simple JavaScript program with Map
var map = new Map(); 
map.set("website ", "Geeksforgeeks"); 
document.write("Website is - " +map.get("website "));
// Use "get()" function
  
map.set("Subject1", "JavaScript"); //use "set()" function
map.set("Subject2", "C++");
map.set("Subject3", "python");
document.write("<br>Is it contains JavaScript ? - "+map.has("Subject1"));
document.write("<br>Is it contains C++ ? - "+map.has("Subject2"));
document.write("<br>Is it contains python ? - "+map.has("Subject3"));
// Use "has()" function
  
map.delete("subject2");
document.write("<br>Delete C++");
// Use "delete()" function
document.write("<br>Is it contains C++ now ? - "+map.has("C++")); //false
  
map.clear();//use "clear()" function
document.write("<br>Delete whole map");
document.write("<br> Is it has any value now? - "+map.has("Subject1"));
  
  
</script>
  • Producción: 
     
Website is - Geeksforgeeks
Is it contains JavaScript ? - true
Is it contains C++ ? - true
Is it contains python ? - true
Delete C++
Is it contains C++ now ? - false
Delete whole map
Is it has any value now? - false
  • Programa 3: Implementar el método map.forEach() 
     

javascript

<script>
// Simple JavaScript program to implement <b>Map.forEach()</b>
  
var m = new Map()
m.set('a', 1);
m.set('b', 2);
m.set('c', 3);
m.forEach((k, v)=>document.write(`key: ${k} value: ${v} <br>`));
</script>
  • Producción: 
     
key: 1 value: a
key: 2 value: b
key: 3 value: c
  •  
  • Programa 4: Implementar el método map.keys() 
     

javascript

<script>
// Simple JavaScript program to implement Map.keys()
  
var m = new Map()
m.set('a', 1);
m.set('b', 2);
m.set('c', 3);
var i = m.keys();
document.write("value : "+ i.next().value+"<br>");//"a"
document.write("value : "+ i.next().value+"<br>");//"b"
document.write("value : "+ i.next().value+"<br>");//"c"
document.write("value : "+ i.next().value+"<br>");//undefined
// Because the map contains only 4 elements
</script>
  • Producción: 
     
value : a
value : b
value : c
value : undefined
  • Programa: 5 Implementar el método map.entries() 
     

javascript

<script>
// Simple JavaScript program to implement Map.entries()
  
var m = new Map()
m.set('a', 1);
m.set('b', 2);
m.set('c', 3);
var i = m.entries();
document.write("value : "+ i.next().value+"<br>");//"a,1"
document.write("value : "+ i.next().value+"<br>");//"b,2"
document.write("value : "+ i.next().value+"<br>");//"c,3"
document.write("value : "+ i.next().value+"<br>");//undefined
// Because the map contains only 4 elements
</script>    
  • Producción: 
     
value : a,1
value : b,2
value : c,3
value : undefined
  • Programa 6: Implementar el método map.values(). 
     

javascript

<script>
// Simple JavaScript program to implement Map.values()
  
var m = new Map()
m.set('a', 1);
m.set('b', 2);
m.set('c', 3);
var i = m.values();
document.write("value : "+ i.next().value+"<br>");//"1"
document.write("value : "+ i.next().value+"<br>");//"2"
document.write("value : "+ i.next().value+"<br>");//"3"
document.write("value : "+ i.next().value+"<br>");//undefined
// Because the map contains only 4 elements
</script>    
  • Producción: 
     
value : 1
value : 2
value : 3
value : undefined

Mapas débiles: los mapas débiles son similares a los mapas normales. Los mapas débiles se utilizan para almacenar referencias de objetos débiles como clave, que las claves deben ser objetos. El mapa débil no se puede borrar y los valores de las claves pueden ser valores basura.
 

  • Ejemplo: 
     

javascript

<script>
  
// Simple JavaScript program to implement WeakMap()
var gfg = new WeakMap(); 
var gg = {};
  
//"gg" is a object
// Works as key
gfg.set(gg,"c++");
document.write(gfg.has(gg));//true
document.write("<br>"+gfg.get(gg));//c++
gg=null;//"gg" becomes null
document.write("<br>"+gfg.get(gg));//undefined
</script>
  • Producción: 
     
true
c++
undefined

Set: Es una estructura de datos introducida en la versión ES6 . Un conjunto es una colección de valores como una array, pero no contiene duplicados. Es mutable para que nuestro programa pueda agregar y eliminar valores a medida que avanza. Devuelve el objeto establecido .
 

Métodos Descripción
establecer.tamaño() Devuelve el número total de valores presentes en el conjunto.
establecer.añadir() Agrega un valor al conjunto si el valor no estaba ya en el conjunto.
dejar en clear() Elimina todos los valores del conjunto.
establecer.eliminar(v) Elimina un valor del conjunto, el valor se pasa como argumento.
conjunto.tiene(v) Si el valor pasado «v» está en el conjunto, este método devuelve verdadero .
establecer.entradas() Devuelve un objeto iterador que contiene una array con las entradas del conjunto.
establecer.valores() y establecer.claves() Ambos devuelven todos los valores del Conjunto, similar a map.values() .
método set.forEach() Es lo mismo que map.forEach() , ejecuta la función de devolución de llamada una vez. Esta función se ejecuta para cada elemento del conjunto.
  • Sintaxis: 
     
var s = new Set("val1","val2","val3")
  • Ejemplo: 
     

javascript

<script>
// Simple JavaScript program with Set
  
var st = new Set(); 
  
st.add("JavaScript").add("C++").add("python"); //use "add()" function
  
document.write("<br>Is it contains JavaScript ? - "+st.has("JavaScript"));
document.write("<br>Is it contains C++ ? - "+st.has("C++"));
document.write("<br>Is it contains python ? - "+st.has("python"));
// Use "has()" function
  
st.delete("C++");
document.write("<br>Delete C++");
  
// Use "delete()" function
document.write("<br>Is it contains C++ now ? - "+st.has("C++")); //false
  
st.clear();//use "clear()" function
document.write("<br>Delete whole set");
document.write("<br> Is it has any value now? - "+st.has("JavaScript"));
  
</script>                    
  • Producción: 
     
Is it contains JavaScript ? - true
Is it contains C++ ? - true
Is it contains python ? - true
Delete C++
Is it contains C++ now ? - false
Delete whole set
Is it has any value now? - false

Iterador: Iterador en Set permite acceder a una colección de objetos uno a la vez. Funciona con el método next(), cuando se invoca next(), el valor del conjunto se imprime uno a la vez y se devuelve un valor booleano «verdadero» que pertenece a la propiedad done , después de leer con éxito el valor del conjunto. Esto sucedió en la ventana de la consola. En el caso de la salida, solo se muestra el valor si usamos la palabra clave «valor» seguida de siguiente(), como iterator.next().value
 

  • Ejemplo: 
     

javascript

<script>
// Simple JavaScript program with Set iterator
var  s = new Set(['a','b','c']); //set elements 
var itr = s.values(); 
document.write(itr.next().value+"<br>");
document.write(itr.next().value+"<br>");
document.write(itr.next().value+"<br>");
document.write(itr.next().value);//undefined
</script>    
  • Producción: 
     
a
b
c
undefined

Conjunto Débil: Es similar a los mapas débiles, también se usa para almacenar la colección de objetos. Es similar al conjunto normal, por lo que no puede almacenar duplicados. Puede contener valor basura. La única diferencia entre el conjunto y el conjunto débil es que un conjunto débil contiene objetos.
 

  • Ejemplo: 
     

javascript

<script>
var gfg = new WeakSet 
var gg1 = {};//"gg1" is a object
var gg2 = {};//"gg2" is a object
   
gfg.add(gg1);
gfg.add(gg2);
document.write(gfg.has(gg1));//true
gfg.delete(gg1);//delete "gg1"
document.write("<br>"+gfg.has(gg1));//undefined
</script>    
  • Producción: 
     
true
false

Publicación traducida automáticamente

Artículo escrito por SoumikMondal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *