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

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

O exemplo a seguir mostra como copiar um objeto usando três métodos acima:

Ambos spread (...) e Object.assign() efectuar uma cópia superficial, enquanto o JSON métodos efectuar uma cópia de profundidade.

cópia pouco profunda vs., cópia profunda

em JavaScript, você usa variáveis para armazenar valores que podem ser primitivos ou referências. Quando você faz 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, você simplesmente usa uma atribuição simples:

Code language: JavaScript (javascript)

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

Code language: JavaScript (javascript)

Saída:

no Entanto, se você usar o operador de atribuição para um valor de referência, não vai copiar o valor., Em vez disso, ambas as variáveis referenciam o mesmo objeto na memória:

Code language: JavaScript (javascript)

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

Code language: JavaScript (javascript)

Saída:

Code language: CSS (css)

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

exemplo de cópia superficial

considere o seguinte exemplo:

neste exemplo:

  • primeiro, crie um novo objecto chamado person.
  • Second, clone the person object using theObject.assign() method.
  • hird, change the first name and address information of the copiedPerson object.,

Aqui está o resultado:

no Entanto, quando você mostra os valores da pessoa objeto, você irá encontrar as informações de endereço mudou, mas o primeiro nome:

Code language: JavaScript (javascript)

Saída:

A razão é que o endereço é o valor de referência, enquanto que o primeiro nome é um valor primitivo. Both personand copiedPersonreferences different objects but these objects reference the same address objects.,

cópia de Profundidade exemplo

O seguinte trecho de substitui Object.assign() método JSON métodos para efectuar uma cópia de profundidade person objetivo:

Saída

Code language: CSS (css)

neste exemplo, todos os valores copiedPerson objeto estiver desconectado do original person objeto. Neste tutorial, você aprendeu a copiar objetos em JavaScript usando uma cópia rasa ou profunda.

  • este tutorial foi útil ?
  • YesNo