Operador de propagación

This is a new technology, part of the ECMAScript 2015 (ES6) standard.
This technology's specification has been finalized, but check the compatibility table for usage and implementation status in various browsers.

El operador de propagación spread operator permite que una expresión sea expandida en situaciones donde se esperan múltiples argumentos (llamadas a funciones) o múltiples elementos (arrays literales).

Sintaxis

Llamadas a funciones:

f(...iterableObj);

Arrays literales:

[...iterableObj, 4, 5, 6]

Desestructuración destructuring:

[a, b, ...iterableObj] = [1, 2, 3, 4, 5];

Ejemplos

Un mejor método apply

Ejemplo: Es común usar Function.prototype.apply en casos donde se require un array como contenedor de los argumentos que se enviarán a una llamada de función:

function f(x, y, z) { }
var args = [0, 1, 2];
f.apply(null, args);

Con el operador spread de ES6, el ejemplo anterior se puede rescribir como:

function f(x, y, z) { }
var args = [0, 1, 2];
f(...args);

Cualquier argumento en la lista de argumentos puede usar la sintaxis de propagación spread, donde además puede ser usada varias veces.

function f(v, w, x, y, z) { }
var args = [0, 1];
f(-1, ...args, 2, ...[3]);

Un array literal mas poderoso

Ejemplo: La sintaxis de un array literal que existe hoy en día no es suficiente si se requiere agregar los elementos de un array dentro de otro array existente. Actualmente se debe escribir código imperativo usando una combinación de métodos como push, splice, concat, etc. Con la sintaxis de propagación spread esta tarea resulta mucho mas concisa:

var parts = ['shoulder', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];

Al igual que con una lista de argumentos, en este caso también puede ser usado en cualquier ubicación dentro del array literal, además de poderse incluir una o varias veces.

Combinación del método apply y el operador new

Ejemplo: En ES5 no es posible combinar new y apply (en ES5  el método apply crea un [[Call]] y no un [[Construct]]). En ES6 la sintaxis de propagación spread soporta esto de forma natural:

var dateFields = readDateFields(database);
var d = new Date(...dateFields);

Un método push mejorado

Ejemplo: push suele usarse para agregar los elementos de un array al final de otro array existente. En ES5 esta tarea puede ser realizada de la siguiente manera:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// Agregar todos los elementos de arr2 a arr1
Array.prototype.push.apply(arr1, arr2);

Usando el operador de propagación spread de ES6, este sería el resultado:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);

Solo funciona para iterables

var obj = {"key1":"value1"};
function myFunction(x) {
    console.log(x); // undefined
}
myFunction(...obj);
var args = [...obj];
console.log(args, args.length) //[] 0

Operador Rest

El operador Rest es exactamente igual a la sintaxis del operador de propagación, y se utiliza para desestructurar arrays y objetos. En cierto modo, Rest es lo contrario de spread. Spread 'expande' un array en sus elementos, y Rest recoge múltiples elementos y los 'condensa' en uno solo.

Especificaciones

Especificación Estado Commentario

ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Array Initializer' in that specification.

ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Argument Lists' in that specification.

Standard
  • 12.2.4 Array Initializer
  • 12.3.6 Argument Lists

Compatibilidad en navegadores

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Operación de spread en arrays literales No support
v8 issue 3018
16 (16)
36 (36) (Symbol.iterator)
No support No support 7.1
Operación de spread en llamadas a funciones No support 27 (27)
36 (36) (Symbol.iterator)
No support No support 7.1
Operación de spread en desestructuración
destructuring
? 34 (34)
36 (36) (Symbol.iterator)
? ? ?
Características Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Operación de spread en arrays literales No support 16.0 (16)
36.0 (36) (Symbol.iterator)
No support No support iOS 8
Operación de spread en llamadas a funciones No support 27.0 (27)
36.0 (36) (Symbol.iterator)
No support No support iOS 8
Operación de spread en desestructuración
destructuring
? 34 (34)
36.0 (36) (Symbol.iterator)
? ? ?

Temas relacionados

Etiquetas y colaboradores del documento

 Colaboradores en esta página: Scipion, oagarcia
 Última actualización por: Scipion,