In deze tutorial leer je aan de hand van voorbeelden over JavaScript-vernietigingsopdrachten.
JavaScript-vernietiging
De vernietigende toewijzing die in ES6 is geïntroduceerd, maakt het gemakkelijk om matrixwaarden en objecteigenschappen toe te wijzen aan verschillende variabelen. Bijvoorbeeld
voor 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
Van 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
Opmerking : de volgorde van de naam doet er niet toe bij het vernietigen van objecten.
U kunt het bovenstaande programma bijvoorbeeld schrijven als:
let ( age, gender, name ) = person; console.log(name); // Sara
Opmerking : wanneer u objecten vernietigt, moet u dezelfde naam voor de variabele gebruiken als de corresponderende objectsleutel.
Bijvoorbeeld,
let (name1, age, gender) = person; console.log(name1); // undefined
Als u verschillende variabelenamen aan de objectsleutel wilt toewijzen, kunt u gebruik maken van:
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
Array-destructurering
U kunt ook op een vergelijkbare manier array-destructurering uitvoeren. Bijvoorbeeld,
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
Wijs standaardwaarden toe
U kunt de standaardwaarden voor variabelen toewijzen tijdens het gebruik van destructurering. Bijvoorbeeld,
let arrValue = (10); // assigning default value 5 and 7 let (x = 5, y = 7) = arrValue; console.log(x); // 10 console.log(y); // 7
In het bovenstaande programma heeft arrValue slechts één element. Vandaar,
- de x-variabele is 10
- de variabele y heeft de standaardwaarde 7
Bij het vernietigen van objecten kunt u standaardwaarden op een vergelijkbare manier doorgeven. Bijvoorbeeld,
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
Variabelen omwisselen
In dit voorbeeld worden twee variabelen verwisseld met behulp van de destructurerende toewijzingssyntaxis.
// program to swap variables let x = 4; let y = 7; // swapping variables (x, y) = (y, x); console.log(x); // 7 console.log(y); // 4
Items overslaan
U kunt ongewenste items in een array overslaan zonder ze aan lokale variabelen toe te wijzen. Bijvoorbeeld,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, , z) = arrValue; console.log(x); // one console.log(z); // three
In het bovenstaande programma wordt het tweede element weggelaten door het komma-scheidingsteken te gebruiken ,.
Wijs resterende elementen toe aan een enkele variabele
U kunt de overige elementen van een array aan een variabele toewijzen met behulp van de spread-syntaxis … . Bijvoorbeeld,
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")
Hier onewordt toegewezen aan de variabele x. En de rest van de array-elementen wordt toegewezen aan de y-variabele.
U kunt ook de rest van de objecteigenschappen aan één variabele toewijzen. Bijvoorbeeld,
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")
Opmerking : de variabele met de spread-syntaxis mag geen volgkomma hebben ,. U moet dit rest-element (variabele met spread-syntaxis) gebruiken als de laatste variabele.
Bijvoorbeeld,
const arrValue = ('one', 'two', 'three', 'four'); // throws an error const (… x, y) = arrValue; console.log(x); // eror
Geneste vernietigingstoewijzing
U kunt geneste vernietiging uitvoeren voor array-elementen. Bijvoorbeeld,
// 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
Hier worden de variabele y en z toegewezen aan geneste elementen twoen three.
Om de geneste vernietigingstoewijzing uit te voeren, moet u de variabelen insluiten in een matrixstructuur (door ze binnenin te omsluiten ()).
U kunt ook geneste destructurering uitvoeren voor objecteigenschappen. Bijvoorbeeld,
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
Om de geneste vernietigingstoewijzing voor objecten uit te voeren, moet u de variabelen in een objectstructuur insluiten (door ze erin te omsluiten ()).
Opmerking : de functie voor vernietigingstoewijzing is geïntroduceerd in ES6 . Sommige browsers ondersteunen het gebruik van de vernietigingsopdracht mogelijk niet. Bezoek Javascript Destructuring-ondersteuning voor meer informatie.
