6 grandes usos del operador de distribución -

Gracias a ES6 ya empresas como Babel, escribir JavaScript se ha vuelto increíblemente dinámico, desde la nueva sintaxis del lenguaje hasta el análisis personalizado como JSX. Me he convertido en un gran admirador del operador de extensión, tres puntos que pueden cambiar la forma en que completas tareas dentro de JavaScript. ¡La siguiente es una lista de mis usos favoritos del operador de extensión dentro de JavaScript!

Llamar a funciones sin aplicar

Hasta este punto hemos llamado a Function.prototype.apply, pasando una matriz de argumentos, para llamar a una función con un conjunto dado de parámetros contenidos en una matriz:

function doStuff (x, y, z) { }var args = [0, 1, 2];// Llama a la función y pasa argsdoStuff.apply(null, args);

Con el operador de extensión podemos evitarlo applytodo y simplemente llamar a la función con el operador de extensión antes de la matriz:

hacer cosas(...argumentos);

¡El código es más corto, más limpio y no es necesario utilizar un código inútil null!

Matrices combinadas

Siempre ha habido una variedad de formas de combinar matrices, pero el operador de extensión ofrece un nuevo método para combinar matrices:

arr1.push(...arr2) // Agrega elementos arr2 al final de la matrizarr1.unshift(...arr2) //Agrega elementos arr2 al comienzo de la matriz

Si desea combinar dos matrices y colocar elementos en cualquier punto dentro de la matriz, puede hacer lo siguiente:

var arr1 = ['dos', 'tres'];var arr2 = ['uno', ...arr1, 'cuatro', 'cinco'];// ["uno", "dos", "tres", "cuatro cinco"]

¡Sintaxis más corta que otros métodos y al mismo tiempo agrega control posicional!

Copiar matrices

Obtener una copia de una matriz es una tarea frecuente, algo para lo que hemos usadoArray.prototype.slice en el pasado, pero ahora podemos usar el operador de extensión para obtener una copia de una matriz:

var arr = [1,2,3];var arr2 = [...arr]; // como arr.slice()arr2.push(4)

Recuerde: los objetos dentro de la matriz siguen siendo por referencia, por lo que no todo se “copia” per se.

Convertir argumentos de NodeList a Array

Al igual que copiar matrices, hemos usado Array.Prototype.slicepara convertir objetos NodeListy argumentsy a matrices verdaderas, pero ahora podemos usar el operador de extensión para completar esa tarea:

[...document.querySelectorAll('div')]

Incluso obtener puedes los argumentos como una matriz desde la firma:

var miFn = función(...args) {// ...}

¡No olvides que también puedes hacer esto con Array.from!

Usando Mathfunciones

Por supuesto, el operador difunde “difunde” una matriz en diferentes argumentos, por lo que cualquier función en la que se utiliza difunde como argumento puede ser utilizada por funciones que puedan aceptar cualquier número de argumentos.

let números = [9, 4, 7, 1];Math.min(...números); // 1

El Mathconjunto de funciones del objeto es un ejemplo perfecto del operador de extensión como único argumento de una función.

Diversión desestructurante

La destrucción es una práctica divertida que estoy usando muchísimo en mis proyectos de React, así como en otras aplicaciones de Node.js. Puedes usar la desestructuración y el operador resto juntos para extraer la información en las variables que desees:

mar { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };console.log(x); // 1console.log(y); // 2console.log(z); // { a: 3, b: 4 }

¡Las propiedades restantes se asignan a la variable después del operador de extensión!

ES6 no sólo ha hecho que JavaScript sea más eficiente sino también más divertido. Todos los navegadores modernos admiten la nueva sintaxis ES6, por lo que si no te ha tomado el tiempo para probar, definitivamente deberías hacerlo. Si prefiere experimentar independientemente del entorno, asegúrese de consultar mi publicaciónIntroducción a ES6. En cualquier caso, el operador de extensión es una característica útil en JavaScript que debes tener en cuenta.