React ES6 Spread Operator


Operator rozprzestrzeniania się

Operator rozprzestrzeniania JavaScript ( ...) pozwala nam szybko skopiować całość lub część istniejącej tablicy lub obiektu do innej tablicy lub obiektu.

Przykład

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

Operator spreadu jest często używany w połączeniu z destrukturyzacją.

Przykład

Przypisz pierwszy i drugi element od numbersdo zmiennych, a resztę umieść w tablicy:

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

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

Operatora rozsunięcia możemy używać również z obiektami:

Przykład

Połącz te dwa obiekty:

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

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

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

Zwróć uwagę, że niezgodne właściwości zostały połączone, ale właściwość, która się nie zgadzała color, została nadpisana przez ostatni przekazany obiekt, updateMyVehicle. Otrzymany kolor jest teraz żółty.


Sprawdź się za pomocą ćwiczeń

Ćwiczenie:

Użyj operatora rozsunięcia, aby połączyć następujące tablice.

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