3 maneiras de copiar objetos em JavaScript

Resumo : neste tutorial, você aprenderá como copiar objetos em JavaScript, incluindo cópia superficial e cópia profunda. Para copiar um objeto em JavaScript, você tem três opções:

1. ...Use a sintaxe spread( )
2. Use o Object.assign()método
3. Use os métodos JSON.stringify()eJSON.parse()

O seguinte ilustra como copiar um objeto usando os três métodos acima:

const person = {
    firstName: 'John',
    lastName: 'Doe'
};


// using spread ...
let p1 = {
    ...person
};

// using  Object.assign() method
let p2 = Object.assign({}, person);

// using JSON
let p3 = JSON.parse(JSON.stringify(person));
Linguagem de código:  JavaScript  ( javascript )

Ambos espalham ( ...) e Object.assign()executam uma cópia superficial, enquanto os métodos JSON carregam uma cópia profunda.

Cópia superficial vs. cópia profunda

Em JavaScript, você usa variáveis ​​para armazenar valores que podem ser primitivos ou referências . Ao fazer uma cópia de um valor armazenado em uma variável, você cria uma nova variável com o mesmo valor. Para um valor primitivo, basta usar uma atribuição simples:

let counter = 1;
let copiedCounter = counter;
Linguagem de código:  JavaScript  ( javascript )

E quando você altera o valor da variável copiada, o valor da original permanece o mesmo.

copiedCounter = 2;
console.log(counter); 
Linguagem de código:  JavaScript  ( javascript )

Saída:

1

Entretanto, se você usar o operador de atribuição para um valor de referência, ele não copiará o valor. Em vez disso, ambas as variáveis ​​farão referência ao mesmo objeto na memória:

let person = {
    firstName: 'John',
    lastName: 'Doe'
};
let copiedPerson = person;Linguagem de código:  JavaScript  ( javascript )

E ao acessar o objeto através da nova variável (copiedPerson) e alterar o valor de sua propriedade (nome), você altera o valor da propriedade do objeto.

copiedPerson.firstName = 'Jane';
console.log(person); 
Linguagem de código:  JavaScript  ( javascript )

Saída:

{
    firstName: 'Jane',
    lastName: 'Doe'
}Linguagem de código:  CSS  ( css )

Uma cópia profunda significa que o valor da nova variável está desconectado da variável original, enquanto uma cópia superficial significa que alguns valores ainda estão conectados à variável original.

Exemplo de cópia superficial

Considere o seguinte exemplo:

let person = {
    firstName: 'John',
    lastName: 'Doe',
    address: {
        street: 'North 1st street',
        city: 'San Jose',
        state: 'CA',
        country: 'USA'
    }
};


let copiedPerson = Object.assign({}, person);

copiedPerson.firstName = 'Jane'; // disconnected

copiedPerson.address.street = 'Amphitheatre Parkway'; // connected
copiedPerson.address.city = 'Mountain View'; // connected

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

Neste exemplo:

• Primeiro, crie um novo objeto chamado person.
• Segundo, clone o personobjeto usando o Object.assign()método.
• Terceiro, altere o nome e as informações de endereço do copiedPersonobjeto.

Aqui está a saída:

{
    firstName: 'Jane',
    lastName: 'Doe',
    address: {
        street: 'Amphitheatre Parkway',
        city: 'Mountain View',
        state: 'CA',
        country: 'USA'
    }
}
Linguagem de código:  CSS  ( css )

Porém, ao mostrar os valores do objeto pessoa, você descobrirá que as informações de endereço mudaram, exceto o primeiro nome:

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

Saída:

{
    firstName: 'John',
    lastName: 'Doe',
    address: {
        street: 'Amphitheatre Parkway',
        city: 'Mountain View',
        state: 'CA',
        country: 'USA'
    }
}
Linguagem de código:  CSS  ( css )

A razão é que o endereço é um valor de referência enquanto o primeiro nome é um valor primitivo. Ambos persone copiedPersonfazem referência a objetos diferentes, mas esses objetos fazem referência aos mesmos addressobjetos.

Exemplo de cópia profunda

O trecho a seguir substitui o Object.assign()método pelos métodos JSON para transportar uma cópia profunda do personobjeto:

let person = {
    firstName: 'John',
    lastName: 'Doe',
    address: {
        street: 'North 1st street',
        city: 'San Jose',
        state: 'CA',
        country: 'USA'
    }
};


let copiedPerson = JSON.parse(JSON.stringify(person));

copiedPerson.firstName = 'Jane'; // disconnected

copiedPerson.address.street = 'Amphitheatre Parkway';
copiedPerson.address.city = 'Mountain View';

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

Saída

{
    firstName: 'John',
    lastName: 'Doe',
    address: {
        street: 'North 1st street',
        city: 'San Jose',
        state: 'CA',
        country: 'USA'
    }
}
Linguagem de código:  CSS  ( css )

Neste exemplo, todos os valores do copiedPersonobjeto estão desconectados do personobjeto original. Neste tutorial, você aprendeu como copiar objetos em JavaScript usando cópia superficial ou profunda.