Lære Destrukturering av Objekter for Renere Kode | Avanserte Teknikker for Objektmanipulering

Objektdestrukturering er en funksjon som lar oss hente ut spesifikke egenskaper fra et objekt og tilordne dem til variabler. Dette kan føre til mer konsis og lesbar kode, spesielt når man arbeider med objekter som har flere egenskaper.

Forståelse av objektdestrukturering

Objektdestrukturering er en metode for å pakke ut verdier fra objekter til separate variabler. Destrukturering bruker en syntaks som ligner på objekt-litteraler, men på venstre side av en tildeling.

Her er den grunnleggende syntaksen for objektdestrukturering:

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

property1, property2: variabelnavn som vil inneholde verdiene fra objektet;
sourceObject: objektet du henter egenskaper fra;
Rekkefølgen spiller ingen rolle: egenskaper matches etter 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

Nå er fullName, nationality og occupation selvstendige variabler som inneholder sine respektive verdier.

Angi standardverdier

Hvis objektet ikke inneholder en egenskap, kan du tilordne en standardverdi:


              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, brukes standardverdien.

Omdøping av variabler

Du kan gi nye navn til utpakkede variabler ved å bruke :-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 nyttig når kortere navn forbedrer lesbarheten eller når navnekonflikter skal unngås.

Destrukturering av nestede objekter

Du kan også destrukturere egenskaper inne i nestede 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 hente ut både toppnivå- og dypt nestede verdier i ett ryddig uttrykk.

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 7

Spør AI

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Sveip for å vise menyen

Forståelse av objektdestrukturering

Her er den grunnleggende syntaksen for objektdestrukturering:

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

property1, property2: variabelnavn som vil inneholde verdiene fra objektet;
sourceObject: objektet du henter egenskaper fra;
Rekkefølgen spiller ingen rolle: egenskaper matches etter 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

Nå er fullName, nationality og occupation selvstendige variabler som inneholder sine respektive verdier.

Angi standardverdier

Hvis objektet ikke inneholder en egenskap, kan du tilordne en standardverdi:


              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, brukes standardverdien.

Omdøping av variabler

Du kan gi nye navn til utpakkede variabler ved å bruke :-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 nyttig når kortere navn forbedrer lesbarheten eller når navnekonflikter skal unngås.

Destrukturering av nestede objekter

Du kan også destrukturere egenskaper inne i nestede 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 hente ut både toppnivå- og dypt nestede verdier i ett ryddig uttrykk.

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 7

Destrukturering av Objekter for Renere Kode

Forståelse av objektdestrukturering

Objektdestrukturering i praksis

Angi standardverdier

Omdøping av variabler

Destrukturering av nestede objekter

1. Hva gjør følgende kode?

2. Hvordan kan vi angi standardverdier for variabler ved objekt-destrukturering?

3. Hvordan kan vi gi nye navn til variabler under objekt-destrukturering?

Destrukturering av Objekter for Renere Kode

Forståelse av objektdestrukturering

Objektdestrukturering i praksis

Angi standardverdier

Omdøping av variabler

Destrukturering av nestede objekter

1. Hva gjør følgende kode?

2. Hvordan kan vi angi standardverdier for variabler ved objekt-destrukturering?

3. Hvordan kan vi gi nye navn til variabler under objekt-destrukturering?