Lære Destrukturering af Objekter for Mere Overskuelig Kode | Avancerede Objekthåndteringsteknikker

Objektdestrukturering er en funktion, der gør det muligt at udtrække specifikke egenskaber fra et objekt og tildele dem til variabler. Dette kan føre til mere kortfattet og læsbar kode, især når der arbejdes med objekter, der har flere egenskaber.

Forståelse af objektdestrukturering

Objektdestrukturering er en metode til at udpakke værdier fra objekter til separate variabler. Destrukturering anvender en syntaks, der ligner objektlitteraler, men bruges på venstre side af en tildeling.

Her er den grundlæggende syntaks for objektdestrukturering:

const { property1, property2, ...} = sourceObject;

property1, property2: variabelnavne, der indeholder værdierne fra objektet;
sourceObject: objektet, hvorfra egenskaber udtrækkes;
Rækkefølgen er ligegyldig: egenskaber matches efter navn.

Objektdestrukturering i praksis


              12345678910
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
  occupation: "Explorer, Cartographer",
};

const { fullName, nationality, occupation } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(occupation); // Output: Explorer, Cartographer

Nu er fullName, nationality og occupation selvstændige variabler, der indeholder deres respektive værdier.

Angiv standardværdier

Hvis objektet ikke indeholder en egenskab, kan du tildele en standardværdi:


              123456789
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
};

const { fullName, nationality, birthDate = "March 9, 1454" } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(birthDate); // Output: March 9, 1454

Hvis birthDate mangler, anvendes standardværdien.

Omdøbning af variabler

Det er muligt at omdøbe udtrukne variabler ved at bruge :-syntaksen.


              1234567891011
            
const weather = {
  city: "Melbourne",
  minTemperature: 65,
  maxTemperature: 78,
};

const { city, minTemperature: min, maxTemperature: max } = weather;

console.log(city); // Output: Melbourne
console.log(min); // Output: 65
console.log(max); // Output: 78

Dette er nyttigt, når kortere navne forbedrer læsbarheden eller for at undgå navnekonflikter.

Destrukturering af indlejrede objekter

Det er også muligt at destrukturere egenskaber i indlejrede objekter.


              123456789101112131415161718192021
            
const person = {
  name: "Dean Mayert",
  profession: "Neuropsychologist",
  education: {
    degree: "Ph.D. in Neuropsychology",
    university: "Mind Institute",
    graduationYear: 2008,
  },
};

const {
  name,
  profession,
  education: { degree, university, graduationYear },
} = person;

console.log(name); // Output: Dean Mayert
console.log(profession); // Output: Neuropsychologist
console.log(degree); // Output: Ph.D. in Neuropsychology
console.log(university); // Output: Mind Institute
console.log(graduationYear); // Output: 2008

Du kan udtrække både topniveau- og dybt indlejrede værdier i ét overskueligt udtryk.

Var alt klart?

Tak for dine kommentarer!

Sektion 3. Kapitel 7

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Stryg for at vise menuen

Forståelse af objektdestrukturering

Her er den grundlæggende syntaks for objektdestrukturering:

const { property1, property2, ...} = sourceObject;

property1, property2: variabelnavne, der indeholder værdierne fra objektet;
sourceObject: objektet, hvorfra egenskaber udtrækkes;
Rækkefølgen er ligegyldig: egenskaber matches efter navn.

Objektdestrukturering i praksis


              12345678910
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
  occupation: "Explorer, Cartographer",
};

const { fullName, nationality, occupation } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(occupation); // Output: Explorer, Cartographer

Nu er fullName, nationality og occupation selvstændige variabler, der indeholder deres respektive værdier.

Angiv standardværdier

Hvis objektet ikke indeholder en egenskab, kan du tildele en standardværdi:


              123456789
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
};

const { fullName, nationality, birthDate = "March 9, 1454" } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(birthDate); // Output: March 9, 1454

Hvis birthDate mangler, anvendes standardværdien.

Omdøbning af variabler

Det er muligt at omdøbe udtrukne variabler ved at bruge :-syntaksen.


              1234567891011
            
const weather = {
  city: "Melbourne",
  minTemperature: 65,
  maxTemperature: 78,
};

const { city, minTemperature: min, maxTemperature: max } = weather;

console.log(city); // Output: Melbourne
console.log(min); // Output: 65
console.log(max); // Output: 78

Dette er nyttigt, når kortere navne forbedrer læsbarheden eller for at undgå navnekonflikter.

Destrukturering af indlejrede objekter

Det er også muligt at destrukturere egenskaber i indlejrede objekter.


              123456789101112131415161718192021
            
const person = {
  name: "Dean Mayert",
  profession: "Neuropsychologist",
  education: {
    degree: "Ph.D. in Neuropsychology",
    university: "Mind Institute",
    graduationYear: 2008,
  },
};

const {
  name,
  profession,
  education: { degree, university, graduationYear },
} = person;

console.log(name); // Output: Dean Mayert
console.log(profession); // Output: Neuropsychologist
console.log(degree); // Output: Ph.D. in Neuropsychology
console.log(university); // Output: Mind Institute
console.log(graduationYear); // Output: 2008

Du kan udtrække både topniveau- og dybt indlejrede værdier i ét overskueligt udtryk.

Var alt klart?

Tak for dine kommentarer!

Sektion 3. Kapitel 7

Destrukturering af Objekter for Mere Overskuelig Kode

Forståelse af objektdestrukturering

Objektdestrukturering i praksis

Angiv standardværdier

Omdøbning af variabler

Destrukturering af indlejrede objekter

1. Hvad gør følgende kode?

2. Hvordan kan vi angive standardværdier for variabler ved objekt-destructuring?

3. Hvordan kan vi omdøbe variabler under tildeling ved objekt-destructuring?

Destrukturering af Objekter for Mere Overskuelig Kode

Forståelse af objektdestrukturering

Objektdestrukturering i praksis

Angiv standardværdier

Omdøbning af variabler

Destrukturering af indlejrede objekter

1. Hvad gør følgende kode?

2. Hvordan kan vi angive standardværdier for variabler ved objekt-destructuring?

3. Hvordan kan vi omdøbe variabler under tildeling ved objekt-destructuring?