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:
...
Use a sintaxe spread( )- Use o
Object.assign()
método - 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
person
objeto usando oObject.assign()
método. - Terceiro, altere o nome e as informações de endereço do
copiedPerson
objeto.
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 person
e copiedPerson
fazem referência a objetos diferentes, mas esses objetos fazem referência aos mesmos address
objetos.
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 person
objeto:
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 copiedPerson
objeto estão desconectados do person
objeto original. Neste tutorial, você aprendeu como copiar objetos em JavaScript usando cópia superficial ou profunda.