Diferencias

Muestra las diferencias entre dos versiones de la página.

--- informatica:programacion:cursos:programacion_avanzada_javascript:desestructuracion [2024/10/17 11:43] – [Operador spread] tempwin
+++ informatica:programacion:cursos:programacion_avanzada_javascript:desestructuracion [2024/10/17 12:42] (actual) – [DEMO: Parámetros rest] tempwin
@@ Línea 394: / Línea 394: @@
 ===== DEMO: Operador spread =====
+Desestructuración normal:
+<code javascript>
+var arr = [1,2,3,4,5,6,7];
+var [x,,,y] = arr;
+console.log(x,y); // -> 1 4
+</code>
+Aplicando el operador //spread// (''...''):
+<code javascript>
+var arr = [1,2,3,4,5,6,7];
+var [x,,,y,...z] = arr;
+console.log(x,y); // -> 1 4 Array [ 5, 6, 7 ]
+</code>
+El operador //spread// permite que varios valores se obtengan en un nuevo array.
+Este operador también nos permite combinar fácilmente arrays:
+<code javascript>
+var uno = [1, 2, 5, 6];
+// Queremos que el segundo array tenga unos elementos y el anterior array:
+var dos = [100, 200, ...uno, 300];
+dos;// Array [ 100, 200, 1, 2, 5, 6, 300 ]
+</code>
+Otro de los usos de este operador es para las funciones sin necesidad de usar ''apply'':
+<code javascript>
+var foo = function(a, b, c, d, e) {
+    console.log(a, b, c, d, e);
+}
+</code>
+Uso:
+<code javascript>
+var arr = [1,2,3,4,5];
+// Imaginemos que queremos asociar cada uno de esos valores del array
+// a los distintos argumentos de la función 'foo'. Con spread es así de fácil:
+foo(...arr);
+</code>
+Si tuviéramos menos elementos:
+<code javascript>
+var arr = [1,2,3,4,5];
+// El resto de parámetros de la función se los podríamos
+// pasar así:
+foo(...arr, 100, 200);
+</code>
+También es posible hacer esto:
+<code javascript>
+var arr = [1,2,3,4,5];
+var arr2 = [200, 300];
+foo(...arr, ...arr2);
+También podemos hacer:
+foo(...arr, ...[10], ...[30]);
+</code>
 ===== DEMO: Parámetros rest =====
+Llamamos parámetros //rest// a que podemos aplicar el operador //spread// como último parámetro de una función y este último parámetro será un array que contendrá todos los parámetros no nombrados de la función.
+<code javascript>
+var foo = function(a, b, ...c) {
+    console.log(a);
+    console.log(b);
+    console.log(c);
+}
+foo(10, 20, 30);
+// 10
+// 20
+// Array [ 30 ]
+foo(10, 20, 30, 40, 50, 60);
+// 10
+// 20
+// Array [ 30, 40, 50, 60 ]
+</code>
+Los parámetros //rest// no fallan, por ejemplo, veamos qué pasa si le pasamos a la función todos los argumentos menos los //rest//:
+<code javascript>
+foo(10, 20);
+// 10
+// 20
+// Array [ ]
+</code>
+Vamos a ver diferencias con ''arguments'':
+<code javascript>
+var foo = function(a, b, ...c) {
+    console.log(a);
+    console.log(b);
+    console.log(c);
+    console.log(arguments);
+}
+</code>
+Usamos:
+<code javascript>
+foo(10, 20, 30, 40);
+// 10
+// 20
+// Array [ 30, 40 ]
+// Arguments { , 7 more... }
+</code>
+''arguments'' contiene todos los parámetros, ya sean nombrados o no. rest solo contiene los nombrados. El parámetro //rest// es un array, ''arguments'' no es un array, así que no podemos usar operaciones típicas de arrays (''map'', ''filter'').