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.