В този урок ще научите за заданието за деструктуриране на JavaScript с помощта на примери.
Деструктуриране на JavaScript
Присвояването на деструктуриране, въведено в ES6, улеснява присвояването на стойности на масива и свойства на обекта на различни променливи. Например,
преди 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
От 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
Забележка : Редът на името няма значение при деструктурирането на обекти.
Например, можете да напишете горната програма като:
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
В горната програма arrValue има само един елемент. Следователно,
- променливата x ще бъде 10
- променливата y приема стойността по подразбиране 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се присвоява на променливата x. А останалите елементи на масива се присвояват на y променлива.
Можете също да присвоите останалите свойства на обекта на една променлива. Например,
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
Тук на променливите y и z се присвояват вложени елементи 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
За да изпълните вложеното задание за деструктуриране на обекти, трябва да приложите променливите в обектна структура (чрез затваряне вътре ()).
Забележка : Функцията за преструктуриране е въведена в ES6 . Някои браузъри може да не поддържат използването на заданието за деструктуриране. Посетете поддръжката на Javascript за деструктуриране, за да научите повече.
