Introducción
JavaScript tiene un operador ... incorporado que facilita trabajar con una cantidad indefinida de elementos. Según el contexto, se le llama operador rest u operador spread.
Operador rest
Elementos rest
Cuando ... aparece en el lado izquierdo de una asignación, esos tres puntos se conocen como el operador rest. Los tres puntos junto con un nombre de variable se llaman elemento rest. Recolecta cero o más valores y los guarda en un solo array.
const [a, b, ...everythingElse] = [0, 1, 1, 2, 3, 5, 8];
a;
// => 0
b;
// => 1
everythingElse;
// => [1, 2, 3, 5, 8]
Fíjate que en JavaScript, a diferencia de otros lenguajes, un elemento rest no puede llevar una coma al final. Debe ser el último elemento de una asignación por desestructuración. El siguiente ejemplo lanza un SyntaxError:
const [...items, last] = [2, 4, 8, 16]
Propiedades rest
De manera similar a los arrays, el operador rest también se puede usar para recolectar una o más propiedades de un objeto y guardarlas en un solo objeto.
const { street, ...address } = {
street: 'Platz der Republik 1',
postalCode: '11011',
city: 'Berlin',
};
street;
// => 'Platz der Republik 1'
address;
// => {postalCode: '11011', city: 'Berlin'}
Parámetros rest
Cuando ... aparece en la definición de una función junto a su último argumento, ese parámetro se llama parámetro rest. Le permite a la función aceptar una cantidad indefinida de argumentos como un array.
function concat(...strings) {
return strings.join(' ');
}
concat('one');
// => 'one'
concat('one', 'two', 'three');
// => 'one two three'
Spread
Elementos spread
Cuando ... aparece en el lado derecho de una asignación, se conoce como el operador spread. Expande un array a una lista de elementos. A diferencia del elemento rest, puede aparecer en cualquier parte de una expresión literal de array, y puede haber más de uno.
const oneToFive = [1, 2, 3, 4, 5];
const oneToTen = [...oneToFive, 6, 7, 8, 9, 10];
oneToTen;
// => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const woow = ['A', ...oneToFive, 'B', 'C', 'D', 'E', ...oneToFive, 42];
woow;
// => ["A", 1, 2, 3, 4, 5, "B", "C", "D", "E", 1, 2, 3, 4, 5, 42]
Propiedades spread
De manera similar a los arrays, el operador spread también se puede usar para copiar propiedades de un objeto a otro.
let address = {
postalCode: '11011',
city: 'Berlin',
};
address = { ...address, country: 'Germany' };
// => {
// postalCode: '11011',
// city: 'Berlin',
// country: 'Germany',
// }
Instrucciones
Tu amigo Linus es maquinista de trenes de carga que circulan entre ciudades.
Aunque es increíble manejando trenes, no le va tan bien con la logística ni con las computadoras.
Le gustaría contar con tu ayuda con la programación para organizar los detalles de los trenes y corregir errores en los datos de las rutas.
Para practicar, usa el operador rest o spread para resolver cada una de las tareas a continuación.
1. Crea un array con todos los vagones
Tu amigo ha estado llevando un registro del identificador (ID) de cada vagón, pero nunca está seguro de cuántos vagones tendrá que procesar el sistema en un momento dado.
Sería mucho más fácil para el resto del programa de logística tener estos datos empaquetados en un único array.
Implementa una función getListOfWagons que acepte una cantidad arbitraria de IDs de vagones, que son los IDs de cada vagón.
Cada ID será un número entero positivo.
La función debe devolver los IDs dados como un único array.
getListOfWagons(1, 7, 12, 3, 14, 8, 5);
// => [1, 7, 12, 3, 14, 8, 5]
2. Mueve los dos primeros elementos al final del array
En este punto, ya empiezas a entender los datos y cómo se usan en el programa de logística.
El sistema de IDs siempre le asigna a la locomotora el ID 1, y al resto de los vagones del tren les asigna un ID elegido al azar mayor que 1.
¡Tu amigo tuvo que conectar dos vagones nuevos al tren y olvidó actualizar el sistema!
Ahora, los dos primeros vagones del array del tren deben moverse al final, o todo quedará fuera de orden.
Linus te agradecería mucho que corrigieras sus errores.
Implementa una función fixListOfWagons que acepte un array con el ID de cada vagón.
Su return es un array donde los 2 primeros elementos se reubican al final del array, de modo que la locomotora quede al frente.
eachWagonsID = [2, 5, 1, 7, 4, 12, 6, 3, 13];
fixListOfWagons(eachWagonsID);
// => [1, 7, 4, 12, 6, 3, 13, 2, 5]
3. Agrega los valores que faltan
Vaya, parece que algunos vagones se perdieron.
Por suerte, tu amigo acaba de encontrar otro array que parece contener los IDs de los vagones que faltan, y le gustaría que los agregaras al array principal de IDs de vagones.
Lo único que recuerda es que los valores que faltan deben colocarse justo después de la locomotora designada.
Con esta nueva información, escribe una función llamada correctListOfWagons que reciba dos arrays que tienen los IDs de cada vagón como argumentos.
Los IDs de los vagones del segundo array deben agregarse al primer array justo después de la locomotora (ID 1).
eachWagonsID = [1, 5, 20, 7, 4, 8];
missingWagons = [3, 17, 6, 15];
correctListOfWagons(eachWagonsID, missingWagons);
// => [1, 3, 17, 6, 15, 5, 20, 7, 4, 8]
Ahora que todos los datos de los vagones son correctos, tu amigo quiere que actualices la información de las rutas del sistema.
La información de la ruta inicial se construyó como un object, y tu amigo quiere que la actualices con las adiciones proporcionadas.
Cada ruta requiere información un poco diferente, así que tu amigo preferiría una solución genérica.
Implementa una función extendRouteInformation que acepte dos objects.
El primer object contiene entre qué ciudades circula la ruta del tren.
El segundo object contiene otros detalles de la ruta, como la velocidad o la longitud del tren.
La función debe devolver un object consolidado con toda la información de la ruta.
La variable moreRouteInformation puede contener propiedades diferentes.
route = { from: 'Berlin', to: 'Hamburg' };
moreRouteInformation = { length: '100', speed: '50' };
extendRouteInformation(route, moreRouteInformation);
// => {from: "Berlin", to: "Hamburg", length: "100", speed: "50"}
Tu amigo se dio cuenta de que no necesita la hora de llegada en la información de la ruta.
Por eso, tu amigo quiere que separes la hora de llegada de la información de la ruta.
Implementa una función separateTimeOfArrival que acepte un objeto con la información de la ruta.
La función debe devolver un array donde el primer elemento del array sea la hora de llegada y el segundo elemento sea un objeto con la información de la ruta sin la hora de llegada.
routeInformation = {
from: 'Berlin',
to: 'Hamburg',
length: '100',
timeOfArrival: '10:10',
};
separateTimeOfArrival(routeInformation);
// => ["10:10", {from: "Berlin", to: "Hamburg", length: "100"}]
Ejercicio de aprendizaje
