JavaScript Dekonstruktion

Kursrekommendationer:

Dekonstruktionstilldelningssyntax

let {firstName, lastName} = person;

Dekonstruktionstilldelningssyntax dekonstruerar objektets egenskaper till variabler:

Det kan också dekonstruera arrayer och andra iterabla objekt:

Objektdekonstruktion

Exempel

// Skapa ett objekt
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Destrukturering
let {firstName, lastName} = person;

Prova själv

Egenskapens ordning spelar ingen roll:

Exempel

// Skapa ett objekt
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Destrukturering
let {lastName, firstName} = person;

Prova själv

Objektsstandardvärden

För möjligt saknade egenskaper kan vi sätta standardvärden:

Exempel

// Skapa ett objekt
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Destrukturering
let {firstName, lastName, country = "US"} = person;

Prova själv

Objektattributalias

Exempel

// Skapa ett objekt
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Destrukturering
let {lastName: name} = person;

Prova själv

Strängdekonstruktion

En användning av dekonstruktion är att dekonstruera strängkaraktärer.

Exempel

// Skapa en sträng
let name = "W3Schools";
// Destrukturering
let [a1, a2, a3, a4, a5] = name;

Prova själv

Arraydekonstruktion

Vi kan extrahera arrayvariabler till sina egna variabler:

Exempel

// Skapa en array
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// Destrukturering
let [fruit1, fruit2] = fruits;

Prova själv

Hoppa över arrayvärden

Vi kan använda två eller fler kommatecken för att hoppa över arrayvärden:

Exempel

// Skapa en array
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// Destrukturering
let [fruit1,,,fruit2] = fruits;

Prova själv

Arrayindexvärden

Vi kan extrahera värden från specifika indexpositioner i en array:

Exempel

// Skapa en array
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// Destrukturering
let {[0]: fruit1, [1]: fruit2} = fruits;

Prova själv

Restegenskaper

Man kan använda restegenskaper i slutet av destruktiv syntax.

Denna syntax kommer att lagra alla överskjutande värden i en ny array:

Exempel

// Skapa en array
const numbers = [10, 20, 30, 40, 50, 60, 70];
// Destrukturering
const [a, b, ...rest] = numbers;

Prova själv

Destrukturera Map

Exempel

// Skapa en Map
const fruits = new Map([
  ["äpplen", 500],
  ["bananer", 300],
  
]
// Destrukturering
let text = "";
for (const [key, value] of fruits) {
  text += key + " är " + value;
}

Prova själv

Byt plats på JavaScript-variabler

Man kan använda destrukturering för att byta plats på två variabler:

Exempel

let förnamn = "Bill";
let efternamn = "Gates";
// Destrukturering
[förnamn, efternamn] = [efternamn, förnamn];

Prova själv