Explique el operador de propagación en ES6 con un ejemplo

En este artículo, intentaremos comprender los detalles básicos asociados con el operador Spread, que incluye la sintaxis del operador spread y su uso con la ayuda de ciertos ejemplos en ES6.

Primero comprendamos qué es exactamente el operador de propagación y cuál es su sintaxis y luego veremos algunos ejemplos asociados con su declaración.

Operador de propagación:

• El operador de dispersión eventualmente toma cualquier objeto iterable como una array o cualquier otro objeto iterable y expande los valores de ese objeto iterable individualmente.
• Este operador de dispersión se usa principalmente con la array que contiene más de 1 valor.
• Es decir, básicamente distribuye todos los elementos de una array y, además, después de distribuir los elementos de la array, podemos realizar cualquier operación con esos elementos, como la concatenación, la copia de los elementos de una array en otra array, etc.
• El operador de propagación también se puede usar con objetos para varias operaciones, como la concatenación o la copia de los valores de un objeto en otro objeto, etc.

Sintaxis: siguiendo la sintaxis, podemos usar para implementar el operador de propagación con cualquier objeto iterable como una array.

let variable = [...values]; 

Básicamente, lo que hace esta sintaxis es tomar los valores de una array y, por lo tanto, almacenarlos en una variable que, por lo tanto, actúa como una array en sí misma.

Ahora que hemos entendido los conceptos básicos del operador Spread, incluida su sintaxis, es hora de ver algunos ejemplos que se basan en el uso del operador spread.

Ejemplo 1: En este ejemplo, intentaremos realizar la concatenación primero usando el método concat() y luego usando la forma más simple que es usando el operador de propagación.

<script>
    let array1 = [5, 6, 7];
    let array2 = [8, 9, 10];
  
    // Using concat() method.....
    let concatenatedArray = array1.concat(array2);
    console.log(concatenatedArray);
  
    // Using spread (...) operator......
    let newArray = [...array1, ...array2];
    console.log(newArray);
</script>

Salida: como puede ver en el fragmento de código anterior, se vuelve tan simple realizar la concatenación usando la sintaxis del operador de propagación en lugar de usar el método predefinido concat().

[ 5, 6, 7, 8, 9, 10 ]
[ 5, 6, 7, 8, 9, 10 ]

Ejemplo 2: en este ejemplo, intentaremos copiar los valores de una array en otra array y luego intentaremos agregar algunos valores más en la nueva array y luego veremos que los cambios se ven afectados en la array anterior y nueva. elementos.

<script>
    let arr = ["Apple", "Mango", "Banana"];
    let newArr = [...arr];
  
    console.log(newArr);  // [ 'Apple', 'Mango', 'Banana' ]
    newArr.push("Grapes");
  
    console.log(newArr);  // [ 'Apple', 'Mango', 'Banana', 'Grapes' ]
    console.log(arr);  // [ 'Apple', 'Mango', 'Banana' ]
</script>

Salida: como puede ver en el ejemplo anterior, cuando normalmente ingresamos un nuevo valor en la nueva array, no afecta la array anterior, si intentamos hacerlo con el método normal, podemos obtener nuevos elementos de la array como los anteriores. elementos de array.

[ 'Apple', 'Mango', 'Banana' ]
[ 'Apple', 'Mango', 'Banana', 'Grapes' ]
[ 'Apple', 'Mango', 'Banana' ]

Ejemplo 3: En este ejemplo, intentaremos encontrar el elemento mínimo en una array de elementos utilizando el operador de propagación.

<script>
    let Array = [5, 6, 8, 1, 0, -8, 10];
  
    console.log(Math.min(...Array));
</script>

Salida: si tratamos de encontrar el elemento mínimo utilizando una forma más sencilla, es posible que experimentemos un mensaje de error que dice NaN (no es un número), pero con el uso de un operador de propagación, no recibiremos ningún mensaje de error como este.

-8