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 måte å 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 og så videre: Dette er variabelnavnene hvor verdiene til de tilsvarende egenskapene fra sourceObject blir tilordnet. Egenskaper fra objektet destruktureres etter egenskapsnavn, ikke rekkefølge. Rekkefølgen har ingen betydning;
sourceObject: Objektet vi ønsker å hente ut egenskaper fra.

Objekt-destrukturering i praksis

La oss se på et eksempel der vi har et objekt som representerer informasjon om en person:


              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å kan vi bruke fullName, nationality og occupation som separate variabler med de tilsvarende verdiene fra person-objektet.

Angi standardverdier

Vi kan også angi standardverdier for variabler dersom egenskapen ikke finnes i kildeobjektet:


              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

I dette eksemplet vil variabelen birthDate få verdien "March 9, 1454" dersom person-objektet ikke har en birthDate-egenskap med en verdi.

Omdøping av variabler

Ved å bruke :-syntaksen kan vi tilordne egenskapsverdier til variabler med andre navn. For eksempel:


              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

Nå kan vi bruke variablene min og max i stedet for minTemperature og maxTemperature.

Nøstet objekt-destrukturering

Destrukturering kan også brukes på nøstede objekter. Hvis objektet for eksempel inneholder objekter som egenskaper, kan vi destrukturere de nøstede egenskapene:


              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

I dette eksemplet kan vi få tilgang til både de øverste egenskapene som name og profession, samt de nøstede egenskapene som degree, university og graduationYear ved å bruke destrukturering.

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

Awesome!

Completion rate improved to 2.27

Sveip for å vise menyen

Forståelse av objektdestrukturering

Objektdestrukturering er en måte å 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 og så videre: Dette er variabelnavnene hvor verdiene til de tilsvarende egenskapene fra sourceObject blir tilordnet. Egenskaper fra objektet destruktureres etter egenskapsnavn, ikke rekkefølge. Rekkefølgen har ingen betydning;
sourceObject: Objektet vi ønsker å hente ut egenskaper fra.

Objekt-destrukturering i praksis

La oss se på et eksempel der vi har et objekt som representerer informasjon om en person:


              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å kan vi bruke fullName, nationality og occupation som separate variabler med de tilsvarende verdiene fra person-objektet.

Angi standardverdier

Vi kan også angi standardverdier for variabler dersom egenskapen ikke finnes i kildeobjektet:


              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

I dette eksemplet vil variabelen birthDate få verdien "March 9, 1454" dersom person-objektet ikke har en birthDate-egenskap med en verdi.

Omdøping av variabler

Ved å bruke :-syntaksen kan vi tilordne egenskapsverdier til variabler med andre navn. For eksempel:


              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

Nå kan vi bruke variablene min og max i stedet for minTemperature og maxTemperature.

Nøstet objekt-destrukturering

Destrukturering kan også brukes på nøstede objekter. Hvis objektet for eksempel inneholder objekter som egenskaper, kan vi destrukturere de nøstede egenskapene:


              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

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 7

Destrukturering av Objekter for Renere Kode

Forståelse av objektdestrukturering

Objekt-destrukturering i praksis

Angi standardverdier

Omdøping av variabler

Nøstet objekt-destrukturering

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 tildeling ved objekt-destrukturering?

Awesome!

Destrukturering av Objekter for Renere Kode

Forståelse av objektdestrukturering

Objekt-destrukturering i praksis

Angi standardverdier

Omdøping av variabler

Nøstet objekt-destrukturering

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 tildeling ved objekt-destrukturering?