Operador de Spread ES6 React


Operador de Spread

O operador de propagação JavaScript ( ...) nos permite copiar rapidamente todo ou parte de um array ou objeto existente em outro array ou objeto.

Exemplo

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

O operador spread é frequentemente usado em combinação com a desestruturação.

Exemplo

Atribua o primeiro e o segundo itens de numbersàs variáveis ​​e coloque o restante em uma matriz:

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

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

Podemos usar o operador spread com objetos também:

Exemplo

Combine estes dois objetos:

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

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

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

Observe que as propriedades que não corresponderam foram combinadas, mas a propriedade que correspondeu, color, foi substituída pelo último objeto que foi passado, updateMyVehicle. A cor resultante agora é amarela.


Teste-se com exercícios

Exercício:

Use o operador spread para combinar as seguintes matrizes.

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