Como fazer objetos clone profundos em JavaScript
Existem dois tipos de clones de objetos \ matrizes, um deles sendo clones rasos e o outro sendo clones profundos.
Para criar clones profundos No JavaScript de baunilha, precisamos usar um combinação de JSON Parse () função e Json stringify () função. Neste post, vamos discutir o que são clones rasos e clones profundos, como fazer clones em javascript e como fazer clones profundos.
Clones rasos vs clones profundos
Sempre que uma matriz \ objeto contendo outra matriz \ objeto dentro, ele é copiado de uma variável para outra variável, os elementos dessa matriz \ objeto não são copiados; Em vez disso, um ponteiro de referência é copiado para a nova variável que aponta para a variável antiga. Tais cópias são conhecidas como cópias superficiais ou clones rasos
Considerando que, quando os elementos de uma matriz \ objeto são copiados diretamente (não seu ponteiro de referência) para uma nova variável junto com o objeto Array \ aninhado, então essa cópia é conhecida como clones profundos ou cópias profundas.
Explicação com código JavaScript
São conceitos avançados de JavaScript, é por isso que usaremos exemplos de codificação para demonstrar a diferença entre clonagem superficial e clonagem profunda. Para começar, crie uma matriz contendo vários elementos usando a seguinte linha de código:
var originalArray = [true, false, 2, "google", indefinido];
Agora, existem duas maneiras de clonar esta matriz:
- Usando o método de fatia
- Usando o operador de espalhamento
Para criar um clone usando o método Slice, use a seguinte linha:
var clone1 = OriginalArray.fatia (0);
E para criar um clone usando o operador de espalhamento, use a seguinte linha:
var clone2 = [… originalArray];
Para testar se nossos elementos foram copiados ou não, podemos usar a função de log do console para imprimir a matriz original, bem como os dois clones:
console.log (originalArray);
console.log (clone1);
console.log (clone2);
Recebemos a seguinte saída em nosso console:
Para provar estes são clones reais, e não as referências da matriz original passadas dentro dessas variáveis, faremos algumas alterações nos clones e verificar se essas alterações afetam a matriz original ou não.
clone1 [0] = 1;
clone2 [1] = "hello";
Imprima todas as matrizes no console mais uma vez para examinar as alterações com as seguintes linhas:
console.log (originalArray);
console.log (clone1);
console.log (clone2);
Você observará a seguinte saída:
Como você pode ver, as mudanças nas matrizes do clone não afetaram a matriz original, o que significa que outras matrizes não copiaram a referência da matriz original.
Verificação de clones rasos
Vimos como clonar matrizes simples, mas e se tivermos uma matriz ou objeto que contenha outra matriz dentro dela, considere a seguinte matriz:
var originalArray = [["google"]];
Como você pode ver, temos uma matriz dentro de outra matriz, vamos tentar fazer um clone dessa matriz usando o método de fatia que já usamos no exemplo acima:
var clone = originalArray.fatia (0);
Fizemos um clone dessa matriz na variável "clone", Imprima essas duas matrizes usando a função de log do console:
console.log (originalArray [0]);
console.log (clone [0]);
Você deve ver o seguinte resultado no console da sua tela:
Vamos tentar fazer algumas alterações na matriz clonada com a seguinte linha de código:
Clone [0].push ("mapas");
Isso deve fazer alterações apenas no "clone" Array e não na matriz original, mas é aqui que as coisas ficam interessantes. Imprima as duas matrizes usando a função de log do console:
console.log (originalArray [0]);
console.log (clone [0]);
Você deve ver o seguinte resultado em seu console:
Você pode observar facilmente a partir da imagem acima que as mudanças na matriz clonada causaram mudanças na matriz original. Isso significa que, se nosso objeto \ Array contiver objeto \ matrizes, a clonagem passa referência aos objetos aninhados, criando assim um clone raso.
Clonagem profunda em Javascript de baunilha
Ufa ... isso foi muitas coisas apenas para explicar um conceito de clones rasos Mas, novamente, esses são conceitos de nível avançado. Para fazer clones profundos usando vários métodos JavaScript estão disponíveis, mas a maioria deles exige nodejs. Para fazer clones profundos no JavaScript de baunilha, você precisa usar uma combinação da função JSON Parse () e da função json stringify (). Crie uma matriz com uma matriz aninhada dentro dela com a seguinte linha de código:
var originalArray = [["google"]];
Use uma combinação de JSON Parse e JSON stringify () com a seguinte linha:
var DeepClone = JSON.Parse (JSON.stringify (originalArray));
Agora, que fizemos nosso clone, precisamos verificar -o imprimindo -o no console usando a função de log do console:
console.log (clone [0]);
Você receberá o seguinte resultado no console:
Agora, vamos tentar alterar os elementos da matriz clonada usando a seguinte linha:
DeepClone [0].push ("mapas");
A última coisa que resta é observar as duas matrizes no console para determinar se a alteração da matriz clonada mudou a matriz original ou não:
console.log (originalArray [0]);
console.log (DeepClone [0]);
Você receberá o seguinte resultado em seu console:
Na imagem acima, você pode observar que as mudanças no clonado Array não causou nenhuma mudança na matriz original. Isso significa que as matrizes aninhadas \ objetos também foram copiadas, em vez de sua referência passada para a nova variável, e é por isso que esses clones são chamados de clones profundos.
Conclusão
Clones profundos em Javascript de baunilha são feitos usando uma combinação de função JSON Parse () e JSON stringify () ao analisar um objeto \ Array em uma nova variável. Tudo no JavaScript é um objeto e, quando estamos tentando copiar objetos aninhados, sua referência ao ponteiro é copiada para a nova variável, em vez de copiar os elementos das matrizes aninhadas \ Objetos. Quando a referência de um objeto é passada para uma nova mudança de objeto no novo objeto, causa mudanças no objeto antigo, que não é muito eficiente. Esta é a razão pela qual o JavaScript adicionou uma maneira de criar clones profundos.