Comprender el operador de propagación en JavaScript

Las versiones más nuevas de JavaScript han aportado grandes mejoras al lenguaje en términos de expresividad y facilidad de desarrollo, pero el rápido ritmo de cambio ha dejado a muchos desarrolladores con la sensación de que están luchando por mantenerse al día.

Con WordPress ahora adoptando React y JavaScript moderno en el nuevo editor de Gutenberg, la audiencia masiva de desarrolladores de WordPress está llegando a este mundo, les guste o no, y están luchando rápidamente para ponerse al día.

En esta publicación, vamos a desglosar una de las nuevas características más populares del lenguaje JavaScript: el operador Spread (también conocido como el ... operador).

Recientemente, un amigo pidió ayuda para comprender un código de ejemplo de la biblioteca de bloques de Gutenberg, en particular la galería. A partir de este escrito, ese código se puede ver aquípero se ha movido varias veces, así que lo reproduzco a continuación:

setImageAttributes( index, attributes ) { 
  const { attributes: { images }, setAttributes } = this.props; 
  if ( ! images[index] ) { 
    return; 
  } 
  setAttributes( { 
    images: [
      ...images.slice( 0, index ),
      { 
        ...images[ index], 
        ...attributes, 
      }, 
      ...images.slice( index + 1 ), 
    ], 
  } );
}

En particular, la parte confusa fue:

images: [
  ...images.slice( 0, index ), 
  { 
    ...images[ index], 
    ...attributes, 
  }, 
  ...images.slice( index + 1 ),
],

Esto ciertamente parece un poco intimidante, especialmente si no ha pasado todo su tiempo recientemente codificando JavaScript moderno. Analicemos lo que está sucediendo.

Operadores de propagación para matrices

La pieza central a saber es la ... sintaxis. Este es el operador de propagación, y esencialmente toma una matriz o un objeto y lo expande en su conjunto de elementos. Esto le permite hacer cosas sofisticadas, por ejemplo, si tiene el código:

const array = [1, 2];
const array2 = [...array, 3, 4];

El valor de array2 terminará siendo [1, 2, 3, 4].

El operador de propagación esencialmente le permite colocar una matriz y obtener sus valores.

Volviendo a nuestro ejemplo de código original, en el nivel externo lo que tenemos es

images = [...images.slice(0, index), {some stuff}, ...images.slice(index+1)]

Lo que esto quiere decir es: configure la matriz de imágenes para que sea la matriz de imágenes anterior desde 0 hasta el índice, seguida de algo nuevo que cubriremos en breve, seguida de la matriz de imágenes anterior desde el índice + 1 hasta el final.

En otras palabras, vamos a reemplazar el artículo en index.

Operadores de propagación para objetos

A continuación, para los objetos que difunden la sintaxis le permite hacer el equivalente de Object.assign, copiando los valores de un objeto en uno nuevo. Mirando un ejemplo de código simple:

const obj1 = {a: 'a', b: 'b'};
const obj2 = {c: 'c', ...obj1};

Esto resulta en obj2 siendo {a: 'a', b: 'b', c: 'c'}.

Volviendo al ejemplo del código de Gutenberg, el nivel interno (etiquetado como {some stuff} en nuestra evaluación de la matriz), tenemos:

{ 
  ...images[index], 
  ...attributes,
}

Para traducir: cree un objeto, rellénelo primero con los valores de images[index]y luego con los valores de attributes. Cualquier valor duplicado se sobrescribe con el último.

Así que esto está diciendo: toma mi vieja imagen de indexy aplicar los valores que tengo en attributes a ella, con valores en attributes tomando precedencia.

Si volvemos a nuestro ejemplo de código completo:

images: [
  ...images.slice( 0, index ), 
  { 
    ...images[ index], 
    ...attributes, 
  }, 
  ...images.slice( index + 1 ),
],

Todo lo más elegante es decir: tengo una matriz de imágenes, un índice y un conjunto de atributos que quiero aplicar. Devuelve una nueva matriz de imágenes que cambia el elemento en index tener mis nuevos atributos.

La sintaxis extendida permite un código compacto y expresivo

Veamos lo que hemos logrado. En una declaración breve, con suerte ahora legible, hemos logrado crear una nueva copia de una matriz que tiene un objeto complejo actualizado en un índice particular. No hemos modificado la matriz original, lo que significa que otras partes de nuestro código pueden llamar a esto sin temor a los efectos secundarios. Hermoso.

Similar Posts

Leave a Reply

Your email address will not be published.