Header Ads Widget

Ticker

6/recent/ticker-posts

Sintaxis de JavaScript ES6 Three Dots (...): Operadores de propagación frente a resto

 ES6 ha introducido la ...sintaxis de tres puntos ( ) en JavaScript y Node que se puede utilizar, según el contexto, como un operador Spread o un operador Rest. Veamos la diferencia entre estos dos operadores con más detalle.

En una publicación anterior, vimos qué es el operador Spread en JavaScript y que podemos usarlo para expandir o descomprimir los elementos de un JavaScript iterable en un lugar apropiado, como dentro de otra matriz u objeto literal.

El operador Rest usa la misma sintaxis pero hace lo opuesto al operador Spread. Reduce o recopila valores en una matriz.

La mejor forma de captar la diferencia entre los dos operadores es mediante algunos ejemplos.

El operador de propagación y el apply()método

Supongamos que desea imprimir los elementos de la siguiente matriz en la consola:

const letters = ['a', 'b', 'c'];

Llamaría al console.log.apply()método de la siguiente manera:

console.log.apply(this,letters);

Eso es porque el uso de console.log()directamente imprimirá la matriz como un solo objeto.

En ES6, el oparador Spread le permite hacer lo mismo pero de una manera mucho más legible:

console.log(...letters);

Distribuimos los valores de la lettersmatriz y los imprimimos, como si estuviéramos haciendo algo como:

console.log("a", "b", "c");

Copia en profundidad de una matriz con el operador Spread

Podemos usar el operador Spread para copiar una matriz en otra. Por ejemplo:

letters2 = [...letters];

La letters2matriz es una copia profunda de la lettersmatriz, lo que significa que podemos cambiar la letters2matriz sin afectar la primera matriz.

Lea cómo convertir una cadena en la correspondiente matriz de números en JavaScript

Concatenación de matrices con el operador Spread

Podemos usar el operador Spread para concatenar dos o más arreglos en uno. Dado que el operador Spread desempaqueta una matriz cuando se le aplica, podemos hacer algo como:

const a = [1, 2, 3 ];
const b = [4, 5, 6];

const ab = [...a, ...b];

Simplemente extraemos los valores de las matrices aben la nueva abmatriz.

Uso del operador de propagación para pasar argumentos de función

Supongamos que tiene una función que espera muchos argumentos individuales . Por ejemplo, vamos a este:

function print(a, b, c){
    return console.log(a,b,c);
}

Y tenemos esos valores que queremos imprimir en alguna matriz:

const letters = ['a', 'b', 'c'];

En lugar de hacer referencia a cada miembro de la matriz y pasarlo como un único argumento, lo cual es bastante tedioso:

print(letters[0], letters[1], letters[2]);

Simplemente podemos usar el operador Spread de la siguiente manera:

print(...letters);

Transformar una cadena en una matriz con el operador Spread

El operador Spread funciona con cualquier iterable, como objetos JavaScript literales y también cadenas. Entonces, podemos hacer uso de su magia para transformar rápidamente una cadena en una matriz de caracteres. Por ejemplo:

const str = "my string";

const strarr = [...str];

El operador de descanso en JavaScript

Como mencionamos antes, tanto el operador Spread como Rest usan la sintaxis de tres puntos antepuesta al nombre del símbolo.

En la sección anterior, hemos visto varios ejemplos del operador Spread que expande iterables en sus elementos. Ahora, veamos el operador Rest por ejemplo.

Tal como sugiere su nombre, el operador Rest recopila el resto o el resto de elementos en una matriz.

Uso de funciones de argumentos variables (variables) en JavaScript

Supongamos que desea definir una función que podría tomar un número variable de argumentos. Usarías el argumentsobjeto:

function f(){
    return arguments;
}

f(1, 'a', 'hello');

El argumentsobjeto es un objeto similar a una matriz, por lo que no puede usar métodos de matriz con él. Tampoco puede usar con las funciones de Arrow que ahora son muy comunes entre los desarrolladores de JS para definir funciones.

Una mejor alternativa es utilizar el operador Rest. Por ejemplo:


function f(...args){
    return args;
}

Conclusión

En esta publicación rápida, hemos visto la diferencia entre los operadores Spread y Rest en JavaScript (ES6), que utilizan la misma sintaxis de tres puntos. Como resumen, puede usar el operador Spread si desea expandir (descomprimir) los elementos de un objeto iterable, matriz o literal de cadena. Por el contrario, puede utilizar el operador Rest para recopilar varios elementos en una matriz.

Publicar un comentario

0 Comentarios