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:
- Use o spread (
...
) sintaxe - Use
Object.assign()
método - Use
JSON.stringify()
eJSON.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 person
and copiedPerson
references 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