Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

La sintaxis extendida o sintáxis spread permite un iterador tal como un arreglo o cadena a ser expandida en lugares donde cero o más argumentos (para las llamadas de una función) o elementos (para literales Array) son esperados, o una expresión de un objeto a ser expandido en lugares donde cero o más pares de valores clave (para literales Tipo Objeto) son esperados.
 

Sintáxis

Para llamadas de funciones:

myFunction(...iterableObj);

Para literales Array o cadenas:

[...iterableObj, '4', 'five', 6];

Para literales Tipo Objeto (nuevo en ECMAScript 2018):

let objClone = { ...obj };

Ejemplos

Spread en llamadas de función

Reemplaza "apply"

Es frecuente usar Function.prototype.apply en casos donde quieres usar los elementos de un arreglo como argumentos de una función.

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

Con la sintáxis spread, el código anterior puede ser escrito como:

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

Cualquier argumento en la lista de argumentos puede usar la sintáxis spread y esto puede ser usado varias veces.

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

"Apply" para "new"

Cuando se llama un constructor con new, no es posible usar directamente un arreglo y apply (apply hace un [[Call]] y no un [[Construct]]). Sin embargo, un arreglo puede ser fácilmente usado con un new gracias a la sintáxis spread:

var dateFields = [1970, 0, 1];  // 1 Jan 1970
var d = new Date(...dateFields);

Para usar new con un arreglo de parámentros sin la sintáxis spread, podrías tener que hacerlo indirectamente a través de una aplicación parcial:

function applyAndNew(constructor, args) {
   function partial () {
      return constructor.apply(this, args);
   };
   if (typeof constructor.prototype === "object") {
      partial.prototype = Object.create(constructor.prototype);
   }
   return partial;
}


function myConstructor () {
   console.log("arguments.length: " + arguments.length);
   console.log(arguments);
   this.prop1="val1";
   this.prop2="val2";
};

var myArguments = ["hi", "how", "are", "you", "mr", null];
var myConstructorWithArguments = applyAndNew(myConstructor, myArguments);

console.log(new myConstructorWithArguments);
// (internal log of myConstructor):           arguments.length: 6
// (internal log of myConstructor):           ["hi", "how", "are", "you", "mr", null]
// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}

Spread en literales Array

Un literal Array más poderoso

Sin la sintáxis spread, para crear un nuevo arreglo usando un arreglo existente como una parte del nuevo arreglo, la sintáxis del literal Array no es lo suficientemente amplia y se debe usar código imperativo en lugar de usar una combinación de push, splice, concat, etc. Con la sintáxis spread, esto se convierte mucho más sucinto:

var parts = ['shoulders', 'knees']; 
var lyrics = ['head', ...parts, 'and', 'toes']; 
// ["head", "shoulders", "knees", "and", "toes"]

Al igual que spread para las listas de argumentos, ... pueden ser usados en cualquier parte en el literal Array y esto puede ser usado múltiples veces.

Copiar un arreglo

var arr = [1, 2, 3];
var arr2 = [...arr]; // like arr.slice()
arr2.push(4); 

// arr2 becomes [1, 2, 3, 4]
// arr remains unaffected

Nota: La sintáxis Spread efectivamente va a un nivel de profundidad mientras copia un arreglo. Por lo tanto, esto no permite copiar arreglos multidimensionales como se muestra en los siguientes ejemplos (es lo mismo con Object.assign() y sintáxis spread).

var a = [[1], [2], [3]];
var b = [...a];
b.shift().shift(); // 1
// Now array a is affected as well: [[], [2], [3]]

Una forma mejor para concatenar arreglos

Array.concat es usada a menudo para concatenar un arreglo al final de un arreglo ya existente. Sin la sintáxis spread se realiza:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// Append all items from arr2 onto arr1
arr1 = arr1.concat(arr2);

Con la sintáxis spread se transforma en:

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

Array.unshift es a menudo usada para insertar un arreglo de valores al inicip de un arreglo existente. Sin la sintáxis spread, esto es hecho como:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// Prepend all items from arr2 onto arr1
Array.prototype.unshift.apply(arr1, arr2) // arr1 is now [3, 4, 5, 0, 1, 2]

Con la sintáxis spread se convierte en [Observa, sin embargo, que esto crea un nuevo arreglo arr1.  Diferente a Array.unshift, esto no modifica el arreglo original en sitio arr1]:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr2, ...arr1]; // arr1 is now [3, 4, 5, 0, 1, 2]

Spread en literales tipo Objeto

La propuesta Propiedades Rest/Spread para ECMAScript (etapa 4) agrega propiedades spread a los literales Tipo Objeto. Esto copia sus propiedades enumerables desde un objeto provisto dentro de un nuevo objeto.

Shallow-cloning (excluyendo prototype) o la combinación de objetos es ahora posible usando una sintáxis más corta que Object.assign().

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

Observa que Object.assign() desencadena setters mientras que la sintáxis spread no lo hace.

Observa que tu no puedes reemplazar o replicar la función Object.assign():

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };
const merge = ( ...objects ) => ( { ...objects } );

var mergedObj = merge ( obj1, obj2);
// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } }

var mergedObj = merge ( {}, obj1, obj2);
// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }

En el ejemplo de arriba, el operador spread no trabaja como uno podría esperar: este dispersa un arreglo de argumentos en el literal Tipo Objeto, debido al parámetro rest.

Sólo para iterables

La sintáxis Spread (otra que en el caso de las propiedades spread) puede ser aplicada sólo a los objetos iterables:

var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterable

Spread con muchos valores

Cuando se usa la sintáxis spread para llamados de funciones, tenga en cuenta la posibilidad de exceder el límite de longitud de argumentos del motor de JavaScript. Vea apply() para más detalles.

Sintáxis Rest (parámetros)

La sintáxis Rest luce exáctamente como la sintáxis spread, pero esto es usado por la desestructuración de arreglos y objetos. De cierta forma, la sintáxis rest es la opuesta a la sintáxis syntax: spread 'expande' un arreglo en sus elementos, mientras rest agrupa múltiples elementos y los 'condensa' en un único elemento. Consulta parámetros rest.

Especificaciones

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262) Standard Definido en varias secciones de la especificación: Array Initializer, Argument Lists
ECMAScript Latest Draft (ECMA-262) Draft Sin cambios.
ECMAScript Latest Draft (ECMA-262) Draft Definido en Object Initializer

Compatibilidad del navegador

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Spread in array literals461216 No378
Spread in function calls461227 No378
Spread in destructuring49 No34 No37 ?
Spread in object literals60 No55 No ? No
FeatureAndroid webviewChrome para AndroidEdge mobileFirefox para AndroidOpera AndroidiOS SafariSamsung Internet
Spread in array literals464612163785.0
Spread in function calls464612273785.0
Spread in destructuring4949 No3437 ?5.0
Spread in object literals6060 No55 ? No No

Vea también

Etiquetas y colaboradores del documento

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