Lära Destrukturering av Objekt för Renare Kod | Avancerade Tekniker för Objektmanipulation

Objektdestrukturering är en funktion som gör det möjligt att extrahera specifika egenskaper från ett objekt och tilldela dem till variabler. Detta kan leda till mer koncis och lättläst kod, särskilt när man arbetar med objekt som har flera egenskaper.

Förståelse för objektdestrukturering

Objektdestrukturering är ett sätt att packa upp värden från objekt till separata variabler. Destrukturering använder en syntax som liknar objektliteraler men på vänster sida av en tilldelning.

Här är den grundläggande syntaxen för objektdestrukturering:

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

property1, property2: variabelnamn som kommer att innehålla värden från objektet;
sourceObject: objektet du extraherar egenskaper från;
Ordningen spelar ingen roll: egenskaper matchas efter namn.

Objektdestrukturering i praktiken


              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 är fullName, nationality och occupation fristående variabler som innehåller sina respektive värden.

Ange standardvärden

Om objektet inte innehåller en egenskap kan du tilldela ett standardvärde:


              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

Om birthDate saknas används standardvärdet.

Byta namn på variabler

Du kan byta namn på extraherade variabler med hjälp av :-syntaxen.


              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

Detta är användbart när kortare namn förbättrar läsbarheten eller när namnkollisioner ska undvikas.

Nästlad objekt-destrukturering

Du kan även destrukturera egenskaper inuti nästlade objekt.


              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 extrahera både toppnivå- och djupt nästlade värden i ett enda tydligt uttryck.

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 7

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Suggested prompts:

Can you explain how object destructuring works with arrays?

What happens if a property is missing and no default value is provided?

Can you show more examples of nested destructuring?

Svep för att visa menyn

Förståelse för objektdestrukturering

Objektdestrukturering är ett sätt att packa upp värden från objekt till separata variabler. Destrukturering använder en syntax som liknar objektliteraler men på vänster sida av en tilldelning.

Här är den grundläggande syntaxen för objektdestrukturering:

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

property1, property2: variabelnamn som kommer att innehålla värden från objektet;
sourceObject: objektet du extraherar egenskaper från;
Ordningen spelar ingen roll: egenskaper matchas efter namn.

Objektdestrukturering i praktiken


              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 är fullName, nationality och occupation fristående variabler som innehåller sina respektive värden.

Ange standardvärden

Om objektet inte innehåller en egenskap kan du tilldela ett standardvärde:


              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

Om birthDate saknas används standardvärdet.

Byta namn på variabler

Du kan byta namn på extraherade variabler med hjälp av :-syntaxen.


              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

Detta är användbart när kortare namn förbättrar läsbarheten eller när namnkollisioner ska undvikas.

Nästlad objekt-destrukturering

Du kan även destrukturera egenskaper inuti nästlade objekt.


              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 extrahera både toppnivå- och djupt nästlade värden i ett enda tydligt uttryck.

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 7

Destrukturering av Objekt för Renare Kod

Förståelse för objektdestrukturering

Objektdestrukturering i praktiken

Ange standardvärden

Byta namn på variabler

Nästlad objekt-destrukturering

1. Vad gör följande kod?

2. Hur kan vi ange standardvärden för variabler vid objekt-destrukturering?

3. Vid objekt-destrukturering, hur kan vi byta namn på variabler vid tilldelning?

Destrukturering av Objekt för Renare Kod

Förståelse för objektdestrukturering

Objektdestrukturering i praktiken

Ange standardvärden

Byta namn på variabler

Nästlad objekt-destrukturering

1. Vad gör följande kod?

2. Hur kan vi ange standardvärden för variabler vid objekt-destrukturering?

3. Vid objekt-destrukturering, hur kan vi byta namn på variabler vid tilldelning?