TypeScript Academy · Lektion

Destructuring af arrays og tupler

Destructur arrays og tupler med de korrekte elementtyper

Lektion 2 af 413 trin

Destructuring af arrays og tupler er en gratis TypeScript Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i TypeScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. TypeScript Academy-kurset indeholder 4 lektioner i alt.

Positionsbaseret destrukturering

Array-destrukturering binder variable efter deres position i stedet for efter navn. Med tupler har hver position en bestemt type, så du får en præcis udtrækning i den rigtige rækkefølge.

Grundlæggende array-destrukturering

Firkantede parenteser i venstre side trækker elementer ud efter indeksrækkefølge. I et almindeligt array deler alle bindinger arrayets elementtype.

const nums = [10, 20, 30]
const [first, second] = nums
console.log(first + second) // 30

Typeangivelse af et tupelmønster

Angiv typen ved at give bindingen en tupeltype efter mønsteret. Hver position får sin egen type – her først et tal og derefter en streng.

const [a, b]: [number, string] = [1, "two"]
console.log(a, b) // 1 two

Typer følger positionen

I en tupel er typen ved hvert indeks fast. Den første binding er et tal, den anden en streng – hvis du bytter værdierne om, opstår der en typefejl.

const pair: [string, number] = ["age", 30]
const [label, value] = pair
console.log(label.toUpperCase(), value + 1)

Spring elementer over med kommaer

Efterlad en tom plads mellem kommaerne for at springe en position over, du ikke har brug for. Det oversprungne elements type ignoreres ganske enkelt.

const rgb: [number, number, number] = [255, 128, 0]
const [red, , blue] = rgb
console.log(red, blue) // 255 0

Destrukturering med rest

Et restelement samler de resterende elementer i et array. For en tupel afspejler typen de resterende positioner.

const [head, ...tail] = [1, 2, 3, 4]
console.log(head)        // 1
console.log(tail.length) // 3

Resttype fra en tupel

Når du destrukturerer en tupel med et restelement, udleder TypeScript restvariablen som en tupel af de resterende elementer, så deres typer bevares.

const data: [string, number, boolean] = ["x", 1, true]
const [name, ...rest] = data
// rest is [number, boolean]
console.log(rest[0], rest[1])

Ombytning af variable

Et smart trick, som array-destrukturering muliggør, er at bytte to værdier uden en midlertidig variabel. Typerne skal være kompatible, for at ombytningen kan typekontrolleres.

let x = 1, y = 2
;[x, y] = [y, x]
console.log(x, y) // 2 1

Destrukturering af funktionsreturværdier

Funktioner, der returnerer tupler, passer perfekt sammen med destrukturering – React-mønsteret useState er netop dette.

function useCounter(): [number, () => number] {
  let n = 0
  return [n, () => ++n]
}
const [count, inc] = useCounter()
console.log(count, inc())

Standardværdier i array-mønstre

Angiv en standardværdi for en position, der måske er undefined. Standardværdien bruges kun, når elementet mangler eller er undefined.

const [a = 0, b = 0] = [5]
console.log(a, b) // 5 0

Indlejret array-destrukturering

Du kan destrukturere arrays inde i arrays i én sætning. Typerne indlejres tilsvarende, men husk læsbarheden ved dybe strukturer.

const grid: [[number, number], [number, number]] = [[1, 2], [3, 4]]
const [[a, b], [c, d]] = grid
console.log(a, b, c, d) // 1 2 3 4

Hurtig kontrol

Test din forståelse af array- og tupeldestrukturering.

Besvar den i den interaktive lektion

Opsummering

Array-destrukturering binder efter position. Angiv typen med en tupeltype efter mønsteret, så hvert indeks får sin egen type. Spring elementer over med tomme pladser mellem kommaerne, saml resten med et restelement, som fortsat er en tupel af de resterende positioner, og angiv standardværdier for positioner, der muligvis mangler. Returværdier i form af tupler og destrukturering gør mønstre som useState effektive.

Gratis at komme i gang

Lær TypeScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 101
Lektioner: 352

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Destructuring af arrays og tupler” gratis?

Ja — hele teksten til “Destructuring af arrays og tupler” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af TypeScript Academy-kurset, skal du opgradere til CoddyKit PRO. TypeScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Destructuring af arrays og tupler”?

Destructur arrays og tupler med de korrekte elementtyper Du øver dig i TypeScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på TypeScript Academy?

Der kræves ingen tidligere erfaring. TypeScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Destructuring af arrays og tupler”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne TypeScript Academy-lektion?

Ja. Alle TypeScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til TypeScript Academy