147 lines
4.8 KiB
Markdown
147 lines
4.8 KiB
Markdown
|
---
|
||
|
title: Spread syntax
|
||
|
localeTitle: Sintaxis extendida
|
||
|
---
|
||
|
## Sintaxis extendida
|
||
|
|
||
|
La sintaxis de propagación permite que una iterable, como una expresión de matriz o cadena, se expanda en lugares donde se esperan cero o más argumentos (para llamadas a funciones) o elementos (para literales de matriz), o una expresión de objeto para expandirse en lugares donde se espera cero .
|
||
|
|
||
|
### Sintaxis
|
||
|
|
||
|
Para llamadas a funciones:
|
||
|
```
|
||
|
myFunction(...iterableObj);
|
||
|
```
|
||
|
|
||
|
Para matrices literales o cadenas:
|
||
|
```
|
||
|
[...iterableObj, '4', 'five', 6];
|
||
|
```
|
||
|
|
||
|
### Ejemplos
|
||
|
|
||
|
#### Difundir en llamadas de función
|
||
|
|
||
|
#### Reemplazar aplicar
|
||
|
|
||
|
Es común utilizar `Function.prototype.apply` en los casos en los que desee utilizar los elementos de una matriz como argumentos para una función.
|
||
|
```
|
||
|
function myFunction(x, y, z) { }
|
||
|
var args = [0, 1, 2];
|
||
|
myFunction.apply(null, args);
|
||
|
```
|
||
|
|
||
|
Con la sintaxis de propagación lo anterior se puede escribir como:
|
||
|
```
|
||
|
function myFunction(x, y, z) { }
|
||
|
var args = [0, 1, 2];
|
||
|
myFunction(...args);
|
||
|
```
|
||
|
|
||
|
Cualquier argumento en la lista de argumentos puede usar la sintaxis de propagación y puede usarse varias veces.
|
||
|
```
|
||
|
function myFunction(v, w, x, y, z) { }
|
||
|
var args = [0, 1];
|
||
|
myFunction(-1, ...args, 2, ...[3]);
|
||
|
```
|
||
|
|
||
|
### Solicitar nuevos
|
||
|
|
||
|
Cuando se llama a un constructor con un `new` , no es posible usar **directamente** una matriz y `apply` ( `apply` hace un `[[Call]]` y no un `[[Construct]]` ). Sin embargo, una matriz se puede utilizar fácilmente con nuevos gracias a la sintaxis de difusión:
|
||
|
```
|
||
|
var dateFields = [1970, 0, 1]; // 1 Jan 1970
|
||
|
var d = new Date(...dateFields);
|
||
|
```
|
||
|
|
||
|
Para usar nuevo con una matriz de parámetros sin sintaxis de propagación, tendría 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"}
|
||
|
```
|
||
|
|
||
|
### Difundir en matrices literales
|
||
|
|
||
|
#### Un literal de matriz más potente.
|
||
|
|
||
|
Sin la sintaxis de propagación, para crear una nueva matriz utilizando una matriz existente como una parte de la misma, la sintaxis literal de la matriz ya no es suficiente y el código imperativo debe usarse en su lugar utilizando una combinación de empuje, empalme, concat, etc. Con la sintaxis de difusión esto se vuelve mucho más sucinto:
|
||
|
```
|
||
|
var parts = ['shoulders', 'knees'];
|
||
|
var lyrics = ['head', ...parts, 'and', 'toes'];
|
||
|
// ["head", "shoulders", "knees", "and", "toes"]
|
||
|
```
|
||
|
|
||
|
Al igual que la propagación de listas de argumentos, `...` se puede usar en cualquier lugar del literal de la matriz y se puede usar varias veces.
|
||
|
|
||
|
### Copiar una matriz
|
||
|
```
|
||
|
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 sintaxis de propagación llega a un nivel de profundidad al copiar una matriz. Por lo tanto, puede no ser adecuado para copiar matrices multidimensionales, como muestra el siguiente ejemplo (es lo mismo con Object.assign () y la sintaxis de propagación).
|
||
|
```
|
||
|
var a = [[1], [2], [3]];
|
||
|
var b = [...a];
|
||
|
b.shift().shift(); // 1
|
||
|
// Now array a is affected as well: [[], [2], [3]]
|
||
|
```
|
||
|
|
||
|
### Una mejor manera de concatenar matrices.
|
||
|
|
||
|
`Array.concat` se usa a menudo para concatenar una matriz hasta el final de una matriz existente. Sin la sintaxis extendida esto se hace como:
|
||
|
```
|
||
|
var arr1 = [0, 1, 2];
|
||
|
var arr2 = [3, 4, 5];
|
||
|
// Append all items from arr2 onto arr1
|
||
|
arr1 = arr1.concat(arr2);
|
||
|
```
|
||
|
|
||
|
Con la sintaxis extendida esto se convierte en:
|
||
|
```
|
||
|
var arr1 = [0, 1, 2];
|
||
|
var arr2 = [3, 4, 5];
|
||
|
arr1 = [...arr1, ...arr2];
|
||
|
```
|
||
|
|
||
|
`Array.unshift` se usa a menudo para insertar una matriz de valores al inicio de una matriz existente. Sin la sintaxis extendida esto se hace 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 sintaxis extendida esto se convierte en:
|
||
|
```
|
||
|
var arr1 = [0, 1, 2];
|
||
|
var arr2 = [3, 4, 5];
|
||
|
arr1 = [...arr2, ...arr1]; // arr1 is now [3, 4, 5, 0, 1, 2]
|
||
|
|
||
|
```
|