El operador de propagación permite que un iterable se expanda en lugares donde se esperan más de 0 argumentos. Se usa principalmente en la array de variables donde se esperan más de 1 valores. Nos permite el privilegio de obtener una lista de parámetros de una array. La sintaxis del operador Spread es la misma que la del parámetro Rest pero funciona completamente al revés.
Sintaxis:
var variablename1 = [...value];
En la sintaxis anterior, … es un operador de dispersión que apuntará a todos los valores en una variable particular. Cuando… ocurre en una llamada de función o similar, se llama operador de propagación. El operador de extensión se puede usar en muchos casos, como cuando queremos expandir, copiar, concatenar, con un objeto matemático . Veamos cada uno de ellos uno por uno:
Nota : para ejecutar el código de este artículo, utilice la consola proporcionada por el navegador.
concat()
El método concat() proporcionado por javascript ayuda en la concatenación de dos o más strings (String concat()) o se usa para fusionar dos o más arrays. En el caso de las arrays, este método no cambia las arrays existentes, sino que devuelve una nueva array.
// normal array concat() method let arr = [1,2,3]; let arr2 = [4,5]; arr = arr.concat(arr2); console.log(arr); // [ 1, 2, 3, 4, 5 ]
Salida:
podemos lograr la misma salida con la ayuda del operador de propagación, el código se verá así:
// spread operator doing the concat job let arr = [1,2,3]; let arr2 = [4,5]; arr = [...arr,...arr2]; console.log(arr); // [ 1, 2, 3, 4, 5 ]
Salida:
Nota : aunque podemos lograr el mismo resultado, no se recomienda usar la extensión en este caso particular, ya que para un gran conjunto de datos funcionará más lentamente en comparación con el método concat() nativo.
Copiar (como método de empalme)
Para copiar el contenido de una array a otra, podemos hacer algo como esto:
// copying without the spread operator let arr = ['a','b','c']; let arr2 = arr; console.log(arr2); // [ 'a', 'b', 'c' ]
Producción:
El código anterior funciona bien porque podemos copiar el contenido de una array a otra, pero en el fondo, es muy diferente ya que cuando mutamos una nueva array, también afectará a la array anterior (la que copiamos). Vea el código a continuación:
// changed the original array
let arr = ['a','b','c'];
let arr2 = arr;
arr2.push('d');
console.log(arr2);
console.log(arr); // even affected the original array(arr)
Producción:
En el código anterior, podemos ver claramente que cuando intentamos insertar un elemento dentro de la array, la array original también se altera, lo que no era nuestra intención y no se recomienda. Podemos hacer uso del operador de propagación en este caso, así:
// spread operator for copying
let arr = ['a','b','c'];
let arr2 = [...arr];
console.log(arr); // [ 'a', 'b', 'c' ]
arr2.push('d'); //inserting an element at the end of arr2
console.log(arr2); // [ 'a', 'b', 'c', 'd' ]
console.log(arr); // [ 'a', 'b', 'c' ]
Producción:
Al usar el operador de propagación, nos aseguramos de que la array original no se vea afectada cada vez que modificamos la nueva array.
Expandir
Cada vez que queremos expandir una array en otra, hacemos algo como esto:
// normally used expand method let arr = ['a','b']; let arr2 = [arr,'c','d']; console.log(arr2); // [ [ 'a', 'b' ], 'c', 'd' ]
Salida:
a pesar de que obtenemos el contenido de una array dentro de la otra, en realidad es una array dentro de otra array que definitivamente es lo que no queríamos. Si queremos que el contenido esté dentro de una sola array, podemos utilizar el operador de propagación.
// expand using spread operator let arr = ['a','b']; let arr2 = [...arr,'c','d']; console.log(arr2); // [ 'a', 'b', 'c', 'd' ]
Producción:
Matemáticas
El objeto Math en javascript tiene diferentes propiedades que podemos usar para hacer lo que queremos, como encontrar el mínimo de una lista de números, encontrar el máximo, etc. Considere el caso de que queremos encontrar el mínimo de una lista de números, escribirá algo como esto:
console.log(Math.min(1,2,3,-1)); //-1
Salida:
ahora considere que tenemos una array en lugar de una lista, este método de objeto matemático anterior no funcionará y devolverá NaN, como:
// min in an array using Math.min() let arr = [1,2,3,-1]; console.log(Math.min(arr)); //NaN
Salida:
cuando se usa …arr en la llamada a la función, “expande” un objeto iterable arr en la lista de argumentos.
Para evitar esta salida NaN, usamos un operador de expansión, como:
// with spread let arr = [1,2,3,-1]; console.log(Math.min(...arr)); //-1
Producción:
Ejemplo de operador de propagación con objetos
ES6 ha agregado la propiedad de propagación a los literales de objetos en javascript. El operador de extensión ( … ) con objetos se usa para crear copias de objetos existentes con valores nuevos o actualizados o para hacer una copia de un objeto con más propiedades. Veamos un ejemplo de cómo usar el operador de propagación en un objeto,
const user1 = {
name: 'Jen',
age: 22
};
const clonedUser = { ...user1 };
console.log(clonedUser);
Producción:
Aquí estamos extendiendo el objeto user1 . Todos los pares clave-valor del objeto usuario1 se copian en el objeto clonedUser. Veamos otro ejemplo de fusionar dos objetos usando el operador de expansión,
const user1 = {
name: 'Jen',
age: 22,
};
const user2 = {
name: "Andrew",
location: "Philadelphia"
};
const mergedUsers = {...user1, ...user2};
console.log(mergedUsers)
Producción:
mergedUsers es una copia de user1 y user2 . En realidad, todas las propiedades enumerables de los objetos se copiarán en el objeto mergedUsers. El operador de propagación es solo una abreviatura del método Object.assign() pero hay algunas diferencias entre los dos.
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .