V tej vadnici boste s pomočjo primerov spoznali dodelitev JavaScript za destrukturiranje.
Destrukturiranje JavaScript
Dodelitev destrukturiranja, uvedena v ES6, olajša dodelitev vrednosti matrike in lastnosti objekta različnim spremenljivkam. Na primer,
pred 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
Od 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
Opomba : vrstni red imena pri destrukturiranju objektov ni pomemben.
Na primer, zgornji program lahko napišete kot:
let ( age, gender, name ) = person; console.log(name); // Sara
Opomba : Pri destrukturiranju objektov morate za spremenljivko uporabiti isto ime kot ustrezni ključ objekta.
Na primer
let (name1, age, gender) = person; console.log(name1); // undefined
Če želite ključu predmeta dodeliti različna imena spremenljivk, lahko uporabite:
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
Destrukturiranje matrike
Na podoben način lahko izvedete tudi destrukturiranje matrike. Na primer
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
Dodelite privzete vrednosti
Med uporabo destrukturiranja lahko spremenljivkam dodelite privzete vrednosti. Na primer
let arrValue = (10); // assigning default value 5 and 7 let (x = 5, y = 7) = arrValue; console.log(x); // 10 console.log(y); // 7
V zgornjem programu ima arrValue samo en element. Torej,
- spremenljivka x bo 10
- spremenljivka y ima privzeto vrednost 7
Pri destrukturiranju objektov lahko privzete vrednosti posredujete na podoben način. Na primer
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
Zamenjava spremenljivk
V tem primeru sta dve spremenljivki zamenjani z uporabo sintakse dodelitve destrukturiranja.
// program to swap variables let x = 4; let y = 7; // swapping variables (x, y) = (y, x); console.log(x); // 7 console.log(y); // 4
Preskoči elemente
Neželene elemente v polju lahko preskočite, ne da bi jih dodelili lokalnim spremenljivkam. Na primer
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, , z) = arrValue; console.log(x); // one console.log(z); // three
V zgornjem programu je drugi element z uporabo ločila vejic izpuščen ,.
Preostale elemente dodeli eni spremenljivki
Preostale elemente polja lahko spremenljivki dodelite s pomočjo sintakse širjenja … . Na primer
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")
Tu oneje dodeljena spremenljivki x. Preostali elementi matrike pa so dodeljeni spremenljivki y.
Preostale lastnosti predmeta lahko dodelite tudi eni spremenljivki. Na primer
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")
Opomba : Spremenljivka s sintakso širjenja ne sme imeti zadnje vejice ,. Ta zadnji element (spremenljivka s sintakso razširitve) uporabite kot zadnjo spremenljivko.
Na primer
const arrValue = ('one', 'two', 'three', 'four'); // throws an error const (… x, y) = arrValue; console.log(x); // eror
Ugnezdena dodelitev za destrukturiranje
Izvedete lahko ugnezdena destrukturiranja elementov matrike. Na primer
// 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
Tu sta spremenljivkama y in z dodeljena ugnezdena elementa twoin three.
Za izvedbo ugnezdene naloge za destrukturiranje morate spremenljivke zapreti v strukturo matrike (tako, da jo zaprete znotraj ()).
Za lastnosti objekta lahko izvedete tudi ugnezdena destrukturiranja. Na primer
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
Za izvedbo ugnezdene dodelitve destrukturiranja za predmete morate spremenljivke zapreti v strukturo objektov (tako, da jih zaprete znotraj ()).
Opomba : Funkcija dodelitve prestrukturiranja je bila uvedena v ES6 . Nekateri brskalniki morda ne podpirajo uporabe dodelitve destrukturiranja. Obiščite podporo za destrukturiranje Javascripta, če želite izvedeti več.
