Array-Destrukturierung in

Über Array-Destrukturierung

Die Array-Destrukturierungszuweisung ist eine kompakte Art, Werte aus einem Array zu entnehmen. Ihre Syntax ähnelt einem Array-Literal-Ausdruck, steht aber auf der linken Seite der Zuweisung statt auf der rechten.

const frenchNumbers = ['quatre-vingts', 'quatre-vingt-dix', 'cent'];
const [french80, french90, french100] = frenchNumbers;

french80;
// => 'quatre-vingts'
french90;
// => 'quatre-vingt-dix'
french100;
// => 'cent'

Erneute Zuweisung

Da Variablen über ihre Position im Array den Werten zugeordnet werden, kannst du mit der Destrukturierungssyntax mehrere Variablen in einem einzigen Ausdruck zuweisen oder neu zuweisen.

let [a, b] = ['world', 'hello'];
[b, a] = [a, b];

a;
// => 'hello'
b;
// => 'world'

Das funktioniert auch mit verschachtelten Arrays.

let [a, b, c] = ['orange', 'purple', 'green'];
[[a, b], c] = [[c, a], b];

a;
// => 'green'
b;
// => 'orange'
c;
// => 'purple'

Zuweisung überspringen

Die Syntax erlaubt es, beim Zuordnen Werte zu überspringen, zum Beispiel um bestimmte Positionen im Array zu ignorieren. Im folgenden Beispiel nehmen wir an, dass es eine Funktion getUserInfo gibt, die ein Array mit dem Vornamen, dem Nachnamen und der Straßenadresse eines Nutzers zurückgibt.

getUserInfo();
// => ["Valerie", "Noir", "Sunny Lane 523"]

const [, , streetAddress] = getUserInfo();

streetAddress;
// => "Sunny Lane 523"

Werte weglassen

Die Zuweisung muss auch nicht alle Werte verwenden.

const [firstName, lastName] = getUserInfo();

firstName;
// => "Valerie"

lastName;
// => "Noir"

Mehr Werte entnehmen, als vorhanden sind

Du kannst sogar mehr Werte entnehmen, als das Array enthält; die übrig bleibenden Variablen erhalten undefined. Das kann nützlich sein, wenn die Anzahl der Werte vorher nicht bekannt ist.

const pickAtLeastOne = ['first choice', 'second choice'];
const [first, second, third, fourth] = pickAtLeastOne;

first;
// => "first choice"

second;
// => "second choice"

third;
// => undefined

fourth;
// => undefined

Standardwerte

Die Array-Destrukturierungszuweisung kann Standardwerte angeben, falls das Quell-Array keinen Wert enthält.

const [first, second, third = 'none selected', fourth] = pickAtLeastOne;

third;
// => 'none selected'

fourth;
// => undefined

Verwandte Konzepte

object-destructuring rest-and-spread