Читать книгу Angular - Ferdinand Malcher - Страница 94

Mit ECMAScript 2015 und TypeScript können wir Objekte und Arrays »destrukturieren«. Was zunächst gefährlich klingt, ist ein nützliches Feature bei der Arbeit mit Daten.

Object Destructuring

Wenn wir einzelne Eigenschaften eines Objekts extrahieren und in Variablen schreiben möchten, so müssen wir die Variablen zuerst anlegen und dann mit den Werten aus dem Objekt befüllen. Mit der Destrukturierung lässt sich dieser Code auf eine Zeile verkürzen: Die Variablen werden automatisch angelegt und mit den gleichnamigen Eigenschaften aus dem Objekt befüllt.

const myObject = { title: 'Angular', year: 2016 };

const title = myObject.title;

const year = myObject.year;

// Object Destructuring

const { title, year } = myObject;

Array Destructuring

Ähnlich funktioniert die Destrukturierung auch für Arrays. Wir können damit vom ersten Element ausgehend einzelne Elemente aus dem Array in Variablen schreiben.

const dimensions = [1920, 1080];

const width = dimensions[0];

const height = dimensions[1];

// Array Destructuring

const [width, height] = dimensions;

Besonders mächtig wird diese Notation in Verbindung mit der Rest-Syntax. Wir können damit alle übrigen Elemente in einem neuen Array empfangen:

const numbers = [1, 2, 3, 4, 5, 6];

const [one, two, ...rest] = numbers;

// one = 1

// two = 2

// rest = [3, 4, 5, 6]

Variablen als Propertys einsetzen

Der Vollständigkeit halber existiert auch der Rückweg für das Object Destructuring: Wenn wir einzelne Variablen haben, die wir in einem Objekt mit denselben Namen zusammenführen wollen, müssen wir den Namen üblicherweise doppelt angeben. ECMAScript 2015 bietet dafür eine Kurzform, sodass wir eine Variable direkt in das Objekt einfügen können.

const title = 'Angular';

const year = 2016;

const myObject1 = {

title: title,

year: year

};

// Kurzform

const myObject2 = { title, year };