JavaScriptLección 11 de 16
Desestructuración y spread
La desestructuración saca valores de un array o de un objeto a variables sueltas en una sola línea. Los tres puntos hacen lo contrario: despliegan un array o un objeto para copiarlo o combinarlo con otro.
Lo esencial
- const [first, second] = list crea variables en el orden de los elementos
- const { name, age } = user crea variables por el nombre de la clave; = "…" pone un valor por defecto
- { ...a, ...b } es un objeto nuevo: una copia de a con las claves de b encima
- [...list, "new"] es una copia del array con un elemento más
- function sum(...numbers): un parámetro rest reúne todos los argumentos en un array
Ejemplo
const [gold, silver, ...rest] = ["Ana", "Ben", "Cleo", "Dan"];console.log(gold, silver, rest); const user = { name: "Kai", age: 27 };const { name, age, country = "unknown" } = user;console.log(name, age, country); const older = { ...user, age: 28 };console.log(older, [...rest, "Eve"]);console.log(Math.max(...[3, 9, 4]));rest se quedó con todos los que no cabían en gold y silver. El objeto no tenía la clave country, así que se usó el valor por defecto. Spread creó un objeto nuevo y el user original sigue con age 27.
Tarea
Cómo usar el editor⌘ Enter o Ctrl Enter ejecuta el código, ⇧ ⌘ Enter comprueba la tarea.Tab y Mayús Tab sangran la línea o la selección; Esc y luego Tab sale del editor.La comprobación compara lo que imprimió el programa con la tarea; los espacios al final de línea no cuentan.Tras dos comprobaciones fallidas puedes ver la solución. Tu código se guarda en este navegador.Combina defaults y userSettings en un objeto nuevo settings con spread (defaults no debe cambiar), saca theme y fontSize con desestructuración y reescribe sum con un parámetro rest para que sume cualquier cantidad de números. Salida: Theme: dark, size: 16, Sound: true, Defaults untouched: light y 10.
Salida
Aquí aparecerá lo que imprima el programa.