En este tutorial, aprenderá sobre el operador de extensión de JavaScript con la ayuda de ejemplos.
El operador de propagación es una nueva adición a las funciones disponibles en la versión JavaScript ES6 .
Operador de propagación
El operador de extensión … se utiliza para expandir o extender un iterable o una matriz. Por ejemplo,
const arrValue = ('My', 'name', 'is', 'Jack'); console.log(arrValue); // ("My", "name", "is", "Jack") console.log(… arrValue); // My name is Jack
En este caso, el código:
console.log(… arrValue)
es equivalente a:
console.log('My', 'name', 'is', 'Jack');
Copiar matriz mediante el operador Spread
También puede utilizar la sintaxis de propagación … para copiar los elementos en una única matriz. Por ejemplo,
const arr1 = ('one', 'two'); const arr2 = (… arr1, 'three', 'four', 'five'); console.log(arr2); // Output: // ("one", "two", "three", "four", "five")
Clonar matriz con operador de propagación
En JavaScript, los objetos se asignan por referencia y no por valores. Por ejemplo,
let arr1 = ( 1, 2, 3); let arr2 = arr1; console.log(arr1); // (1, 2, 3) console.log(arr2); // (1, 2, 3) // append an item to the array arr1.push(4); console.log(arr1); // (1, 2, 3, 4) console.log(arr2); // (1, 2, 3, 4)
Aquí, ambas variables arr1 y arr2 se refieren a la misma matriz. Por tanto, el cambio en una variable da como resultado el cambio en ambas variables.
Sin embargo, si desea copiar matrices para que no se refieran a la misma matriz, puede utilizar el operador de extensión. De esta forma, el cambio en una matriz no se refleja en la otra. Por ejemplo,
let arr1 = ( 1, 2, 3); // copy using spread syntax let arr2 = (… arr1); console.log(arr1); // (1, 2, 3) console.log(arr2); // (1, 2, 3) // append an item to the array arr1.push(4); console.log(arr1); // (1, 2, 3, 4) console.log(arr2); // (1, 2, 3)
Operador de propagación con objeto
También puede utilizar el operador de propagación con literales de objeto. Por ejemplo,
const obj1 = ( x : 1, y : 2 ); const obj2 = ( z : 3 ); // add members obj1 and obj2 to obj3 const obj3 = (… obj1,… obj2); console.log(obj3); // (x: 1, y: 2, z: 3)
Aquí, ambas propiedades obj1y obj2se agregan al obj3uso del operador de extensión.
Parámetro de descanso
Cuando el operador de propagación se utiliza como parámetro, se conoce como parámetro de descanso.
También puede aceptar varios argumentos en una llamada de función utilizando el parámetro rest. Por ejemplo,
let func = function(… args) ( console.log(args); ) func(3); // (3) func(4, 5, 6); // (4, 5, 6)
Aquí,
- Cuando se pasa un solo argumento a la
func()función, el parámetro rest toma solo un parámetro. - Cuando se pasan tres argumentos, el parámetro rest toma los tres parámetros.
Nota : El uso del parámetro rest pasará los argumentos como elementos de matriz.
También puede pasar varios argumentos a una función utilizando el operador de propagación. Por ejemplo,
function sum(x, y ,z) ( console.log(x + y + z); ) const num1 = (1, 3, 4, 5); sum(… num1); // 8
Si pasa varios argumentos utilizando el operador de propagación, la función toma los argumentos requeridos e ignora el resto.
Nota : El operador de propagación se introdujo en ES6 . Es posible que algunos navegadores no admitan el uso de sintaxis de propagación. Visite el soporte de JavaScript Spread Operator para obtener más información.
