Ebben az oktatóanyagban példák segítségével megismerheti a JavaScript hozzárendelését.
JavaScript szerkezetátalakítása
Az ES6-ban bevezetett destruktív hozzárendelés megkönnyíti a tömbértékek és az objektumtulajdonságok hozzárendelését különböző változókhoz. Például az
ES6 előtt:
// 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-ból:
// 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
Megjegyzés : Az objektum roncsolásakor a név sorrendje nem számít.
Írhatja például a fenti programot:
let ( age, gender, name ) = person; console.log(name); // Sara
Megjegyzés : Objektumok lebontásakor ugyanazt a nevet kell használnia a változó számára, mint a megfelelő objektumkulcsot.
Például,
let (name1, age, gender) = person; console.log(name1); // undefined
Ha különböző változóneveket szeretne rendelni az objektumkulcshoz, használhatja:
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
Tömb szerkezetátalakítása
A tömb destruktúráját is hasonló módon hajthatja végre. Például,
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
Alapértelmezett értékek hozzárendelése
A változók alapértelmezett értékeit hozzárendelheti a destruktúra használata közben. Például,
let arrValue = (10); // assigning default value 5 and 7 let (x = 5, y = 7) = arrValue; console.log(x); // 10 console.log(y); // 7
A fenti programban az arrValue csak egy elemet tartalmaz. Ennélfogva,
- az x változó 10 lesz
- az y változó az alapértelmezett 7 értéket veszi fel
Az objektum roncsolásakor hasonló módon adhatja át az alapértelmezett értékeket. Például,
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
Változók cseréje
Ebben a példában két változót cserélnek fel a destrukturáló hozzárendelési szintaxissal.
// program to swap variables let x = 4; let y = 7; // swapping variables (x, y) = (y, x); console.log(x); // 7 console.log(y); // 4
Az elemek kihagyása
Kihagyhatja a tömbben a nem kívánt elemeket anélkül, hogy azokat helyi változókhoz rendelné. Például,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, , z) = arrValue; console.log(x); // one console.log(z); // three
A fenti programban a vessző elválasztó használatával a második elem kihagyásra kerül ,.
Rendeljen megmaradó elemeket egyetlen változóhoz
A tömb többi eleme hozzárendelhető egy változóhoz a spread szintaxis segítségével … . Például,
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")
Itt oneaz x változóhoz van rendelve. A többi tömbelemet az y változóhoz rendeljük.
Az objektum többi tulajdonságát is egyetlen változóhoz rendelheti. Például,
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")
Megjegyzés : A terjedési szintaxissal rendelkező változó nem tartalmazhat vesszőt ,. Ezt a többi elemet (változó, szintaxissal) kell használni utolsó változóként.
Például,
const arrValue = ('one', 'two', 'three', 'four'); // throws an error const (… x, y) = arrValue; console.log(x); // eror
Beágyazott szerkezetátalakítási megbízás
Tömbös elemek beágyazott roncsolását hajthatja végre. Például,
// 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
Itt az y és z változó hozzárendelt beágyazott elemeket twoés three.
A beágyazott roncsolás-hozzárendelés végrehajtásához be kell csatolnia a változókat egy tömbstruktúrába (belül bezárva ()).
Az objektum tulajdonságainak beágyazott roncsolását is elvégezheti. Például,
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
Az objektumok beágyazott roncsolás-hozzárendelésének végrehajtásához be kell csatolnia a változókat egy objektumszerkezetbe (belül bezárva ()).
Megjegyzés : A hozzárendelés átalakításának funkcióját az ES6- ban vezették be . Egyes böngészők nem támogatják a romboló hozzárendelés használatát. További információkért keresse fel a Javascript szerkezetátalakítási támogatását.
