Objekt-Destrukturierung in

Über Objekt-Destrukturierung

Objekt-Destrukturierung ist eine prägnante Möglichkeit, Eigenschaften aus einem Objekt zu extrahieren. Ihre Syntax ähnelt einem Objektliteral-Ausdruck, steht aber auf der linken Seite der Zuweisung statt auf der rechten.

const weather = {
  sun: '☀️',
  sun_behind_small_cloud: '🌤️',
  sun_behind_cloud: '⛅',
  sun_behind_large_cloud: '🌥️',
  sun_behind_rain_cloud: '🌦️',
  cloud: '☁️',
  cloud_with_rain: '🌧️',
  cloud_with_snow: '🌨️',
  cloud_with_lightning: '🌩️',
  cloud_with_lightning_and_rain: '⛈️',
};

const { sun, cloud, cloud_with_lightning } = weather;

sun;
// => '☀️'

cloud;
// => '☁️'

cloud_with_lightning;
// => '🌩️'

Umbenennen bei der Zuweisung

Die Syntax kann die Eigenschaften über ihren Schlüssel extrahieren, etwa sun, cloud und cloud_with_lightning, sie kann der Variable aber auch einen anderen Namen geben:

const { sun: sunny, cloud: cloudy, cloud_with_rain: rainy } = weather;

typeof cloud_with_rain;
// => 'undefined'

typeof rainy;
// => 'string'

rainy;
// => 🌧️

Außerdem müssen bei der Zuweisung nicht alle Werte verwendet werden.

Standardwerte

Die Objekt-Destrukturierungszuweisung kann Standardwerte angeben, falls im Quellobjekt keiner vorhanden ist:

const { sun = '🌞', tornado = '🌪️', cloud_with_snow: snowy = '❄️' } = weather;

sun;
// => '☀️'

tornado;
// => '🌪️'

snowy;
// => '🌨️'

Dabei fällt Folgendes auf:

• sun wurde aus dem Objekt weather extrahiert, ohne ersetzt zu werden, da es im Objekt weather vorhanden ist,
• tornado existiert nicht im Objekt weather, daher wurde der Standardwert verwendet,
• cloud_with_snow wurde als Variable snowy extrahiert, ohne ersetzt zu werden, da cloud_with_snow im Objekt weather vorhanden ist.

Destrukturierung von Funktionsparametern

Das Objekt weather hat viele Eigenschaften. Du kannst eine oder mehrere Eigenschaften direkt aus diesem Objekt extrahieren, wenn es an eine Funktion übergeben wird:

function weatherReport({ sun }) {
  console.log(sun);
}

weatherReport(sun);
// => '☀️'

Destrukturierung bei der for of-Iteration

Wenn du über ein array (oder ein anderes Iterable) iterierst und die Elemente Objekte sind, kannst du innerhalb der Anweisung for (...) of iterable destrukturieren:

const { sun: sunny, cloud: cloudy, cloud_with_rain: rainy } = weather;

const prediction = [
  {
    chance: 0.8,
    weather: sunny,
    description: 'There is a 80% chance it will remain sunny.',
  },
  {
    chance: 0.15,
    weather: cloudy,
    description:
      'There is a 15% chance the clouds will keep the sun from poking through.',
  },
  {
    chance: 0.05,
    weather: rainy,
    description: 'There is a small chance of rain.',
  },
];

for (const { weather: symbol, description } of prediction) {
  console.log(`${symbol}: ${description}`);
}

//  '☀️: There is a 80% chance it will remain sunny.'
// '☁️: There is a 15% chance the clouds will keep the sun from poking through.'
// '🌧️: There is a small chance of rain.'

Verwandte Konzepte

array-destructuring rest-and-spread