V tomto výučbe sa na príkladoch dozviete o priradení k deštrukcii kódu JavaScript.
Deštrukturalizácia JavaScriptu
Deštrukčné priradenie zavedené v ES6 uľahčuje priradenie hodnôt poľa a vlastností objektov k odlišným premenným. Napríklad
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
Z 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
Poznámka : Pri deštrukcii objektov nezáleží na poradí názvu.
Vyššie uvedený program môžete napríklad napísať ako:
let ( age, gender, name ) = person; console.log(name); // Sara
Poznámka : Pri deštrukturalizácii objektov by ste mali pre premennú používať rovnaký názov ako zodpovedajúci kľúč objektu.
Napríklad,
let (name1, age, gender) = person; console.log(name1); // undefined
Ak chcete kľúču objektu priradiť rôzne názvy premenných, môžete použiť:
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
Pole Deštrukturalizácia
Podobným spôsobom môžete vykonať aj deštrukciu poľa. Napríklad,
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
Priraďte predvolené hodnoty
Pri deštrukturalizácii môžete premenným priradiť predvolené hodnoty. Napríklad,
let arrValue = (10); // assigning default value 5 and 7 let (x = 5, y = 7) = arrValue; console.log(x); // 10 console.log(y); // 7
Vo vyššie uvedenom programe má arrValue iba jeden prvok. Teda
- premenná x bude 10
- premenná y má predvolenú hodnotu 7
Pri deštrukcii objektov môžete predvolené hodnoty odovzdať podobným spôsobom. Napríklad,
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
Zamieňanie premenných
V tomto príklade sú dve premenné zamenené pomocou syntaxe deštrukčného priradenia.
// 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ť položky
Môžete preskočiť nechcené položky v poli bez ich priradenia k lokálnym premenným. Napríklad,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, , z) = arrValue; console.log(x); // one console.log(z); // three
Vo vyššie uvedenom programe je druhý prvok vynechaný pomocou oddeľovača čiarok ,.
Priraďte zostávajúce prvky k jednej premennej
Zvyšné prvky poľa môžete priradiť k premennej pomocou syntaxe rozšírenia … . Napríklad,
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 priradený k premennej x. A zvyšok prvkov poľa je priradený k premennej y.
Môžete tiež priradiť zvyšok vlastností objektu k jednej premennej. Napríklad,
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")
Poznámka : Premenná so syntaxou šírenia nemôže mať koncovú čiarku ,. Tento zvyšok (premenná so syntaxou šírenia) by ste mali použiť ako poslednú premennú.
Napríklad,
const arrValue = ('one', 'two', 'three', 'four'); // throws an error const (… x, y) = arrValue; console.log(x); // eror
Vnorené priradenie deštrukturalizácie
Môžete vykonať vnorené ničenie pre prvky poľa. Napríklad,
// 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 sú premenným y a z priradené vnorené prvky twoa three.
Aby ste mohli vykonať vnorené deštrukčné priradenie, musíte premenné uzavrieť do štruktúry poľa (vložením dovnútra ()).
Môžete tiež vykonať vnorené ničenie vlastností objektu. Napríklad,
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
Ak chcete vykonať vnorené deštrukčné priradenie pre objekty, musíte premenné uzavrieť do štruktúry objektu (vložením dovnútra ()).
Poznámka : Funkcia priradenia deštrukturalizácie bola predstavená v ES6 . Niektoré prehliadače nemusia podporovať použitie deštrukturalizačného priradenia. Navštívte podporu Javascript Destruct a dozviete sa viac.
