O JavaScript Deep Coup é desenvolvido por iniciantes e até experimentado, e eles geralmente encontram problemas e não conseguem entender muito bem o JavaScript cópia.
DeepClone?
O oposto da cópia profunda é uma cópia superficial. Muitos iniciantes ficam confusos quando entram em contato com esse sentimento.
Por que usar cópia profunda?
Em muitos casos, precisamos atribuir valores a variáveis e atribuir um valor ao endereço de memória. No entanto, ao atribuir um tipo de valor de referência, compartilhamos apenas uma área de memória, o que resulta em manter a consistência com o valor anterior ao atribuir.
Veja um exemplo específico
// atribui um objeto para testar var test = {a: 'a', b: 'b'}; // atribuir teste ao teste2 // neste momento, o teste e o teste2 compartilham o mesmo objeto de memória, que é a cópia rasa de var test2 = test; test2.a = 'a2'; test.a == 'a2' // é verdadeiroIlustração:
É uma boa idéia entender por que os dados dos tipos de valor de referência se afetam.
concluir
Para implementar uma função de cópia profunda, precisamos falar sobre o tipo numérico de JavaScript.
Determine o tipo JavaScript
Existem os seguintes tipos básicos em javascript
Descrição do tipo
O tipo indefinido tem apenas um valor indefinido, que é o valor quando a variável não é atribuída.
O tipo NullNull também tem apenas um valor nulo, é uma referência de objeto vazia
BooleanBoolean tem dois valores: verdadeiro e falso
String, representa informações de texto
Número que representa informações digitais
Objeto É uma coleção não ordenada de uma série de propriedades, incluindo função de função e matriz de matriz
É impossível julgar a função e a matriz usando o tipoof. Aqui, usamos o método object.prototype.ToString.
[Por padrão, cada objeto herdará do objeto para o método ToString (). Se esse método não for substituído (bloqueado) pelo mesmo método de nome no próprio objeto ou em um protótipo superior mais próximo, o método tostring () do objeto será chamado e o tipo de sequência aqui representa um tipo de objeto] [1]
Tipo de função (obj) {var tostring = object.prototype.toString; var map = { '[object Boolean]' : 'boolean', '[object Number]' : 'number', '[object String]' : 'string', '[object Function]' : 'function', '[object Array]' : 'array', '[object Date]' : 'date', '[object RegExp]' : 'regExp', '[object Undefined]': 'undefined', '[object Null]' : 'null', '[objeto objeto]': 'objeto'}; mapa de retorno [tostring.call (obj)];}Implementar DeepClone
Para valores numéricos de tipos de valor não referenciados, o valor é atribuído diretamente e para os tipos de valor referenciados (objeto), você precisa atravessar novamente e atribuir recursivamente.
função deepClone (dados) {var t = type (dados), o, i, ni; if (t === 'Array') {o = []; } else if (t === 'objeto') {o = {}; } else {retorna dados; } if (t === 'Array') {for (i = 0, ni = data.length; i <ni; i ++) {o.push (DeepClone (dados [i])); } retornar o; } else if (t === 'object') {for (i em dados) {o [i] = DeepClone (dados [i]); } retornar o; }}Há um ponto aqui que todos devem prestar atenção. Para tipos de função, o blogueiro atribui diretamente valores ou compartilha um valor de memória. Isso ocorre porque as funções são mais sobre a conclusão de determinadas funções, com um valor de entrada e um valor de retorno e para serviços de nível superior, eles são mais sobre concluir as funções comerciais, e não há necessidade de copiar profundamente a função.
Mas como copiar o tipo de função?
De fato, o blogueiro pensou apenas em usar o novo para operá -lo, mas a função será executada uma vez e não ouso imaginar qual será o resultado da execução! o (□) o! Ainda não tenho boas idéias, por favor me dê orientação!
Nesse ponto, a cópia profunda foi quase concluída, mas algumas pessoas pensam que por que a cópia rasa não foi implementada?
Uma cópia rasa?
Para cópias rasas, pode ser entendido como operando apenas uma área de memória comum! Haverá perigo aqui! (..*)
Se você opera esses dados compartilhados diretamente sem controlá -los, as exceções de dados geralmente ocorrerão e serão alteradas por outras peças. Portanto, você não deve operar a fonte de dados diretamente, encapsular alguns métodos para executar operações de coalhada nos dados.
Provavelmente é quase o mesmo aqui, mas como front-end, não apenas considera o Javascript, mas também o DOM, o navegador, etc.
Tipo de elemento
Vejamos o código a seguir, o que será retornado no resultado?
Object.prototype.toString.call(document.getElementsByTagName('div')[0])
A resposta é [objeto htmlatorlement]
Às vezes, quando o elemento DOM é salvo e, se você copiar acidentalmente, a função de cópia profunda acima não tem julgamento no elemento elemento. Para julgar o elemento elemento, use a instância do julgamento para julgar. Porque para tags diferentes, o ToString retornará o construtor correspondente a tags diferentes.
Tipo de função (obj) {var tostring = object.prototype.toString; var map = { '[object Boolean]' : 'boolean', '[object Number]' : 'number', '[object String]' : 'string', '[object Function]' : 'function', '[object Array]' : 'array', '[object Date]' : 'date', '[object RegExp]' : 'regExp', '[object Undefined]': 'undefined', '[object Null]' : 'null', '[objeto objeto]': 'objeto'}; if (obj instanceof element) {return 'element'; } Retornar mapa [tostring.call (obj)];}Outras maneiras?
Implementação do jQuery
Para detalhes, consulte https: //github.com/jquery/jqu ...
Implementação sublinhada
Para detalhes, consulte https: //github.com/jashkenas/...
Implementação de Lodash
Para detalhes, consulte https: //github.com/lodash/lod ...
Implementação JSON
Você pode realizar uma cópia profunda pela primeira vez JSON.Stringify e depois JSON.PARSE. No entanto, o tipo de dados suporta apenas tipos numéricos básicos.
var obj = {a: 'a', b: function () {console.log ('b')}} // Quando json.stringify, a função será filtrada. Json.stringify (obj) // "{" a ":" a "}"resumo
Aqui resumimos aproximadamente a cópia profunda e como implementar uma cópia profunda. Em diferentes cenários, é necessário determinar se a cópia profunda é necessária com base no cenário de negócios.