Está en la página 1de 7

Usar el parámetro Rest con

parámetros de función
Para ayudarnos a crear funciones más flexibles, ES6 introduce el
parámetro de descanso para los parámetros de función. Con el parámetro
rest, puede crear funciones que toman un número variable de
argumentos. Estos argumentos se almacenan en una matriz a la que se
puede acceder más tarde desde dentro de la función.

Mira este código:

function howMany(...args) {
return "You have passed " + args.length + " arguments.";
}
console.log(howMany(0, 1, 2));
console.log(howMany("string", null, [1, 2, 3], { }));

La consola mostraría las cadenas You have passed 3 arguments.y You have


passed 4 arguments..

El parámetro rest elimina la necesidad de verificar la argsmatriz y nos


permite aplicar map(), filter()y reduce()en la matriz de parámetros.

Modifique la función sumusando el parámetro rest de tal manera que la


función sumpueda tomar cualquier número de argumentos y devolver su
suma.
Pruebas
 esperando :El resultado de sum(0,1,2)debe ser 3
 esperando :El resultado de sum(1,2,3,4)debe ser 10
 esperando :El resultado de sum(5)debe ser 5
 esperando :El resultado de sum()debe ser 0
 esperando :sumdebe ser una función de flecha que
use la sintaxis de parámetro de descanso ( ...) en
el argsparámetro.
 const sum = (...args) => {
   return args.reduce((a, b) => a + b, 0);
 }
 console.log(sum(1, 2, 3)); // 6
Use el operador de propagación
para evaluar arreglos en el
lugar
ES6 presenta el operador de expansión , que nos permite expandir matrices
y otras expresiones en lugares donde se esperan múltiples parámetros o
elementos.

El siguiente código ES5 se usa apply()para calcular el valor máximo en


una matriz:

var arr = [6, 89, 3, 45];


var maximus = Math.max.apply(null, arr);

maximustendría un valor de 89.

Tuvimos que usar Math.max.apply(null,


arr)porque Math.max(arr)regresa NaN. Math.max()espera argumentos
separados por comas, pero no una matriz. El operador de propagación
hace que esta sintaxis sea mucho mejor para leer y mantener.

const arr = [6, 89, 3, 45];


const maximus = Math.max(...arr);

maximustendría un valor de 89.

...arrdevuelve una matriz desempaquetada. En otras


palabras, extiende la matriz. Sin embargo, el operador de propagación solo
funciona en el lugar, como en un argumento de una función o en un literal
de matriz. El siguiente código no funcionará:

const spreaded = ...arr;


Copie todo el contenido de arr1en otra matriz arr2utilizando el operador
de propagación.

Pruebas
 esperando :arr2debe ser una copia correcta de arr1.
 esperando :...el operador de propagación debe
usarse para duplicar arr1.
 esperando :arr2debe permanecer sin cambios
cuando arr1se cambia.
 const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
 let arr2;

 arr2 = [...arr1];  // Change this line

 console.log(arr2);
Utilice la asignación de
desestructuración para extraer
valores de los objetos
La asignación de desestructuración es una sintaxis especial introducida en
ES6, para asignar claramente valores tomados directamente de un objeto.

Considere el siguiente código ES5:

const user = { name: 'John Doe', age: 34 };

const name = user.name;


const age = user.age;

nametendría un valor de la cadena John Doe, y agetendría el número 34.

Aquí hay una declaración de asignación equivalente que usa la sintaxis de


desestructuración de ES6:

const { name, age } = user;


Nuevamente, nametendría un valor de la cadena John Doey agetendría el
número 34.

Aquí, las variables namey agese crearán y se les asignarán los valores de sus


respectivos valores del userobjeto. Puedes ver cuánto más limpio es esto.

Puede extraer tantos o tan pocos valores del objeto como desee.

Reemplace las dos asignaciones con una asignación de desestructuración


equivalente. Todavía debe asignar las variables todayy tomorrowlos valores
de todayy tomorrowdesde el HIGH_TEMPERATURESobjeto.

Pruebas
 esperando :Debe eliminar la sintaxis de asignación
de ES5.
 esperando :Debe utilizar la desestructuración para
crear la todayvariable.
 esperando :Debe utilizar la desestructuración para
crear la tomorrowvariable.
 esperando :todaydebe ser igual a 77y tomorrowdebe ser
igual a 80.
 const HIGH_TEMPERATURES = {
   yesterday: 75,
   today: 77,
   tomorrow: 80
 };

 // Only change code below this line

 const {today,  tomorrow } = HIGH_TEMPERATURES;
 // Only change code above this line
Utilice la asignación de
desestructuración para asignar
variables de objetos
La desestructuración le permite asignar un nuevo nombre de variable al
extraer valores. Puede hacer esto poniendo el nuevo nombre después de
dos puntos al asignar el valor.

Usando el mismo objeto del último ejemplo:

const user = { name: 'John Doe', age: 34 };

Así es como puede dar nuevos nombres de variables en la tarea:

const { name: userName, age: userAge } = user;


Puede leerlo como "obtener el valor de user.namey asignarlo a una nueva
variable llamada userName" y así sucesivamente. El valor de userNamesería
la cadena John Doey el valor de userAgesería el número 34.

Reemplace las dos asignaciones con una asignación de desestructuración


equivalente. Todavía debe asignar las
variables highTodayy highTomorrowlos valores de todayy tomorrowdesde
el HIGH_TEMPERATURESobjeto.
Pruebas
 esperando :Debe eliminar la sintaxis de asignación
de ES5.
 esperando :Debe utilizar la desestructuración para
crear la highTodayvariable.
 esperando :Debe utilizar la desestructuración para
crear la highTomorrowvariable.
 esperando :highTodaydebe ser igual
a 77y highTomorrowdebe ser igual a 80.
 const HIGH_TEMPERATURES = {
   yesterday: 75,
   today: 77,
   tomorrow: 80
 };

 // Only change code below this line
   
 const { today: highToday, tomorrow: highTomorrow } = H
IGH_TEMPERATURES;

 // Only change code above this line
Utilice la asignación de
desestructuración para asignar
variables de objetos anidados
Puede usar los mismos principios de las dos lecciones anteriores para
desestructurar valores de objetos anidados.

Usando un objeto similar a los ejemplos anteriores:

const user = {
johnDoe: {
age: 34,
email: 'johnDoe@freeCodeCamp.com'
}
};

Aquí se explica cómo extraer los valores de las propiedades del objeto y
asignarlos a variables con el mismo nombre:

const { johnDoe: { age, email }} = user;

Y así es como puede asignar los valores de las propiedades de un objeto a


las variables con diferentes nombres:

const { johnDoe: { age: userAge, email: userEmail }} =


user;
Reemplace las dos asignaciones con una asignación de desestructuración
equivalente. Todavía debe asignar las variables lowTodayy highTodaylos
valores de today.lowy today.highdesde el LOCAL_FORECASTobjeto.
Pruebas
 esperando :Debe eliminar la sintaxis de asignación
de ES5.
 esperando :Debe utilizar la desestructuración para
crear la lowTodayvariable.
 esperando :Debe utilizar la desestructuración para
crear la highTodayvariable.
 esperando :lowTodaydebe ser igual
a 64y highTodaydebe ser igual a 77.
 const LOCAL_FORECAST = {
   yesterday: { low: 61, high: 75 },
   today: { low: 64, high: 77 },
   tomorrow: { low: 68, high: 80 }
 };

 // Only change code below this line
   

 const { today: { low: lowToday, high: highToday }} = L
OCAL_FORECAST;

 // Only change code above this line

También podría gustarte