I denne veiledningen vil du lære om JavaScript-destruktureringsoppgave ved hjelp av eksempler.
JavaScript-destruksjon
Destruktureringsoppdraget introdusert i ES6 gjør det enkelt å tilordne matrixverdier og objektegenskaper til forskjellige variabler. For eksempel
Før 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
Fra 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
Merk : Navnets rekkefølge har ikke betydning for ødeleggelse av objekter.
For eksempel kan du skrive programmet ovenfor som:
let ( age, gender, name ) = person; console.log(name); // Sara
Merk : Når du ødelegger objekter, bør du bruke samme navn på variabelen som den tilsvarende objektnøkkelen.
For eksempel,
let (name1, age, gender) = person; console.log(name1); // undefined
Hvis du vil tilordne forskjellige variabelnavn for objektnøkkelen, kan du bruke:
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 Destructuring
Du kan også utføre array destruksjon på en lignende måte. For eksempel,
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
Tilordne standardverdier
Du kan tilordne standardverdiene for variabler mens du bruker destrukturering. For eksempel,
let arrValue = (10); // assigning default value 5 and 7 let (x = 5, y = 7) = arrValue; console.log(x); // 10 console.log(y); // 7
I programmet ovenfor har arrValue bare ett element. Derfor,
- variabelen x vil være 10
- y-variabelen tar standardverdien 7
I objektdestruksjon kan du overføre standardverdier på en lignende måte. For eksempel,
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
Bytte variabler
I dette eksemplet byttes to variabler ved hjelp av syntaksen for destruktureringsoppdrag.
// program to swap variables let x = 4; let y = 7; // swapping variables (x, y) = (y, x); console.log(x); // 7 console.log(y); // 4
Hopp over varer
Du kan hoppe over uønskede elementer i en matrise uten å tilordne dem til lokale variabler. For eksempel,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, , z) = arrValue; console.log(x); // one console.log(z); // three
I det ovennevnte programmet er det andre elementet utelatt ved å bruke kommautskilleren ,.
Tilordne gjenværende elementer til en enkelt variabel
Du kan tilordne de gjenværende elementene i en matrise til en variabel ved hjelp av spredningssyntaks … . For eksempel,
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")
Her onetildeles x-variabelen. Og resten av matriseelementene er tilordnet y-variabelen.
Du kan også tilordne resten av objektegenskapene til en enkelt variabel. For eksempel,
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")
Merk : Variabelen med spredt syntaks kan ikke ha et etterfølgende komma ,. Du bør bruke dette hvileelementet (variabel med spredt syntaks) som den siste variabelen.
For eksempel,
const arrValue = ('one', 'two', 'three', 'four'); // throws an error const (… x, y) = arrValue; console.log(x); // eror
Nestet destruktureringsoppdrag
Du kan utføre nestet destruksjon for matriseelementer. For eksempel,
// 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
Her tildeles variabelen y og z nestede elementer twoog three.
For å kunne utføre den nestede destruktureringsoppgaven, må du legge inn variablene i en matrisestruktur (ved å legge ved innsiden ()).
Du kan også utføre nestet destruksjon for objektegenskaper. For eksempel,
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
For å utføre den nestede destruktureringsoppdraget for objekter, må du legge variablene i en objektstruktur (ved å legge innvendig ()).
Merk : Funksjonen Destruktureringsoppdrag ble introdusert i ES6 . Noen nettlesere støtter kanskje ikke bruken av destruktureringsoppdraget. Besøk Javascript Destructuring support for å lære mer.
