JavaScript obiect Destructuring

rezumat: în acest tutorial, veți afla despre Javascript obiect destructuring care atribuie proprietăți ale unui obiect la variabile individuale.

dacă doriți să aflați cum să destructurați o matrice, puteți consulta tutorialul array destructuring.

Introducere în atribuirea de destructurare a obiectelor JavaScript

să presupunem că aveți un obiect person cu două proprietăți: firstName și lastName.

Code language: JavaScript (javascript)

înainte de ES6, când doriți să atribuiți proprietăți ale obiectului person variabilelor, de obicei o faceți astfel:

Code language: JavaScript (javascript)

ES6 introduce sintaxa destructuring obiect care oferă o modalitate alternativă de a atribui proprietăți ale unui obiect la variabile:

Code language: JavaScript (javascript)

în acest exemplu, proprietățile firstName și lastName sunt atribuite variabilelor fName și respectiv lName.

în această sintaxă:

Code language: JavaScript (javascript)

identificatorul înainte de colon (:) este proprietatea obiectului și identificatorul după colon este variabila.

observați că numele proprietății este întotdeauna pe stânga dacă este un obiect literal sau obiect destructuring sintaxă.

dacă variabilele au aceleași nume ca proprietățile obiectului, puteți face Codul mai concis după cum urmează:

Code language: JavaScript (javascript)

în acest exemplu, am declarat două variabile firstName și lastName și am atribuit proprietățile obiectului persoană variabilelor din aceeași instrucțiune.

este posibilă separarea Declarației de atribuire. Cu toate acestea, trebuie să înconjurați variabilele între paranteze:

dacă nu utilizați parantezele, motorul JavaScript va interpreta partea stângă ca un bloc și va arunca o eroare de sintaxă.

când atribuiți o proprietate care nu există unei variabile folosind destructurarea obiectului, variabila este setată la undefined. De exemplu:

Code language: JavaScript (javascript)

în acest exemplu, proprietatea middleName nu există în obiectul person, prin urmare, variabila middleName este undefined.

setarea valorilor implicite

puteți atribui o valoare implicită variabilei atunci când proprietatea unui obiect nu există. De exemplu:

Code language: JavaScript (javascript)

în acest exemplu, am atribuit șirul gol variabilei middleName atunci când obiectul persoană nu are proprietatea middleName.

de asemenea, atribuim proprietatea currentAge variabilei age cu valoarea implicită de 18.

cu toate acestea, atunci când obiectul persoană are proprietatea middleName, atribuirea funcționează ca de obicei:

Code language: JavaScript (javascript)

destructurarea unui obiect null

o funcție poate returna un obiect sau null în anumite situații. De exemplu:

Code language: JavaScript (javascript)

și utilizați obiectul destructuring atribuire:

Code language: JavaScript (javascript)

codul va arunca o TypeError:

Code language: JavaScript (javascript)

pentru a evita acest lucru, puteți utiliza operatorul OR (||) pentru a retrage obiectul null la un obiect gol:

Code language: JavaScript (javascript)

acum, nu va apărea nicio eroare. Și firstName și lastName vor fi undefined.

obiect imbricat destructuring

presupunând că aveți un obiect employee care are un obiect name ca proprietate:

Code language: JavaScript (javascript)

următoarea declarație destructurează proprietățile obiectului imbricat name în variabile individuale:

Code language: JavaScript (javascript)

este posibil să se facă atribuirea multiplă a unei proprietăți la mai multe variabile:

Code language: JavaScript (javascript)

Destructuring argumentele funcției

să presupunem că aveți o funcție care afișează obiectul persoană:

Code language: JavaScript (javascript)

este posibil să destructure argumentul obiect trecut în funcția de genul asta:

Code language: JavaScript (javascript)

se pare mai puțin verbose mai ales atunci când utilizați mai multe proprietăți ale obiectului argument. Această tehnică este adesea folosită în React.

rezumat

• destructurarea obiectelor atribuie proprietățile unui obiect variabilelor cu aceleași nume în mod implicit.