Destruktureringsopgaven er en meget nyttig tilføjelse til ES6, der giver os mulighed for at udtrække værdier fra arrays eller egenskaber fra objekter til en masse forskellige variable. Det er en speciel syntaks, der pakker arrays og objekter ud i flere variable.
Destrukturering er yderst nyttig, når du ikke ønsker at overføre objektet eller arrayet til en funktion som helhed, men snarere som individuelle stykker. Lad os se, hvordan det gøres i de følgende eksempler.
Array-destrukturering
Array-destruktureringssyntaksen opretter automatisk variabler med værdierne fra de tilsvarende elementer i et array:
const fruits = ['Apple', 'Mango', 'Cherry'];
const [apple, mango, cherry] = fruits;
console.log(apple); // Apple
console.log(mango); // Mango
console.log(cherry); // Cherry
Spring værdier over
De uønskede elementer i arrayet kan springes over ved at bruge et ekstra komma og lade variabelnavnene være tomme:
const fruits = ['Apple', 'Mango', 'Cherry'];
const [apple, , cherry] = fruits;
console.log(apple); // Apple
console.log(cherry); // Cherry
Destrukturering af en del af arrayet
Du kan endda vælge at destrukturere en del af arrayet og tildele resten af arrayet til en ny variabel:
const fruits = ['Apple', 'Mango', 'Cherry'];
const [apple, ...remaining] = fruits;
console.log(apple); // Apple
console.log(remaining); // ['Mango', 'Cherry']
Tildeling af værdier til et objekt
Hvad hvis du vil tildele arrayets værdier til et objekt? Du kan nemt gøre det med array-destruktureringen:
let user = {};
[user.name, user.age] = ['John Doe', 29];
console.log(user.name); // John Doe
console.log(user.age); // 29
Standardværdier
Hvis der er færre værdier i arrayet end variabler angivet i opgaven, vil der ikke være nogen fejl. Destrukturering tildeler automatisk standardværdier til ekstra variable:
const [name, age] = ['Atta'];
console.log(name); // Atta
console.log(age); // undefined
Du kan også definere dine egne standardværdier for variabler i opgaven:
const [name = 'John Doe', age = 30] = ['Atta'];
console.log(name); // Atta
console.log(age); // 30
age
ejendom falder tilbage til 30
fordi det ikke er defineret i arrayet.
Udskiftning af variabler
Destruktureringstildelingen kan også bruges til at ombytte værdierne af to variable:
let a = 15;
let b = 5;
[a, b] = [b, a];
console.log(a); // 5
console.log(b); // 15
Objektdestrukturering
Destruktureringsopgaven fungerer også med JavaScript-objekter. Tildelingsvariablerne skal dog have de matchende navne med objektets nøgler. Dette skyldes, at objektnøglerne ikke nødvendigvis er i en bestemt rækkefølge.
Her er et grundlæggende eksempel:
const animals = { cat: '🐱', monkey: '🐒', whale: '🐋' };
const { cat, whale, monkey } = animals;
console.log(cat); // 🐱
console.log(whale); // 🐋
console.log(monkey); // 🐒
Brug af et nyt variabelnavn
Hvis du vil tildele værdier af et objekt til nye nøgler i stedet for at bruge navnet på de eksisterende objektnøgler, kan du gøre følgende:
const animals = { cat: '🐱', monkey: '🐒', whale: '🐋' };
const { cat: newCat, whale: newWhale, monkey: newMonkey } = animals;
console.log(newCat); // 🐱
console.log(newWhale); // 🐋
console.log(newMonkey); // 🐒
Standardværdier
Ligesom array-destrukturering kan standardværdierne også bruges i objektdestrukturering:
const animals = { cat: '🐱', monkey: '🐒', whale: '🐋' };
const { cat, sheep = '🐑', lion } = animals;
console.log(cat); // 🐱
console.log(sheep); // 🐑
console.log(lion); // undefined
Du kan også indstille standardværdier, når du tildeler værdi til en ny variabel:
const animals = { cat: '🐱', monkey: '🐒', whale: '🐋' };
const { cat, sheep: wool = '🐑'} = animals;
console.log(cat); // 🐱
console.log(wool); // 🐑
Beregnet egenskabsnavn
Det beregnede egenskabsnavn er en anden ES6-funktion, der også virker til objektdestrukturering. Det gør det muligt at beregne navnene på objektegenskaberne i JavaScript-objektliteral notation dynamisk.
Her er et eksempel, der beregner navnet på objektegenskaben ved at bruge "Computed Property Name" notation:
const animals = { cat: '🐱', monkey: '🐒', whale: '🐋' };
const prop = 'monkey';
const { [prop]: newMonkey } = animals;
console.log(newMonkey); // 🐒
Udtrækning af arrays fra objektet
Objektdestruktureringen fungerer også for de arrays, der findes inde i objektet som værdier:
const user = { name: 'Atta', friends: ['Ali', 'Amir'] };
const { name, friends } = user;
console.log(name); // Atta
console.log(friends); // ['Ali', 'Amir']
Destrukturering af indlejrede objekter
Objektet kan indeholde indlejrede objekter ved destrukturering. Du skal definere den samme indlejringsstruktur i venstre side af opgaven for at udtrække værdier fra dybere objekter:
const user = {
name: 'Atta',
place: {
city: 'Sahiwal',
country: 'Pakistan'
}
};
const { name, place: { city, country } } = user;
console.log(name); // Atta
console.log(city); // Sahiwal
console.log(country); // Pakistan
Alle egenskaber for user
objekt er tildelt variabler i opgaven. Endelig har vi name
, city
og country
distinkte variabler. Bemærk, at der ikke er nogen variabel for place
da vi kun har udtrukket dets indhold.
Destrukturering af en del af objektet
Ligesom arrays kan du også destrukturere en del af objektet og tildele resten af objektet til en ny variabel:
const user = {
name: 'Atta',
place: {
city: 'Sahiwal',
country: 'Pakistan'
}
};
const { name, ...location } = user;
console.log(name);
// Atta
console.log(location);
// { place: { city: 'Sahiwal', country: 'Pakistan' } }