React ES6 Spread-Operator


Spread-Operator

Der JavaScript-Spread-Operator ( ...) ermöglicht es uns, schnell ein vorhandenes Array oder Objekt ganz oder teilweise in ein anderes Array oder Objekt zu kopieren.

Beispiel

const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = [...numbersOne, ...numbersTwo];

Der Spread-Operator wird oft in Kombination mit Destrukturierung verwendet.

Beispiel

Weisen Sie das erste und zweite Element von numbersbis Variablen zu und fügen Sie den Rest in ein Array ein:

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

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

Wir können den Spread-Operator auch mit Objekten verwenden:

Beispiel

Kombinieren Sie diese beiden Objekte:

const myVehicle = {
  brand: 'Ford',
  model: 'Mustang',
  color: 'red'
}

const updateMyVehicle = {
  type: 'car',
  year: 2021, 
  color: 'yellow'
}

const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}

Beachten Sie, dass die nicht übereinstimmenden Eigenschaften kombiniert wurden, aber die übereinstimmende Eigenschaft, color, wurde durch das letzte übergebene Objekt überschrieben, updateMyVehicle. Die resultierende Farbe ist jetzt gelb.


Testen Sie sich mit Übungen

Übung:

Verwenden Sie den Spread-Operator, um die folgenden Arrays zu kombinieren.

const arrayOne = ['a', 'b', 'c'];
const arrayTwo = [1, 2, 3];
const arraysCombined = [];