Sådan bruger du objekt- og array-destrukturering i JavaScript

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' } }