Javascript: Ejemplos de uso del operador spread

El operador spread permite manejar elementos considerados iterables como son arrays(un array tiene/itera elementos), strings(tiene/itera caracteres) u objetos(tiene/itera pares clave-valor) sin necesidad de preparar un algoritmo cíclico o de bucle. 

Con spread se puede: 

• En llamadas a funciones, que arrays o strings expandan sus elementos. 
• Operar entre arrays, el operador expande sus elementos. Se pueden copiar, mezclar, intercalar.
• Operar con objetos spread expande los pares clave-valor. Lo mismo que los arrays 

Ejemplos básicos

// expande el string en sus 3 caracteres

console.log('String expandido: ', ..."abc"); 

// expande el array en sus 4 elementos

console.log('Array expandido: ', ...[1,2,3,4]); 

// Expande el primer objeto y le añade el par clave-valor masattr: 'def'

console.log('Objeto expandido: ', {...{id: 1, desc:'abc'}, masattr: 'def' }); 

// Expande los arrays y crea uno nuevo con los elementos de los dos

console.log('Une dos arrays: ',[...[1,2,3,4],...[5,6]])

// String expandido:  a b c

// Array expandido:  1 2 3 4

// Objeto expandido:  { id: 1, desc: 'abc', masattr: 'def' }

// Une dos arrays:  [ 1, 2, 3, 4, 5, 6 ]

 

Otros ejemplos

 En el siguiente ejemplo se intercalas los elementos de un array en otro

// Spread en array 

let otrosIdiomas = ['inglés', 'aleman'];

let idiomasHablados = ['español', ...otrosIdiomas, 'frances'];

console.log ('Ver idiomasHablados: ', idiomasHablados)

// Ver idiomasHablados:  [ 'español', 'inglés', 'aleman', 'frances' ]

En el siguiente ejemplo se copia un array en otro. La copia es poco profunda (shallow), es decir el array original es totalmente independiente de nuevo obtenido con la copia.

// Copiar array como arr.slice()

let numeros1 = [1, 2, 3];

let numeros2 = [...numeros1]; 

numeros2.push(4);

console.log ('numeros1 y numeros2: ', numeros1, numeros2) 

// numeros1 y numeros2:  [ 1, 2, 3 ] [ 1, 2, 3, 4 ]

En el siguiente ejemplo el array es pasado a una función, el operador spread expande el array y se convierten en los argumentos de la función llamada.

//Spread en llamadas a funciones

function miFuncion(a1, a2, a3) { 

    console.log ('Argumentos: ', a1, a2, a3)

}

let argumentos = [0, 1, 2];

miFuncion(...argumentos);

En el siguiente ejemplo se copian y mezclan objetos siendo de nuevo una copia poco profunda.

// Con objetos

let objeto1 = { desc: 'ob1', p1: 1 };

let objeto2 = { desc: 'ob2', p2: 2 };

let objetoCopiado = { ...objeto1 };

let objetoMezclado = { ...objeto1, ...objeto2 };

console.log ('Objetos copiado y mezclado: ', objetoCopiado, objetoMezclado)

// Objetos copiado y mezclado:  { desc: 'ob1', p1: 1 } { desc: 'ob2', p1: 1, p2: 2 }

 

Conclusión

El operador spread facilita las tareas del desarrollador cuando se trata de realizar ciertas operaciones con objetos iterables: array, strings y objetos.

 

JavaScript: Ejemplo del método Promise.all()

Este método es útil cuando se han creado varias promesas y es necesario realizar una operación solo cuando se hayan resuelto todas.

El método Promise.all() toma un array de promesas como entrada y devuelve una sola promesa que se resuelve con un array que contiene el resultado de las promesas de entrada. La promesa devuelta se resolverá sólo si todas las promesas de entrada se resuelven se rechazará si alguna es rechazada. El rechazo se resolverá con el mensaje de error de la primera promesa rechazada.

Ejemplo

En este ejemplo se crean 2 promesas que devuelven los resultados en momentos distintos. Una de ellas devuelve el resultado en 2 segundos y la otra en 1 segundo. Con el método all(), se consigue que el resultado no se procese hasta que hayan terminado las dos promesas.

let datosA = new Promise((resolve, reject) =>

                   {setTimeout(()=> (resolve("datos de A"), 2000))});

let datosB = new Promise((resolve, reject) => 

                   {setTimeout(()=> (resolve("datos de B"), 1000))});

Promise.all([datosA, datosB]).then((result) => 

                                {console.log ("datosAyB ", result)})

// RESULTADO: datosAyB  [ 'datos de A', 'datos de B' ]

Otro ejemplo

En este ejemplo se requiere rellenar el contenido de las variables datosA y datosB. Las funciones de relleno son promesas que se resuelven de nuevo en tiempos distintos, 1 o 2 segundos. Con el método all() se consigue sincronizar las funciones de rellenado y solo se muestra el contenido de las variables cuando están ámbas rellenas.

let datosA;

let datosB;

let rellenadatosA = new Promise((resolve, reject) => 

                            {setTimeout(()=> 

                               {datosA="datos A"; resolve(datosA)}, 2000)});

let rellenadatosB = new Promise((resolve, reject) => 

                            {setTimeout(() => 

                               {datosB="datos B"; resolve(datosB)}, 1000)});

Promise.all([rellenadatosA]).then(() => console.log ("datosAyB ", datosA, datosB));

// datosAyB  datos A datos B

Espero que sea de ayuda. Si quedan dudas, dejadlas en comentarios. 

Chao