Resumo : neste tutorial, você aprenderá como usar o objeto JavaScript spread ( ...
) no ES2018 para clonar um objeto ou mesclar objetos em um.
Introdução ao operador de propagação de objeto JavaScript
No ES6, você usa o operador spread ( ...
) para descompactar elementos de um array . O operador spread pode ser muito útil para clonar um array. Por exemplo:
let colors = ['red', 'green', 'blue'];
let rgb = [...colors];
console.log(rgb);
Linguagem de código: JavaScript ( javascript )
Saída:
[ 'red', 'green', 'blue' ]
Linguagem de código: JSON/JSON com comentários ( json )
Neste exemplo, o operador spread( ...
) descompacta os elementos do colors
array e os coloca em um novo array rgb
. O operador spread ( ...
) pode ser usado para mesclar dois ou mais arrays em um, conforme mostrado no exemplo a seguir:
let rgb = [ 'red', 'green', 'blue' ];
let cmyk = ['cyan', 'magenta', 'yellow', 'black'];
let merge = [...rgb, ...cmyk];
console.log(merge);
Linguagem de código: JavaScript ( javascript )
Saída:
[ 'red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'black' ]
Linguagem de código: JSON/JSON com comentários ( json )
ES2018 expande o operador spread ( ...
) para fazê-lo funcionar com suas próprias propriedades enumeráveis de um objeto. Suponha que você tenha um circle
objeto com uma propriedade radius
:
const circle = {
radius: 10
};
Linguagem de código: JavaScript ( javascript )
O exemplo a seguir usa o operador spread ( ...
) para criar um coloredCircle
objeto que possui todas as propriedades do circle
objeto e uma propriedade adicional color
:
const coloredCircle = {
...circle,
color: 'black'
};
console.log(coloredCircle);
Linguagem de código: JavaScript ( javascript )
Saída:
{
radius: 10,
color: 'black'
}
Linguagem de código: CSS ( css )
Casos de uso do operador de propagação de objetos JavaScript
1) clonar um objeto
Você pode usar o operador spread para clonar as próprias propriedades enumeráveis de um objeto:
const circle = {
radius: 10
};
const clonedCircle = {...circle};
console.log(clonedCircle);
Linguagem de código: JavaScript ( javascript )
Saída:
{ radius: 10 }
Linguagem de código: CSS ( css )
Observe que a clonagem é sempre superficial. Por exemplo:
const circle = {
radius: 10,
style: {
color: 'blue'
}
};
const clonedCircle = {
...circle
};
clonedCircle.style = 'red';
console.log(clonedCircle);
Linguagem de código: JavaScript ( javascript )
Saída:
{ radius: 10, style: 'red' }
Linguagem de código: CSS ( css )
2) Mesclando objetos
Assim como os arrays, você pode usar o operador spread ( ...
) para mesclar dois objetos:
const circle = {
radius: 10
};
const style = {
backgroundColor: 'red'
};
const solidCircle = {
...circle,
...style
};
console.log(solidCircle);
Linguagem de código: JavaScript ( javascript )
Saída:
{ radius: 10, backgroundColor: 'red' }
Linguagem de código: CSS ( css )
Operador de spread vs.Object.assign()
O operador spread ( ...
) define novas propriedades no objeto alvo enquanto o Object.assign()
método as atribui. Tem dois efeitos colaterais.
1) Alvo objetos com setters
O Object.assign()
invoca setters no objeto de destino, enquanto o operador spread não o faz. O exemplo a seguir ilustra como clonar um objeto usando Object.assign()
o operador spread ( ...
). No entanto, apenas o Object.assign()
método aciona os setters:
class Circle {
constructor(radius) {
this.radius = radius;
}
set diameter(value) {
this.radius = value / 2;
console.log('SET ', value);
}
get diameter() {
return this.radius * 2;
}
}
let circle = new Circle(100);
let cloneCircle1 = Object.assign(circle, {
diameter: 200
});
let cloneCircle2 = {
...circle
};
Linguagem de código: JavaScript ( javascript )
Saída:
SET 200
2) Objetos de destino com propriedades somente leitura
Se um objeto de destino tiver uma propriedade somente leitura, você não poderá usar Object.assign()
o método para atribuir um novo valor a essa propriedade. Entretanto, o operador spread ( ...
) pode definir uma nova propriedade. Suponha que você tenha um objeto chamado blueSquare
cuja color
propriedade seja somente leitura:
const blueSquare = {
length: 100,
color: 'blue'
};
Object.defineProperty(blueSquare, 'color', {
value: 'blue',
enumerable: true,
writable: false
});
console.log(blueSquare);
Linguagem de código: JavaScript ( javascript )
Saída:
{ length: 100, color: 'blue' }
Linguagem de código: CSS ( css )
O seguinte usa o operador spread ( ...
) para mesclar os objetos style
e blueSquare
:
// merge style and blueSquare objects:
const style = {
color: 'green'
};
const greenSquare = {
...blueSquare,
...style
};
console.log(greenSquare);
Linguagem de código: JavaScript ( javascript )
Saída:
{ length: 100, color: 'green' }
Linguagem de código: CSS ( css )
No entanto, se você usar o Object.assign()
método, receberá um erro:
// merge style and redSquare objects: ERROR
const redSquare = Object.assign(blueSquare, {
color: 'red'
});
Linguagem de código: JavaScript ( javascript )
Erro:
TypeError: Cannot assign to read only property 'color' of object '#<Object>'
Linguagem de código: JavaScript ( javascript )
Resumo
- O operador de propagação de objetos (
...
) descompacta as próprias propriedades enumeráveis de um objeto. - Use o operador de propagação de objetos para clonar um objeto ou mesclar objetos em um. A clonagem é sempre superficial.
- Ao mesclar objetos, o operador spread define novas propriedades enquanto as
Object.assign()
atribui.