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 och så vidare: Dessa är variabelnamn där värdena från motsvarande egenskaper i sourceObject kommer att tilldelas. Egenskaper från objektet destruktureras efter egenskapsnamn, inte ordning. Ordningen spelar ingen roll alls;
sourceObject: Objektet från vilket vi vill extrahera egenskaper.

Objektdestrukturering i praktiken

Låt oss titta på ett exempel där vi har ett objekt som representerar en persons information:


              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 kan vi använda fullName, nationality och occupation som separata variabler med motsvarande värden från person-objektet.

Ange standardvärden

Vi kan också ange standardvärden för variabler om egenskapen inte finns i källobjektet:


              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 det här exemplet kommer variabeln birthDate att tilldelas värdet "March 9, 1454" om objektet person inte har någon egenskap birthDate med ett värde.

Byta namn på variabler

Med hjälp av :-syntaxen kan vi tilldela egenskapsvärden till variabler med andra namn. Till exempel:


              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

Nu kan vi använda variablerna min och max istället för minTemperature och maxTemperature.

Nästlad objekt-destrukturering

Destrukturering kan även tillämpas på nästlade objekt. Om objektet till exempel innehåller objekt som egenskaper, kan vi destrukturera de nästlade egenskaperna:


              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 detta exempel kan vi komma åt både de översta egenskaperna som name och profession samt de nästlade egenskaperna som degree, university och graduationYear med hjälp av destrukturering.

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 to use object destructuring with function parameters?

What happens if a property is missing when destructuring?

Can you show more examples of nested object destructuring?

Awesome!

Completion rate improved to 2.27

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 och så vidare: Dessa är variabelnamn där värdena från motsvarande egenskaper i sourceObject kommer att tilldelas. Egenskaper från objektet destruktureras efter egenskapsnamn, inte ordning. Ordningen spelar ingen roll alls;
sourceObject: Objektet från vilket vi vill extrahera egenskaper.

Objektdestrukturering i praktiken

Låt oss titta på ett exempel där vi har ett objekt som representerar en persons information:


              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 kan vi använda fullName, nationality och occupation som separata variabler med motsvarande värden från person-objektet.

Ange standardvärden

Vi kan också ange standardvärden för variabler om egenskapen inte finns i källobjektet:


              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 det här exemplet kommer variabeln birthDate att tilldelas värdet "March 9, 1454" om objektet person inte har någon egenskap birthDate med ett värde.

Byta namn på variabler

Med hjälp av :-syntaxen kan vi tilldela egenskapsvärden till variabler med andra namn. Till exempel:


              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

Nu kan vi använda variablerna min och max istället för minTemperature och maxTemperature.

Nästlad objekt-destrukturering

Destrukturering kan även tillämpas på nästlade objekt. Om objektet till exempel innehåller objekt som egenskaper, kan vi destrukturera de nästlade egenskaperna:


              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

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. Hur kan vi byta namn på variabler vid tilldelning med objekt-destrukturering?

Awesome!

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. Hur kan vi byta namn på variabler vid tilldelning med objekt-destrukturering?