În acest tutorial, veți afla despre atribuirea destructurării JavaScript cu ajutorul exemplelor.
JavaScript Destructurare
Alocarea de destructurare introdusă în ES6 facilitează atribuirea valorilor matricei și a proprietăților obiectelor variabilelor distincte. De exemplu,
Înainte de ES6:
// assigning object attributes to variables const person = ( name: 'Sara', age: 25, gender: 'female' ) let name = person.name; let age = person.age; let gender = person.gender; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
De la ES6:
// assigning object attributes to variables const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment let ( name, age, gender ) = person; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Notă : Ordinea numelui nu contează în destructurarea obiectelor.
De exemplu, puteți scrie programul de mai sus ca:
let ( age, gender, name ) = person; console.log(name); // Sara
Notă : Când destructurați obiecte, ar trebui să utilizați același nume pentru variabilă ca cheia obiect corespunzătoare.
De exemplu,
let (name1, age, gender) = person; console.log(name1); // undefined
Dacă doriți să atribuiți diferite nume de variabile pentru cheia obiectului, puteți utiliza:
const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment // using different variable names let ( name: name1, age: age1, gender:gender1 ) = person; console.log(name1); // Sara console.log(age1); // 25 console.log(gender1); // female
Array Destructuring
De asemenea, puteți efectua destructurarea matricei într-un mod similar. De exemplu,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, y, z) = arrValue; console.log(x); // one console.log(y); // two console.log(z); // three
Atribuiți valori implicite
Puteți atribui valorile implicite pentru variabile în timp ce utilizați destructurarea. De exemplu,
let arrValue = (10); // assigning default value 5 and 7 let (x = 5, y = 7) = arrValue; console.log(x); // 10 console.log(y); // 7
În programul de mai sus, arrValue are un singur element. Prin urmare,
- variabila x va fi 10
- variabila y ia valoarea implicită 7
În destructurarea obiectelor, puteți transmite valorile implicite într-un mod similar. De exemplu,
const person = ( name: 'Jack', ) // assign default value 26 to age if undefined const ( name, age = 26) = person; console.log(name); // Jack console.log(age); // 26
Schimbarea variabilelor
În acest exemplu, două variabile sunt schimbate utilizând sintaxa alocării destructurării.
// program to swap variables let x = 4; let y = 7; // swapping variables (x, y) = (y, x); console.log(x); // 7 console.log(y); // 4
Treceți peste articole
Puteți sări peste elementele nedorite dintr-o matrice fără a le atribui variabilelor locale. De exemplu,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, , z) = arrValue; console.log(x); // one console.log(z); // three
În programul de mai sus, al doilea element este omis utilizând separatorul de virgule ,.
Atribuiți elementele rămase unei singure variabile
Puteți atribui elementele rămase ale unui tablou unei variabile utilizând sintaxa spread … . De exemplu,
const arrValue = ('one', 'two', 'three', 'four'); // destructuring assignment in arrays // assigning remaining elements to y const (x,… y) = arrValue; console.log(x); // one console.log(y); // ("two", "three", "four")
Aici, oneeste atribuită variabilei x. Iar restul elementelor matricei sunt atribuite variabilei y.
De asemenea, puteți atribui restul proprietăților obiectului unei singure variabile. De exemplu,
const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment // assigning remaining properties to rest let ( name,… rest ) = person; console.log(name); // Sara console.log(rest); // (age: 25, gender: "female")
Notă : Variabila cu sintaxă spread nu poate avea o virgulă finală ,. Ar trebui să utilizați acest element de repaus (variabilă cu sintaxă spread) ca ultimă variabilă.
De exemplu,
const arrValue = ('one', 'two', 'three', 'four'); // throws an error const (… x, y) = arrValue; console.log(x); // eror
Atribuire de destructurare imbricată
Puteți efectua destructurarea imbricată pentru elementele matrice. De exemplu,
// nested array elements const arrValue = ('one', ('two', 'three')); // nested destructuring assignment in arrays const (x, (y, z)) = arrValue; console.log(x); // one console.log(y); // two console.log(z); // three
Aici, variabilelor y și z li se atribuie elemente imbricate twoși three.
Pentru a executa misiunea de destructurare imbricată, trebuie să includeți variabilele într-o structură matrice (prin încadrarea în interior ()).
De asemenea, puteți efectua o destructurare imbricată pentru proprietățile obiectului. De exemplu,
const person = ( name: 'Jack', age: 26, hobbies: ( read: true, playGame: true ) ) // nested destructuring const (name, hobbies: (read, playGame)) = person; console.log(name); // Jack console.log(read); // true console.log(playGame); // true
Pentru a executa atribuirea de destructurare imbricată pentru obiecte, trebuie să includeți variabilele într-o structură de obiect (prin încadrarea în interior ()).
Notă : Caracteristica de alocare a destructurării a fost introdusă în ES6 . Este posibil ca unele browsere să nu accepte utilizarea atribuirii de destructurare. Accesați asistența pentru destructurarea Javascript pentru a afla mai multe.
