Operadores de Rest y Spread

@serverSerrverlesskiy

Muchas funciones integradas de ⚙️ JavaScript admiten una cantidad arbitraria de argumentos.

Por ejemplo:

Math.max(arg1, arg2, ..., argN) - Calcula el número máximo de los argumentos dados.

Math.min(arg1, arg2, ..., argN) - devuelve el valor mínimo de los argumentos pasados.

En este artículo, aprenderemos cómo hacer lo mismo con nuestras propias funciones⚙️ y cómo pasar parámetros de matriz a dichas funciones⚙️.

Video

Parámetros residuales `(...rest)`

Parametrs

Puede llamar a una función⚙️ con cualquier cantidad de argumentos, independientemente de cómo se haya definido.

Por ejemplo :

Editor en vivo

function learnJavaScript() {
  let summa = (a, b, c) => {
    return a + b + c
  } // Suma de 3 números

  return summa(1, 2, 3, 4, 5, 6, 7)
}

function learnJavaScript() {
  let summa = (a, b, c) => {
    return a + b + c
  } // Suma de 3 números

  return summa(1, 2, 3, 4, 5, 6, 7)
}

Resultado

Los argumentos adicionales no generarán un error, pero, por supuesto, solo se contarán los tres primeros.

Concepto ES6

Idea

Desde el estándar ES6, ha aparecido el concepto de cómo ...rest son parámetros de descanso.

let goFun = (...rest) => {
  // Algoritmo
}

Los parámetros libres se pueden indicar con tres puntos .... Literalmente, esto significa: "reunir los parámetros restantes y colocarlos en una matriz".

Por ejemplo, recopilemos todos los argumentos en una matriz args:

Editor en vivo

function learnJavaScript() {
  let sumAll = (...args) => {
    // args es el nombre de la matriz de argumentos pasados
    let sum = 0
    for (let arg of args) if (typeof arg === 'number') sum += arg // sum: se recopilará la suma de todos los argumentos numéricos
    return sum
  }
  return sumAll(1, 2, 3, 4, 5, 6, 7, 'React', 'Native')
}

function learnJavaScript() {
  let sumAll = (...args) => {
    // args es el nombre de la matriz de argumentos pasados
    let sum = 0
    for (let arg of args) if (typeof arg === 'number') sum += arg // sum: se recopilará la suma de todos los argumentos numéricos
    return sum
  }
  return sumAll(1, 2, 3, 4, 5, 6, 7, 'React', 'Native')
}

Resultado

La respuesta ya es 28 y sin errores ! Detalle para cambiar los argumentos o la dimensión de la matriz.

Múltiples opciones

Podemos poner los primeros parámetros en variables y recopilar el resto en una matriz. Esto significa que simplemente puede insertar ...rest, pero solo en lugar del último parámetro de función.

paste

let goFun = (first, second, ...rest) => {
  // Algoritmo
}

En el siguiente ejemplo, los dos primeros argumentos de la función 2️⃣ se convertirán en el nombre y el apellido, y el tercer argumento y los subsiguientes se convertirán en la matriz titles[i] :

Editor en vivo

function learnJavaScript() {
  let free = ''
  let showName = (firstName, lastName, ...titles) => {
    free = firstName + ' ' + lastName // Nombre + Apellido
    return titles[0] + ' ' + titles[1]
  }
  // Los parámetros restantes irán a una matriz. titles = ["React", "Native"]
  // titles[0]  // React
  // titles[1]  // Native

  let result = showName('Юлий', 'Цезарь', 'React', 'Native')

  return free + ' или ' + result
}

function learnJavaScript() {
  let free = ''
  let showName = (firstName, lastName, ...titles) => {
    free = firstName + ' ' + lastName // Nombre + Apellido
    return titles[0] + ' ' + titles[1]
  }
  // Los parámetros restantes irán a una matriz. titles = ["React", "Native"]
  // titles[0]  // React
  // titles[1]  // Native

  let result = showName('Юлий', 'Цезарь', 'React', 'Native')

  return free + ' или ' + result
}

Resultado

Posibles errores

error

Los parámetros residuales deben colocarse al final, por lo que no puede escribir nada después de ellos. Esto arrojará un error:

function f(arg1, ...rest, arg2) {   // arg2 después...rest ?
  // ¡Error!
}

Recuerda

...descanso siempre debe ser lo último.

Operador de propagación `...spread`

operators

Aprendimos cómo obtener una matriz a partir de una lista de parámetros, pero a veces es necesario hacer lo contrario: insertar la matriz en una función llamada⚙️.

Por ejemplo, hay una función integrada ⚙️ Math.max. Devuelve el número más grande de la lista:

Editor en vivo

function learnJavaScript() {
  return Math.max(3, 5, 1, 17, 14, 8, 2, 11)
}

function learnJavaScript() {
  return Math.max(3, 5, 1, 17, 14, 8, 2, 11)
}

Resultado

No es tan simple

Index_finger

Digamos que tenemos una matriz de números [3, 5, 1]. ¿Cómo llamar a Math.max para ello?

No puede simplemente insertarlos así: Math.max espera obtener una lista de números, no una sola matriz.

Editor en vivo

function learnJavaScript() {
  let arr = [3, 5, 1, 17, 14, 8, 2, 11]
  return Math.max(arr) // NaN - el valor será indefinido
}

function learnJavaScript() {
  let arr = [3, 5, 1, 17, 14, 8, 2, 11]
  return Math.max(arr) // NaN - el valor será indefinido
}

Resultado

Por supuesto, podemos ingresar números manualmente: Math.max(arr[0], arr[1], arr[2]).

Pero, en primer lugar, se ve mal y, en segundo lugar, no siempre sabemos cuántos argumentos habrá. Puede haber muchos de ellos, o ninguno.

Ocurrencia de parámetro

Transform

Aquí es donde el operador de propagación ...spread resulta útil. Es similar a los parámetros residuales: también usa ..., pero hace exactamente lo contrario.

Cuando la función ⚙️ ...spread se usa en una llamada de función⚙️, convertirá el objeto de matriz arr en una lista de argumentos.

Para Math.max :

Editor en vivo

function learnJavaScript() {
  let arr = [3, 5, 1, 17, 14, 8, 2, 11]

  return Math.max(...arr) // el operador ...arr convierte la matriz `arr` en una lista de argumentos
}

function learnJavaScript() {
  let arr = [3, 5, 1, 17, 14, 8, 2, 11]

  return Math.max(...arr) // el operador ...arr convierte la matriz `arr` en una lista de argumentos
}

Resultado

De la misma manera, podemos pasar múltiples iterables :

Editor en vivo

function learnJavaScript() {
  let arr1 = [1, 2, 34, 41]
  let arr2 = [8, 3, 18, 17]
  let arr3 = [2, 4, 16, 38]

  return 'Max = ' + Math.max(...arr1, ...arr2, ...arr3)
}

function learnJavaScript() {
  let arr1 = [1, 2, 34, 41]
  let arr2 = [8, 3, 18, 17]
  let arr3 = [2, 4, 16, 38]

  return 'Max = ' + Math.max(...arr1, ...arr2, ...arr3)
}

Resultado

¡Enfriar! Un enfoque muy flexible de la programación. También puede combinar el operador de propagación con valores regulares.

Fusiones de matriz

Merger

El operador de propagación ...spread también se puede usar para fusionar matrices :

Editor en vivo

function learnJavaScript() {
  let arr1 = [3, 5, 7]
  let arr2 = [4, 2, 8]

  let merged = [100, ...arr1, 500, ...arr2]
  let str = 'Formación: ' + merged

  return <b>{str}</b>
}

function learnJavaScript() {
  let arr1 = [3, 5, 7]
  let arr2 = [4, 2, 8]

  let merged = [100, ...arr1, 500, ...arr2]
  let str = 'Formación: ' + merged

  return <b>{str}</b>
}

Resultado

Convertir a cadena

Transform

La funcionalidad ⚙️ del operador de propagación ...spread funciona en cualquier objeto iterable.

Por ejemplo, el operador de expansión es adecuado para convertir una cadena en una matriz de caracteres :

let str = '¡Oye Alex!'
let result = [...str]

spread

Veamos qué pasa. Debajo del capó, el operador de propagación usa iteradores para iterar sobre los elementos. Tal como lo hace for..of.

El bucle for..of itera sobre la cadena como una secuencia de caracteres, por lo que ...str produce "Q", "y", "e"... Los caracteres resultantes se recopilan en una matriz utilizando la declaración de matriz estándar [...str].

También podemos usar Array.from para esta tarea. También convierte el objeto iterable (como una cadena) en una matriz :

let str = 'Oye'
Array.from(str) // "Q", "y", "e"
// Array.from convierte el objeto iterable en una matriz

spread

El resultado es similar a [...str]. Pero hay una diferencia entre Array.from(obj) y [...obj]:

Array.from funciona tanto con pseudo-matrices como con iterables.
El operador de propagación ...spread funciona solo con iterables.

Por lo tanto, Array.from es un método más general.

Total

Elipsis

Cuando vemos "..." en el código , puede ser ...rest parámetros residuales o ...spread operador de propagación.

Cómo distinguirlos:

Si ... está ubicado al final de la lista de argumentos de la función, entonces estos son "parámetros residuales". Recopila los argumentos no especificados restantes y crea una matriz a partir de ellos.
Si ... ocurre en una llamada de función o en otro lugar, entonces es un "operador de extensión". Recupera elementos de la matriz para inicializar la función.

Bueno para recordar:

Los parámetros residuales se utilizan para crear nuevas funciones con un número indefinido de argumentos.
Con el operador de propagación, puede insertar una matriz en una función que, de forma predeterminada, funciona con una lista de argumentos regulares.
Juntas, estas construcciones facilitan la conversión de conjuntos de valores en matrices y viceversa.

¿Problemas?

Problem

Escribe en Discord o Telegram chat y suscríbete a nuestras noticias

JavaScript Camp

Preguntas

Question

Si ... está ubicado al final de la lista de argumentos de la función, entonces estamos tratando con:

Parámetro residual
Operador de extensión
Indicadores aleatorios

Para crear una función con un número indefinido de argumentos, utilice:

Parámetros residuales ...rest
Operador de propagación ...spread
Funciones de llamadas externas

Puede fusionar dos matrices en una usando:

El operador de expansión ...rest
Operador de propagación ...spread

Para comprender cuánto ha aprendido esta lección, realice una prueba en la aplicación móvil de nuestra escuela sobre este tema o en nuestro bot de Telegram.