Objekt Rest- und Spread-Eigenschaften

Bevor wir über Objekt-Rest- und Spread-Eigenschaften sprechen, machen wir eine Reise in die Vergangenheit und erinnern uns an ein sehr ähnliches Merkmal.

ES2015 Array-Rest- und Spread-Elemente

Das gute alte ECMAScript 2015 führte Rest-Elemente für die Array-Destrukturierung und Spread-Elemente für Array-Literale ein.

// Rest-Elemente für Array-Destrukturierungszuweisung:
const primes = [2, 3, 5, 7, 11];
const [first, second, ...rest] = primes;
console.log(first); // 2
console.log(second); // 3
console.log(rest); // [5, 7, 11]

// Spread-Elemente für Array-Literale:
const primesCopy = [first, second, ...rest];
console.log(primesCopy); // [2, 3, 5, 7, 11]

ES2018: Objekt-Rest- und Spread-Eigenschaften 🆕

Was gibt es also Neues? Nun, ein Vorschlag erlaubt auch Rest- und Spread-Eigenschaften für Objektliterale.

// Rest-Eigenschaften für Objekt-Destrukturierungszuweisung:
const person = {
    firstName: 'Sebastian',
    lastName: 'Markbåge',
    country: 'USA',
    state: 'CA',
};
const { firstName, lastName, ...rest } = person;
console.log(firstName); // Sebastian
console.log(lastName); // Markbåge
console.log(rest); // { country: 'USA', state: 'CA' }

<!--truncate-->
// Spread-Eigenschaften für Objektliterale:
const personCopy = { firstName, lastName, ...rest };
console.log(personCopy);
// { firstName: 'Sebastian', lastName: 'Markbåge', country: 'USA', state: 'CA' }

Spread-Eigenschaften bieten eine elegantere Alternative zu Object.assign() in vielen Situationen:

// Ein Objekt flach klonen:
const data = { x: 42, y: 27, label: 'Schatz' };
// Der alte Weg:
const clone1 = Object.assign({}, data);
// Der neue Weg:
const clone2 = { ...data };
// Beide ergeben:
// { x: 42, y: 27, label: 'Schatz' }

// Zwei Objekte zusammenführen:
const defaultSettings = { logWarnings: false, logErrors: false };
const userSettings = { logErrors: true };
// Der alte Weg:
const settings1 = Object.assign({}, defaultSettings, userSettings);
// Der neue Weg:
const settings2 = { ...defaultSettings, ...userSettings };
// Beide ergeben:
// { logWarnings: false, logErrors: true }

Es gibt jedoch einige subtile Unterschiede in der Art und Weise, wie Spread mit Settern umgeht:

1. Object.assign() löst Setter aus; Spread nicht.
2. Sie können Object.assign() daran hindern, eigene Eigenschaften über geerbte schreibgeschützte Eigenschaften zu erstellen, aber nicht den Spread-Operator.

Axel Rauschmayer’s Erklärung erläutert diese Feinheiten im Detail.