Header Ads Widget

Ticker

6/recent/ticker-posts

Parámetros de descanso y operadores de propagación de ES6

 

Esta sección de nuestra serie sobre características de ES6 analiza los nuevos operadores de descanso y propagación. Un requisito casi constante en la programación es la capacidad de tomar fácilmente un grupo de valores y ponerlos en una matrizAdemás, también es bastante común tener que tomar valores en una matriz y extraer cada valor a su propia entidad, por así decirlo. Los nuevos operadores Rest y Spread hacen precisamente eso por nosotros cuando escribimos JavaScript en ES6. Echemos un vistazo al uso de los operadores ES6 Rest y Spread aquí.


Introducción del parámetro REST en ES6

El parámetro rest es esta secuencia de tres puntos que se ...usa en una declaración de función para especificar que puede haber varios argumentos restantes, pero los reuniremos todos y los colocaremos en una matriz. En otras palabras, el resto de los argumentos se recopilarán con el parámetro rest. El descanso se refiere a reunir varios parámetros y ponerlos todos en una única matriz. Para resumir: en ES6, el argumento final de la declaración de una función puede ir precedido por ...Esto recopila todos los argumentos restantes cuando se llama a la función, en una matriz. Lo llaman parámetro de descanso, porque obtiene el resto de los parámetros pasados ​​a una función.

Declaremos una función llamada displayTags()y observemos que estamos pasando postIdcomo argumento y ...tagscomo argumento. Los tres puntos que preceden tagsson el símbolo de descanso. Recopilará todos los parámetros restantes de la función. Dentro de la función, simplemente cerramos la sesión tags instanceof ArrayFinalmente, simplemente llamamos displayTags()mientras pasamos 4 parámetros como ve. Obtenemos la salida de true, ya tagsque se establecerá en una matriz.

Tomando este mismo ejemplo, no cerraremos la sesión tagssi sabemos que es una matriz. Vemos la salida de [“php”, “javascript”, “laravel”] . Es claro ver que ...tagsreunió todos los parámetros además del primer argumento que fue postId.

Ejecutemos ahora el mismo código, pero esta vez solo pasaremos un valor cuando llamemos a la función. Pasaremos el postIdúnico, pero aún desconectaremos la tagsvariable. Todavía obtenemos una matriz vacía para ...tagsAunque no hay parámetros adicionales para recopilar, tagsaún se establece en una matriz vacía.


Duración de una función con descanso

En este ejemplo de la displayTags()función, la declararemos nuevamente con postIden la posición del primer argumento y ...tagsen la posición del segundo argumento. Al ejecutar el código, encontramos que la longitud de la función es 1. Esto significa que cuando accede a la longitud de una función, el parámetro rest se ignora. La salida de 1 se refiere postIdaquí.


Duración de argumentscuando se usa el descanso

Aquí haremos uso de un fragmento similar de ES6, pero ahora echaremos un vistazo arguments.lengthy veremos qué obtenemos. Observe que llamamos a la displayTags()función con cuatro argumentos de 25, php, javascript y laravel. El resultado es 4 cuando ejecutamos el código. ¡Muy genial! A pesar de que parece que hay 2 parámetros cuando se declaró la función, postId...tagsarguments.length va a referirse a la llamada a la función. En este caso pasamos 4 argumentos, por eso es que la longitud de argumentos es 4.


Funciones dinámicas usando descanso

Este ejemplo es un poco diferente. El primer parámetro de esta función dinámica es un parámetro de descanso para ...tags, y el cuerpo de la función simplemente regresa tagsSi hacemos una llamada a la función pasando 'php', 'javascript' y 'laravel' , vemos la matriz resultante de [“php”, “javascript”, “laravel”] . Esto solo significa que puede hacer uso de un parámetro de descanso dentro de una función dinámica.


Función de adición obligatoria

Echemos un vistazo a la función de suma obligatoria que puede tomar cualquier número de argumentos. Simplemente declaramos sumy usamos el parámetro rest como nuestro único parámetro como ...numbersEn el cuerpo de la función, en realidad hacemos uso de una función de flecha que acabamos de aprender para implementar la reducción nativa de JavaScript Como puede ver en los ejemplos, cada vez que llamamos sumy pasamos diferentes grupos de números, obtenemos la respuesta correcta.

Veamos un ejemplo más de un parámetro de descanso. Aquí podemos ver que la lista de argumentos es un parámetro de descanso colocado entre paréntesis ya que es una función de flecha. Necesitamos hacer esto ya ...argsque implica múltiples argumentos. Dado que el parámetro rest debe ser el último argumento de una función, solo puede haber un parámetro rest en una función. Si el parámetro rest no es el último, su script arrojará un error.


Presentamos el operador ES6 SPREAD

El operador ES6 Spread está relacionado con el parámetro rest pero funciona casi al revés. El operador de extensión en ES6 se utiliza para extender los elementos de una matriz en una lista de argumentos para la función . El operador de propagación se puede usar en cualquier lugar de la colección de argumentos, no solo el último como con el resto. Veamos algunos ejemplos del operador de propagación en acción.

Aquí configuramos una matriz hipotética de useridsrepresentada por tres números diferentes. Tenga en cuenta que hacemos una llamada a la función Math.max (). Math.max () acepta tantos argumentos como le sea posible, y devolverá el argumento con el valor más alto. Cuando llamamos Math.max () pasamos useridsmientras hacemos uso del operador de propagación . Lo que hace esto es tomar la matriz de useridsdividirla en tres argumentos separados como llamamos a la función. Podemos ver que el resultado es 22, que es el ID de usuario con el valor más alto.


Creando una nueva matriz con extensión

Aquí hay una especie de uso ordenado del operador de propagación en el que configuramos la misma matriz que ya usamos. Esta vez, sin embargo, queremos usar el operador de extensión para tomar esa matriz y copiarla en una nueva matriz. Entonces, cuando vemos [… ID de usuario] , casi podemos interpretarlo como

De hecho, cerrar la sesión newUserIdsArraynos da Array [10, 15, 22] .


Difundir valores vacíos

Si aplicamos el operador de propagación a una matriz de valores vacíos, esto dará como resultado que esos valores no estén definidos. Podemos ver aquí el operador de propagación que se aplica a [,,]. La segunda coma no cuenta, ya que JavaScript le permite tener comas finales en una matriz. Por eso obtenemos dos valores indefinidos en lugar de tres.


Usando untar en una cuerda

Pongamos nuevamente Math.max () en uso, pero esta vez pasaremos una cadena precedida por el operador de propagación. ¡Guau! ¡Volviéndome loco aquí! Resulta que también puedes usar el operador de extensión en cadenas. Entonces, cuando ejecutamos este ejemplo, la cadena se divide en 9 valores diferentes como una lista, y obtenemos el valor máximo de 9 como vemos aquí.

Usemos caracteres de palabras reales en este ejemplo. Aplicamos el operador de propagación a 'Boo Yeah!' y rodearlo de corchetes. Lo que esto dice es, separe cada valor individual en la cadena, luego coloque inmediatamente cada valor individual en una matriz. Cuando ejecutamos el código, eso es exactamente lo que obtenemos, como puede ver aquí.

Como mencionamos, el operador de propagación no tiene reglas sobre dónde puede usarlo como el parámetro rest. El resto del parámetro debe ser el último, pero este no es el caso del operador de propagación. Vea este ejemplo donde aplicamos el operador de propagación al argumento de cadena de 'Foo' en la segunda posición. Cuando ejecutamos el código, podemos ver que 'Boo' permanece intacto, 'Foo' se extiende como era de esperar y 'Too' se deja intacto.


Sumando con spread

Nuevamente configuramos una función de flecha que acepta los parámetros, num1 y num2. Esta entrada, da como resultado la salida de num1 + num2 como podemos ver. El siguiente, tuvimos que crear una serie de números para sumar juntos, numsFinalmente, hacemos una llamada sum()pasando la matriz de numsprecedida por el operador de propagación ...Como esperamos, el operador de dispersión aquí extrae cada valor y lo alimenta a la función de suma.


Desestructuración con el operador de propagación

Aquí configuramos una matriz de caracteres. Luego tomamos esa matriz y la asignamos a una nueva matriz. Observe que utilizamos el operador de extensión en el lado izquierdo de un operador de asignación en este ejemplo.


Resumen de los parámetros de descanso y operadores de propagación de ES6

En resumen, hemos aprendido que cuando desea declarar una función y hacer uso de cualquier número de argumentos, usa el parámetro rest en ES6. Puede utilizar un parámetro rest como el único al declarar la función, o puede declarar varios parámetros e incluir un parámetro rest siempre que sea el último en la lista de parámetros. El parámetro de descanso siempre es el último. Entonces, en lugar de hacer esta suma (num1, num2, num3, num4) , haces esta suma (… nums) durante la declaración de la función.

El operador de propagación hace prácticamente lo contrario. Coloca ... directamente antes de una matriz, y el operador de extensión tomará esa matriz y la dividirá en una lista de argumentos para que la función procese como se llama. Entonces, en lugar de llamar a una función como sum (2, 2) , puede llamarlo así sum (… nums) , asumiendo que numses una matriz de números.


Publicar un comentario

0 Comentarios