Difundir operador en JavaScript

JavaScript propagación del operador : Aquí, vamos a aprender sobre la operador de propagación en JavaScript con sus usos y ejemplos.

Spread JavaScript operador

El operador de difusión salió en ES6 y tiene grandes matrices funcionalidad class en JavaScript. Con una actualización importante en la ES9, el operador de difusión se extiende ahora a los objetos, además de las matrices. En este artículo, hablaremos de la propagación del operador, cómo usarlo y donde usarlo.

El operador de difusión se ve algo como y nos permite extender los artículos contenidos en un iterable. Un iterable se puede visualizar como cualquier cosa en la que podemos añadir bucles que pasar por ellas como arrays, cadenas, objetos, etc.

let arr=[1,2,3,4];
console.log(arr); //(4) [1, 2, 3, 4]
console.log(...arr); //1 2 3 4

Aviso cómo el primer console.log () no nos lleva a toda la matriz mientras que el segundo sólo nos da los elementos de la matriz? Hemos utilizado el operador de difusión para difundir los valores de la matriz, ya que cada valor de la matriz puede repetirse de nuevo. Este es un uso muy básico for del operador de difusión .

utilización del operador de difusión con objetos

var people=[
{name: 'Fuzzy', age:20},
{name: 'Stella', age:18},
{name: 'Banku' , age: 14}
]
console.log(people)
console.log(...people);

salida

(3) [{…}, {…}, {…}]     
{name: "Fuzzy", age: 20} {name: "Stella", age: 18} {name: "Banku", age: 14}

Hemos utilizado el operador de difusión a la propagación a través de los valores de una matriz que es esencialmente una matriz de objetos.

Use Importante Casos

const player={
strength: 50,
agility: 40,
health: 100
}
const player2=player;
player2.health=0;
console.log(player2);
console.log(player);

salida

{strength: 50, agility: 40, health: 0}
{strength: 50, agility: 40, health: 0}

Tenemos un objeto que nos da algunas propiedades de un jugador como fuerza , agilidad , salud , etc. Declaramos otro objeto jugador2 y establecer su salud a 0. Así que ahora jugador2 tendrá un salud de 0. Sin embargo, cuando vemos la la salud de nuestra objeto original jugador , sino que también se convierte en 0. ¿Cómo pasó esto? Sólo cambiamos la salud de jugador2 , jugador debería haberse quedado afectada.

La respuesta está en el hecho de que los objetos son tipos de datos no primitivos. Cuando creamos jugador2 que hace referencia a la misma posición de memoria que la de jugador . Por lo tanto ambos comparten los mismos valores y cambiando uno cambia las propiedades de la otra. Puede confirmar esto,

    player===player2;   //true

JavaScript ha tratado tanto los objetos como uno. ¿Cómo hacer frente a este problema?

operador de propagación para inicializar la memoria de objeto

const player={
strength: 50,
agility: 40,
health: 100
}
const player2={...player};
player2.health=0;
console.log(player2);
console.log(player);

salida

{strength: 50, agility: 40, health: 0}
{strength: 50, agility: 40, health: 100}

Ahora ambos jugador y jugador2 referirse a diferentes posiciones de memoria. Hemos utilizado el operador de difusión a desestructurar el objeto jugador y clonado o creado una copia del objeto jugador y le asignó a jugador2 . Independientemente de los cambios que hacemos class jugador2 cambiados sólo en esta copia y los valores originales permanecen sin cambios case la jugador objeto.

Por lo tanto, de esta manera podemos matrices fácilmente clon y objetos sin tener que preocuparse por inmutabilidad .

Otro uso importante class del operador de difusión es convertir gama-como objetos a los arrays. Sabemos que consultar el DOM no nos da un objeto o una matriz, que nos da una matriz similar a objeto como una lista de nodos o una colección HTML . Podemos convertir fácilmente este a una matriz mediante el operador de difusión .

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<title>Events in DOM</title>
</head>
<body>
<div class="player">
<p>Fuzzy </p>
</div>
<div class="player">
<p>Stella </p>
</div>
<div class="player">
<p>Banku</p>
</div>
<div class="player">
<p>Garry </p>
</div>
<div class="player">
<p>Damon </p>
</div>
<div class="player">
<p>Reiki </p>
</div>
<div class="player">
<p>Leila</p>
</div>
</body>
<script>
const players = document.getElementsByClassName('.player');
console.log(players);
const playersArr = [...players];
console.log(playersArr);
</script>
</html>

salida

HTMLCollection []
[]

El primero se nos devuelve una página HTML Collection mientras que el segundo nos devuelve una matriz . Así, hemos convertido una colección HTML en una gama .

    players.forEach
//undefined
playersArr.forEach;
//ƒ forEach() { [native code] }

Y también podemos utilizar simplemente las método forEach en nuestra nueva matriz.

veces usando el operador de difusión class pasando argumentos a un método o una función es muy útil. Digamos que tenemos una serie de números y tenemos que encontrar la salida máxima de todos ellos. Se podría decir que un enfoque para esto podría ser un bucle a través de todos los elementos y la comparación de cada dos elementos consecutivos o, simplemente, la clasificación del elemento, pero si usamos la función max incorporado en el objeto Math nos va a salvar algunas líneas considerables de código.

var arr=[8,-12,866,7,-44,0,81,11,-3123,1283];
console.log(Math.max(...arr));
//Output: 1283

Así, el operador propagación es muy útil en una gran cantidad de escenarios especialmente en la clonación de los tipos de datos no primitivos, la conversión de matriz-como objetos a las matrices y el paso de argumentos a métodos y funciones.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *