У цьому посібнику ви дізнаєтеся про призначення деструктуризації 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, щоб дізнатися більше.
