U ovom ćete tutorijalu uz primjere naučiti o dodjeli JavaScript destrukturiranja.
JavaScript destrukturiranje
Zadatak destrukturiranja uveden u ES6 olakšava dodjeljivanje vrijednosti niza i svojstava objekta različitim varijablama. Na primjer,
prije 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
Iz 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
Napomena : Redoslijed imena nije važan u destrukturiranju objekata.
Na primjer, gornji program možete napisati kao:
let ( age, gender, name ) = person; console.log(name); // Sara
Napomena : Kada destrukturirate objekte, trebali biste koristiti isto ime za varijablu kao odgovarajući ključ objekta.
Na primjer,
let (name1, age, gender) = person; console.log(name1); // undefined
Ako želite dodijeliti različita imena varijabli za ključ objekta, možete koristiti:
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 niza
Na sličan način možete izvršiti i destrukturiranje niza. Na primjer,
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
Dodijelite zadane vrijednosti
Možete dodijeliti zadane vrijednosti varijablama dok koristite destrukturiranje. Na primjer,
let arrValue = (10); // assigning default value 5 and 7 let (x = 5, y = 7) = arrValue; console.log(x); // 10 console.log(y); // 7
U gornjem programu arrValue ima samo jedan element. Stoga,
- varijabla x bit će 10
- varijabla y uzima zadanu vrijednost 7
U destrukturiranju objekata na sličan način možete prosljeđivati zadane vrijednosti. Na primjer,
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
Zamjena varijabli
U ovom se primjeru dvije varijable zamjenjuju pomoću sintakse dodjele 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 stavke
Neželjene stavke u nizu možete preskočiti bez dodjeljivanja lokalnim varijablama. Na primjer,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, , z) = arrValue; console.log(x); // one console.log(z); // three
U gornjem programu drugi element izostavljen je upotrebom separatora zareza ,.
Dodijelite preostale elemente jednoj varijabli
Preostale elemente niza možete dodijeliti varijabli koristeći sintaksu širenja … . Na primjer,
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")
Ovdje oneje dodijeljena x varijabli. A ostatak elemenata niza dodijeljen je y varijabli.
Ostala svojstva objekta možete dodijeliti jednoj varijabli. Na primjer,
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")
Napomena : Varijabla sa sintaksom širenja ne može sadržavati zarez ,. Trebali biste koristiti ovaj element ostatka (varijabla sa sintaksom širenja) kao zadnju varijablu.
Na primjer,
const arrValue = ('one', 'two', 'three', 'four'); // throws an error const (… x, y) = arrValue; console.log(x); // eror
Ugniježđena zadaća za destrukturiranje
Možete izvesti ugniježđeno destrukturiranje za elemente niza. Na primjer,
// 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
Ovdje su varijabli y i z dodijeljeni ugniježđeni elementi twoi three.
Da biste izvršili ugniježđeni zadatak destrukturiranja, morate varijable priložiti u strukturu niza (zatvaranjem iznutra ()).
Također možete izvesti ugniježđeno destrukturiranje svojstava objekta. Na primjer,
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
Da biste izvršili ugniježđenu dodjelu destrukturiranja za objekte, morate priložiti varijable u strukturu objekta (zatvaranjem iznutra ()).
Napomena : Značajka dodjeljivanja destrukturiranja uvedena je u ES6 . Neki preglednici možda ne podržavaju upotrebu zadatka za destrukturiranje. Posjetite podršku za Javascript destrukturiranje da biste saznali više.
