Propagação de objetos JavaScript

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 colorsarray 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 circleobjeto 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 coloredCircleobjeto que possui todas as propriedades do circleobjeto 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 blueSquarecuja colorpropriedade 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 stylee 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.