I den här handledningen lär du dig om JavaScript-destruktionsuppdrag med hjälp av exempel.
JavaScript-förstörelse
Destruktureringsuppdraget som introducerades i ES6 gör det enkelt att tilldela matrisvärden och objektegenskaper till distinkta variabler. Till exempel
före 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
Från 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
Obs! Namnens ordning spelar ingen roll vid destruktion av objekt.
Du kan till exempel skriva ovanstående program som:
let ( age, gender, name ) = person; console.log(name); // Sara
Obs! När du förstör objekt bör du använda samma namn för variabeln som motsvarande objektnyckel.
Till exempel,
let (name1, age, gender) = person; console.log(name1); // undefined
Om du vill tilldela olika variabelnamn för objektnyckeln kan du använda:
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 också utföra arraydestrukturering på liknande sätt. Till exempel,
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
Tilldela standardvärden
Du kan tilldela standardvärdena för variabler medan du använder destruktureringen. Till exempel,
let arrValue = (10); // assigning default value 5 and 7 let (x = 5, y = 7) = arrValue; console.log(x); // 10 console.log(y); // 7
I ovanstående program har arrValue bara ett element. Därmed,
- variabeln x blir 10
- variabeln y tar standardvärdet 7
Vid objektdestrukturering kan du skicka standardvärden på ett liknande sätt. Till exempel,
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
Byt variabler
I det här exemplet byts två variabler med hjälp av syntaxen för destruktionstilldelning.
// program to swap variables let x = 4; let y = 7; // swapping variables (x, y) = (y, x); console.log(x); // 7 console.log(y); // 4
Hoppa över objekt
Du kan hoppa över oönskade objekt i en matris utan att tilldela dem till lokala variabler. Till exempel,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, , z) = arrValue; console.log(x); // one console.log(z); // three
I ovanstående program utelämnas det andra elementet genom att använda kommaseparatorn ,.
Tilldela återstående element till en enda variabel
Du kan tilldela de återstående elementen i en matris till en variabel med hjälp av spridningssyntaxen … . Till exempel,
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")
Här onetilldelas x-variabeln. Och resten av arrayelementen tilldelas y-variabeln.
Du kan också tilldela resten av objektegenskaperna till en enda variabel. Till exempel,
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")
Obs! Variabeln med spridningssyntaxen kan inte ha ett bakåtkomma ,. Du bör använda detta vilolement (variabel med spridningssyntax) som den sista variabeln.
Till exempel,
const arrValue = ('one', 'two', 'three', 'four'); // throws an error const (… x, y) = arrValue; console.log(x); // eror
Nested Destructuring Assignment
Du kan utföra kapslad destruktion av arrayelement. Till exempel,
// 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
Här tilldelas variabeln y och z kapslade element twooch three.
För att utföra den kapslade destruktureringsuppgiften måste du bifoga variablerna i en matrisstruktur (genom att bifoga inuti ()).
Du kan också utföra kapslad destruktion av objektegenskaper. Till exempel,
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
För att utföra den kapslade destruktureringsuppgiften för objekt måste du bifoga variablerna i en objektstruktur (genom att bifoga inuti ()).
Obs! Funktionen Destruktureringsuppdrag introducerades i ES6 . Vissa webbläsare stöder kanske inte användningen av destruktureringsuppdraget. Besök Javascript Destructuring support för att lära dig mer.
