Programa JavaScript para clonar um objeto JS

Neste exemplo, você aprenderá a escrever um programa que clona um objeto.

Para entender este exemplo, você deve ter conhecimento dos seguintes tópicos de programação JavaScript:

Objetos JavaScript
JavaScript Object.assign ()

Um objeto JavaScript é um tipo de dados complexo que pode conter vários tipos de dados. Por exemplo,

 const person = ( name: 'John', age: 21, )

Aqui personestá um objeto. Agora, você não pode clonar um objeto fazendo algo assim.

 const copy = person; console.log(copy); // (name: "John", age: 21)

No programa acima, a copyvariável tem o mesmo valor do personobjeto. No entanto, se você alterar o valor do copyobjeto, o valor no personobjeto também será alterado. Por exemplo,

 copy.name = 'Peter'; console.log(copy.name); // Peter console.log(person.name); // Peter

A mudança é vista em ambos os objetos porque os objetos são tipos de referência . E ambos copye personestão apontando para o mesmo objeto.

Exemplo 1. Clone o objeto usando Object.assign ()

 // program to clone the object // declaring object const person = ( name: 'John', age: 21, ) // cloning the object const clonePerson = Object.assign((), person); console.log(clonePerson); // changing the value of clonePerson clonePerson.name = 'Peter'; console.log(clonePerson.name); console.log(person.name);

Resultado

 (nome: "John", idade: 21) Peter John

O Object.assign()método faz parte do padrão ES6 . O Object.assign()método executa cópia profunda e copia todas as propriedades de um ou mais objetos.

Nota : O vazio ()como o primeiro argumento garante que você não altere o objeto original.

Exemplo 2: clonar o objeto usando a sintaxe de propagação

 // program to clone the object // declaring object const person = ( name: 'John', age: 21, ) // cloning the object const clonePerson = (… person) console.log(clonePerson); // changing the value of clonePerson clonePerson.name = 'Peter'; console.log(clonePerson.name); console.log(person.name);

Resultado

 (nome: "John", idade: 21) Peter John

A sintaxe de propagação … foi introduzida na versão posterior (ES6).

A sintaxe de propagação pode ser usada para fazer uma cópia superficial de um objeto. Isso significa que ele irá copiar o objeto. No entanto, os objetos mais profundos são referenciados. Por exemplo,

 const person = ( name: 'John', age: 21, // the inner objects will change in the shallow copy marks: ( math: 66, english: 73) ) // cloning the object const clonePerson = (… person) console.log(clonePerson); // (name: "John", age: 21, marks: (… )) // changing the value of clonePerson clonePerson.marks.math = 100; console.log(clonePerson.marks.math); // 100 console.log(person.marks.math); // 100

Aqui, quando o valor do objeto interno mathé alterado para 100 do clonePersonobjeto, o valor da mathchave do personobjeto também muda.

Exemplo 3: clonar o objeto usando JSON.parse ()

 // program to clone the object // declaring object const person = ( name: 'John', age: 21, ) // cloning the object const clonePerson = JSON.parse(JSON.stringify(person)); console.log(clonePerson); // changing the value of clonePerson clonePerson.name = 'Peter'; console.log(clonePerson.name); console.log(person.name);

Resultado