JavaScript Object.assign() – Acervo Lima Tutorials

Resumo : neste tutorial, você aprenderá como usar o Object.assign()método JavaScript no ES6.

O seguinte mostra a sintaxe do Object.assign()método:

Object.assign(target, ...sources)Linguagem de código:  CSS  ( css )

Copia todas as propriedadesObject.assign() enumeráveis e próprias dos objetos para o objeto. Ele retorna o objeto.sourcetargettarget

O Object.assign()invoca os getters nos objetos de origem e os setters no destino. Atribui apenas propriedades, não copiando ou definindo novas propriedades.

Usando JavaScript Object.assign() para clonar um objeto

O exemplo a seguir usa o Object.assign()método para clonar um objeto .

let widget = {
    color: 'red'
};

let clonedWidget = Object.assign({}, widget);

console.log(clonedWidget);
Linguagem de código:  JavaScript  ( javascript )

Saída

{ color: 'red' }
Linguagem de código:  CSS  ( css )

Observe que o Object.assign()único carrega um clone superficial, não um clone profundo.

Usando JavaScript Object.assign() para mesclar objetos

O Object.assign()pode mesclar objetos de origem em um objeto de destino que possui propriedades que consistem em todas as propriedades dos objetos de origem. Por exemplo:

let box = {
    height: 10,
    width: 20
};

let style = {
    color: 'Red',
    borderStyle: 'solid'
};

let styleBox = Object.assign({}, box, style);

console.log(styleBox);
Linguagem de código:  JavaScript  ( javascript )

Saída:

{
    height: 10,
    width: 20,
    color: 'Red',
    borderStyle: 'solid'
}
Linguagem de código:  CSS  ( css )

Se os objetos de origem tiverem a mesma propriedade, a propriedade do objeto posterior substituirá a anterior:

let box = {
    height: 10,
    width: 20,
    color: 'Red'
};

let style = {
    color: 'Blue',
    borderStyle: 'solid'
};

let styleBox = Object.assign({}, box, style);

console.log(styleBox);
Linguagem de código:  JavaScript  ( javascript )

Saída:

{
    height: 10,
    width: 20,
    color: 'Blue',
    borderStyle: 'solid'
}
Linguagem de código:  CSS  ( css )

Resumo

Object.assign()atribui propriedades enumeráveis e próprias de um objeto de origem a um objeto de destino.
Object.assign()pode ser usado para clonar um objeto ou mesclar objetos .