Cópia rasa versus cópia profunda em javascript

A tarefa de cópia em JavaScript é bastante direta para tipos de dados primitivos. No entanto, você deve escolher cuidadosamente entre o Cópia rasa e profunda técnicas enquanto lidava com objetos e referências.

Em Endereços de referência apenas de cópia superficial são copiados; Portanto, alterar um objeto também aplicará as mesmas alterações a outro objeto. Para evitar essa situação, você pode utilizar o procedimento de cópia profunda.

Este post explicará o conceito de cópia superficial e cópia profunda usando exemplos apropriados. Então vamos começar!

Cópia superficial em javascript

Um mecanismo em que um objeto é copiado em um objeto especificado é conhecido como cópia superficial.

• O método de cópia superficial pasta uma cópia exata de um determinado objeto em outro objeto.
• É utilizado principalmente para copiar elementos de matriz unidimensional, onde apenas copia os elementos presentes no primeiro nível.
• Ele apenas copia os endereços de referência para outro objeto.

Métodos para copiar superficial um objeto em javascript

Para copiar superficial um objeto JavaScript em outro objeto, você pode usar os seguintes métodos:

• Objeto.Atribuir () método
• Operador espalhado […]
• Operador de atribuição “=”

Observação: Se você utilizar o “Operador espalhado” ou “objeto.atribuir()" Método, depois de cópia superficial, o objeto copiado é desconectado do objeto original, enquanto, no caso de usar o “atribuição”O operador, alterar o objeto copiado, também modificará o objeto original.

Discutiremos brevemente cada um dos métodos mencionados para copiar superficial um objeto em javascript.

Cópia superficial de um objeto em javascript usando o operador espalhado

O "espalhar”O operador pode ser utilizado para cópia superficial de um objeto. É representado como três pontos consecutivos “...”.

Sintaxe do uso do operador espalhado para copiar superficial um objeto em javascript

Seja objeto2 = … object1;

Aqui, o operador de spread copiará o par de valores-chave de "Object1" para "Object2".

Exemplo: cópia rasa de um objeto em javascript usando o operador de spread

Primeiro de tudo, criaremos um objeto chamado “funcionário”Tendo dois pares de valor-chave:

const funcionário =
Nome: 'Alex',
Designação: 'Gerente'
;

Então, vamos copiar rasos “funcionário"Objeta -se ao recém -criado"EMP1”Objeto usando o operador de spread:

Seja emp1 = … funcionário;

Além disso, você pode verificar se modificando os valores da propriedade do “EMP1”O objeto também pode afetar o“funcionárioPropriedade do nome do objeto:

EMP1.nome = 'max';

console.Log (“Nome Emp1:” + Emp1.nome);

console.log (“Nome do funcionário:” + funcionário.nome); [/cc]

Nós copiamos com sucesso o “funcionário”Objeta -se ao“EMP1”Objeta e modificando o“EMP1.nome”O valor da propriedade não aplicou nenhuma alteração no“funcionário.nome" propriedade:

Cópia superficial em javascript usando objeto.Atribuir () método

O javascript “Objeto.atribuir()”O método é utilizado para cópia superficial do“valor chave“Par de um objeto já criado em outro objeto. O objeto original não será afetado ao utilizar o objeto.Atribuir () método.

Sintaxe do uso do objeto.Atribuir () Método para cópia superficial em JavaScript

Objeto.atribuir (destino, fonte)

Aqui, "alvo”Representa o objeto JavaScript cujo par de valores-chave será copiado e“fonte”Indica o objeto em que o par copiado de valor-chave será colocado.

Exemplo: cópia rasa em javascript usando objeto.Atribuir () método

Vamos invocar o “Objeto.atribuir()”Método para copiar superficial “Funcionário” objeto para “emp1”:

Seja emp1 = ; objeto.atribuir (emp1, funcionário);

O "Objeto.atribuir()”O método retornará o objeto de destino, que é“EMP1" no nosso caso:

Em seguida, atualizaremos o “Emp.nome" valor da propriedade:

EMP1.nome = 'Stepheny'; console.log ("Nome emp1:" + emp1.nome);
console.log ("funcionário.Nome: " + funcionário.nome);

Como você pode ver na saída abaixo, alterando o “Emp.nome”O valor da propriedade não modificou o“funcionário”Objeto.

Cópia superficial em javascript usando o operador de atribuição

O operador de atribuição “=”Também pode ajudar na cópia superficial de um objeto em javascript. No caso de usar o operador de atribuição, ambas as variáveis ​​se referirão ao mesmo objeto. Alterações em um objeto também afetarão o valor da propriedade do objeto correspondente:

Sintaxe do uso do operador de atribuição para cópia superficial em JavaScript

Object2 = Object1

Aqui, o operador de atribuição copia o "Object1" para "Object2".

Exemplo: cópia rasa em JavaScript usando o operador de atribuição

Agora, usaremos o operador de atribuição JavaScript para copiar superficial “Funcionário” objeto para “emp1”:

Seja emp1 = ; emp1 = funcionário;

Na próxima etapa, especificaremos “Stepheny"Como o valor de"EMP1.nome" propriedade:

EMP1.nome = 'Stepheny'; console.log ("Nome emp1:" + emp1.nome);
console.log ("funcionário.Nome: " + funcionário.nome);

A saída dada significa que alterar o “Emp.nome”O valor da propriedade não modificou o “Nome do objeto do“ funcionário ” propriedade:

Agora, discutiremos o conceito de cópia profunda de um objeto em JavaScript.

Cópia profunda em javascript

““Cópia profunda”É um procedimento recursivo de copiar objeto. Esse mecanismo cria um novo objeto e depois clara o par de valores-chave do objeto especificado para ele. Esta afirmação significa que, enquanto cópia profunda, um objeto JavaScript é completamente clonado em outro objeto. Depois disso, o objeto copiado é desconectado do objeto original.

Métodos para copiar profundamente um objeto em javascript

Métodos utilizados para cópia profunda de um objeto JavaScript são JSON.stringify () e json.Parse (), onde o método stringify () converte um objeto JavaScript específico em uma string e, em seguida, o método parse () executa a operação de análise e retorna um objeto.

Sintaxe de usar JSON.stringify () e json.Métodos parse () para copiar profundamente um objeto em JavaScript

Deixe objeto2 = JSON.Parse (JSON.stringify (object1));

Aqui o stringify () METHOD converte JavaScript “objeto1”Para uma string, e então o método parse () executa a operação de análise e retornos que serão armazenados em“objeto2”.

Exemplo: cópia profunda em javascript um objeto em javascript usando json.stringify () e json.Métodos parse ()

Neste exemplo, usamos o métodos stringify () e parse () copiar "Funcionário" para o "emp1" objeto. O "JSON.stringify ()”Método converterá o“funcionário“Objeto em um“corda”E então o“JSON.Parse ()”Método analise a string resultante e retorne um objeto JavaScript:

Deixe funcionário =
Nome: 'Alex',
Endereço: City: 'Ancara', país: 'Turquia'
;
var emp1 = json.Parse (JSON.stringify (funcionário));
console.log (emp1);

Dada a saída significa que copiamos com sucesso o “Funcionário” objeto para “emp1”:

Por fim, modificaremos algumas propriedades do objeto "EMP1" e, em seguida, confira o resultado:

EMP1.nome = 'max';
EMP1.endereço.cidade = 'Istambul';
console.log ("emp1.Nome: " + emp1.nome);
console.log ("emp1.endereço.cidade: " + emp1.endereço.cidade);
console.log ("funcionário.Nome: " + funcionário.nome);
console.log ("funcionário.endereço.cidade: " + funcionário.endereço.cidade);

Depois de executar a operação de cópia profunda, o “EMP1"É desconectado do"funcionário,”Então, quaisquer alterações feitas no“EMP1”Não afetará o“funcionário”Objeto:

Compilamos todas as informações essenciais relacionadas a cópias rasas e objetos de cópia profunda em JavaScript. Você pode explorá -lo ainda mais de acordo com seus requisitos.

Conclusão

Operador espalhado “[…]”, “Objeto.atribuir () ”e operador“ atribuição ” são métodos que permitem que você Objetos de cópia superficial e para copiar profundamente um objeto JavaScript, JSON.stringify () e json.Métodos parse () são usados ​​onde o json.O método stringify () converte um objeto específico em uma string, que é então analisada usando JSON.Método parse (). Este post explicou o conceito de cópia superficial e profunda usando exemplos apropriados.