У овом упутству ћете научити о додељивању ЈаваСцрипт деструктурирања уз помоћ примера.
ЈаваСцрипт деструктурирање
Задатак деструктурирања уведен у ЕС6 олакшава додељивање вредности низа и својстава објекта различитим променљивим. На пример,
пре ЕС6:
// 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
Из ЕС6:
// 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
Напомена : Редослед имена није битан у деструктурирању објеката.
На пример, горе наведени програм можете написати као:
let ( age, gender, name ) = person; console.log(name); // Sara
Напомена : При деструктурирању објеката, требало би да користите исто име за променљиву као одговарајући кључ објекта.
На пример,
let (name1, age, gender) = person; console.log(name1); // undefined
Ако желите да доделите различита имена променљивих за кључ објекта, можете да користите:
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
Деструктурирање низа
На сличан начин можете извршити и деструктурирање низа. На пример,
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
Доделите подразумеване вредности
Можете користити задате вредности за променљиве док користите деструктурирање. На пример,
let arrValue = (10); // assigning default value 5 and 7 let (x = 5, y = 7) = arrValue; console.log(x); // 10 console.log(y); // 7
У горњем програму, аррВалуе има само један елемент. Стога,
- променљива к биће 10
- променљива и узима подразумевану вредност 7
У деструктурирању објеката на сличан начин можете проследити подразумеване вредности. На пример,
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
Замјена променљивих
У овом примеру, две променљиве се замењују користећи синтаксу додељивања деструктурирања.
// program to swap variables let x = 4; let y = 7; // swapping variables (x, y) = (y, x); console.log(x); // 7 console.log(y); // 4
Прескочи ставке
Нежељене ставке у низу можете прескочити без додељивања локалним променљивим. На пример,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, , z) = arrValue; console.log(x); // one console.log(z); // three
У горњем програму други елемент је изостављен употребом сепаратора зареза ,.
Доделите преостале елементе једној променљивој
Преостале елементе низа можете доделити променљивој користећи синтаксу ширења … . На пример,
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")
Овде oneсе додељује к променљивој. А остали елементи низа су додељени и променљивој.
Остала својства објекта такође можете доделити једној променљивој. На пример,
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")
Напомена : Променљива са синтаксом ширења не може имати зарез ,. Требали бисте користити овај елемент остатка (променљиву са синтаксом ширења) као последњу променљиву.
На пример,
const arrValue = ('one', 'two', 'three', 'four'); // throws an error const (… x, y) = arrValue; console.log(x); // eror
Угњежђени задатак за деструктурирање
Можете извршити угнежђено деструктурирање за елементе низа. На пример,
// 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
Овде су променљивим и и з додељени угнежђени елементи twoи three.
Да бисте извршили угнежђени задатак деструктурирања, морате променљиве приложити у структуру низа (затварањем изнутра ()).
Такође можете извести угнежђено деструктурирање својстава објекта. На пример,
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
Да бисте извршили угнежђени задатак деструктурирања за објекте, морате променљиве приложити у структуру објекта (затварањем изнутра ()).
Напомена : Функција додељивања деструктурирања уведена је у ЕС6 . Неки прегледачи можда не подржавају употребу задатка за деструктурирање. Посетите подршку за Јавасцрипт деструктурирање да бисте сазнали више.
