Com s'utilitza la desestructuració i l'operador Spread?

Bloc

Com s'utilitza la desestructuració i l'operador Spread?

Una anàlisi en profunditat de com utilitzar la desestructuració i l'operador de propagació amb objectes i matrius.



JavaScript evoluciona constantment amb noves funcions que s’afegeixen cada any. El conjunt més gran d'aquests canvis va ser quan es va llançar JavaScript ES6. ES6 va canviar JavaScript completament i el va convertir en un llenguatge molt més modern amb moltes funcions agradables. Una d’aquestes funcions sorprenents, que faig servir cada dia, és la desestructuració i l’operador de propagació. En aquest article us mostraré exactament què són aquestes dues coses, com podeu utilitzar-les amb matrius i objectes i, sobretot, quan s’utilitzen aquestes funcions.

Si preferiu aprendre visualment, consulteu la versió en vídeo d’aquest article:



Què és la desestructuració?

En termes senzills, la desestructuració és una manera elegant de JavaScript de separar matrius i objectes. En general, permet obtenir peces individuals de matrius i objectes amb menys codi i obrir multitud de possibilitats. En realitat, això no sembla gaire més que sucre sintàctic, però aquest petit canvi fa que fer moltes tasques sigui molt més fàcil. La desestructuració en matrius i objectes és molt similar, però és una mica més fàcil d’entendre amb matrius, així que començaré explicant com destructurar matrius.

Destructurant una matriu

Imagineu que voleu treure el primer element d’una matriu. Normalment, ho faria accedint a l’element de l’índex 0.



const array = ['A', 'B', 'C', 'D', 'E'] const first = array[0] console.log(first) // A

Això és bastant senzill, però i si voleu ara els dos primers elements? Haureu d’escriure una altra línia de codi per obtenir aquest element.

hi ha indicadors en python
const array = ['A', 'B', 'C', 'D', 'E'] const first = array[0] const second = array[1] console.log(first) // A console.log(second) // B

Una vegada més, això no és realment un gran problema, però això es pot simplificar lleugerament amb la desestructuració. En lloc d'obtenir cada element que volem individualment, obtindrem tots els elements alhora.

const array = ['A', 'B', 'C', 'D', 'E'] const [first, second] = array console.log(first) // A console.log(second) // B

Aquesta sintaxi probablement sembla realment confusa, però en realitat és una mica més senzilla del que sembla. Essencialment per indicar que estem fent una desestructuració de matriu i intentant obtenir elements d'una matriu, hem d'embolicar les nostres variables entre claudàtors. Això és el que fem quan emboliquem first i second entre parèntesis. A continuació, acabem d’establir aquell grup de variables entre claudàtors ([first, second]) igual a la matriu de la qual volem obtenir els elements.

Això indica a JavaScript que agafi la matriu a la part dreta del signe igual i assigni el primer element a la primera variable entre claudàtors del costat esquerre del signe igual. Fa el mateix amb el segon element de la matriu i l’assigna a la segona variable entre claudàtors. Després continuaria fins que no quedessin més elements entre claudàtors. Si volguéssim obtenir els tres primers elements de la matriu, és tan senzill com afegir una nova variable als claudàtors.

const array = ['A', 'B', 'C', 'D', 'E'] const [first, second, third] = array console.log(first) // A console.log(second) // B console.log(third) // C

A més, si voleu ometre un element, per exemple, si només voleu els elements un i tres, només deixareu el nom de la segona variable, però mantingueu la coma. Aquesta coma indica a JS que només salti el segon element.

const array = ['A', 'B', 'C', 'D', 'E'] const [first,, third] = array console.log(first) // A console.log(third) // C

Ara bé, això per si sol no és tan útil, ja que sovint no cal accedir a una matriu com aquesta, però, i si voleu tots els elements d'una matriu, excepte els dos primers? Aquí és on entra l’operador de propagació.

per restablir la contrasenya del correu electrònic

#javascript # es6 # desenvolupament web # desenvolupador

blog.webdevsimplified.com

Com s'utilitza la desestructuració i l'operador Spread?

Una anàlisi en profunditat de com utilitzar la desestructuració i l'operador de propagació amb objectes i matrius.