JavaScript Destructuring

Dekstruktureringssyntaks

Dekstruktureringssyntaks pakker objektets egenskaber ind i variabler:

let {firstName, lastName} = person;

Det kan også pakke ud arrayer og andre itererbare objekter:

let [firstName, lastName] = person;

Objektdestruktion

Eksempel

// Opret en objekt
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Deconstruction
let {firstName, lastName} = person;

Prøv det selv

Reolen af egenskaber er ligegyldig:

Eksempel

// Opret en objekt
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Deconstruction
let {lastName, firstName} = person;

Prøv det selv

Objektstandardværdier

For manglende egenskaber kan vi sætte standardværdier:

Eksempel

// Opret en objekt
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Deconstruction
let {firstName, lastName, country = "US"} = person;

Prøv det selv

Objektattributalias

Eksempel

// Opret en objekt
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Deconstruction
let {lastName: name} = person;

Prøv det selv

Strengdestruktion

En brug af destruktion er at pakke ud strengkarakterer.

Eksempel

// Opret en streng
let name = "W3Schools";
// Deconstruction
let [a1, a2, a3, a4, a5] = name;

Prøv det selv

Arraydestruktion

Vi kan udtrække arrayvariabler til egne variabler:

Eksempel

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

Prøv det selv

Spring værdier over

Vi kan bruge to eller flere kommaer til at springe værdier over i en array:

Eksempel

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

Prøv det selv

Arrayplacering

Vi kan udtrække værdier fra en bestemt indeksposition i en array:

Eksempel

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

Prøv det selv

Resterende egenskaber

Man kan bruge resterende egenskaber ved siden af destruktionsgrammatikken.

Denne syntaks vil gemme alle resterende værdier i en ny array:

Eksempel

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

Prøv det selv

Deconstruct Map

Eksempel

// Opret en Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  
]
// Deconstruction
let text = "";
for (const [key, value] of fruits) {
  text += key + " er " + value;
}

Prøv det selv

Byt JavaScript-variabler

Man kan bruge deconstructerings tildelelse til at bytte værdier mellem to variabler:

Eksempel

let firstName = "Bill";
let lastName = "Gates";
// Deconstruction
[firstName, lastName] = [lastName, firstName];

Prøv det selv