JavaScript Deep Copy es desarrollada por principiantes e incluso experimentados, y a menudo encuentran problemas y no pueden entender muy bien la copia profunda de JavaScript.
Deepclone?
Lo contrario de la copia profunda es la copia superficial. Muchos principiantes están confundidos cuando entran en contacto con este sentimiento.
¿Por qué usar una copia profunda?
En muchos casos, necesitamos asignar valores a variables y asignar un valor a la dirección de memoria. Sin embargo, al asignar un tipo de valor de referencia, solo compartimos un área de memoria, lo que resulta en mantener la coherencia con el valor anterior al asignar.
Ver un ejemplo específico
// Asignar un objeto a Test var test = {a: 'a', b: 'b'}; // asignar prueba a test2 // en este momento, prueba y test2 comparte el mismo objeto de memoria, que es la copia poco profunda de var test2 = test; test2.a = 'a2'; test.a === 'a2' // es verdadera es verdaderaIlustración:
Esta es una buena idea comprender por qué los tipos de valor de referencia se afectan entre sí.
lograr
Para implementar una función de copia profunda, tenemos que hablar sobre el tipo numérico de JavaScript.
Determinar el tipo de JavaScript
Hay los siguientes tipos básicos en JavaScript
Tipo de descripción
El tipo UndefinedUndefined tiene solo un valor indefinido, que es el valor cuando no se asigna la variable.
El tipo nullnull también tiene solo un valor nulo, es una referencia de objeto vacío
Booleanboolean tiene dos valores: verdadero y falso
Cadena representa información de texto
Número representa información digital
Objeto Es una colección desordenada de una serie de propiedades, incluida la función de la función y la matriz de matriz
Es imposible juzgar la función y la matriz usando typeof. Aquí usamos el método Object.Prototype.ToString.
[Por defecto, cada objeto heredará del objeto al método toString (). Si este método no se sobrescribe (bloqueado) por el mismo método de nombre en el objeto en sí o en un prototipo superior más cercano, se llamará al método toString () del objeto y el tipo de cadena aquí representa un tipo de objeto] [1]
tipo de función (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'}; return map [toString.call (obj)];}Implementar DeepClone
Para los valores numéricos de los tipos de valor no referenciados, el valor se asigna directamente, y para los tipos de valor referenciados (objeto) debe atravesar nuevamente y asignar recursivamente.
function DeepClone (datos) {var t = type (data), o, i, ni; if (t === 'Array') {o = []; } else if (t === 'objeto') {o = {}; } else {return data; } if (t === 'Array') {for (i = 0, ni = data.length; i <ni; i ++) {O.Push (DeepClone (data [i])); } return o; } else if (t === 'objeto') {para (i en datos) {o [i] = profundo (data [i]); } return o; }}Aquí hay un punto al que todos deberían prestar atención. Para los tipos de funciones, el blogger asigna directamente valores o comparte un valor de memoria. Esto se debe a que las funciones se trata más de completar ciertas funciones, con un valor de entrada y un valor de retorno, y para los servicios de nivel superior, se trata más de completar las funciones comerciales, y no es necesario copiar realmente la función profundamente.
¿Pero cómo copiar el tipo de función?
De hecho, el blogger solo pensó en usar nuevo para operarlo, pero la función se ejecutará una vez, ¡y no me atrevo a imaginar cuál será el resultado de la ejecución! O (□) O! Todavía no tengo buenas ideas, ¡por favor dame orientación!
En este punto, la copia profunda casi se ha completado, pero algunas personas piensan que ¿por qué no se implementó la copia superficial?
Una copia superficial?
¡Para copias superficiales, se puede entender como operando solo un área de memoria común! ¡Habrá peligro aquí! (..*)
Si opera estos datos compartidos directamente sin controlarlos, otras partes a menudo ocurrirán excepciones de datos. Por lo tanto, no debe operar la fuente de datos directamente, encapsular algunos métodos para realizar operaciones de cuajada en los datos.
Probablemente sea casi lo mismo aquí, sino como un front-end, no solo considera a JavaScript en sí, sino también el DOM, el navegador, etc.
Tipo de elemento
Veamos el siguiente código, ¿qué se devolverá en el resultado?
Object.prototype.toString.call(document.getElementsByTagName('div')[0])
La respuesta es [objeto htmldivelement]
A veces, cuando se guarda el elemento DOM y, si accidentalmente lo copia profundamente, la función de copia profunda anterior carece de juicio sobre el elemento del elemento. Para juzgar el elemento elemento, use instancia para juzgar. Porque para diferentes etiquetas, ToString devolverá el constructor correspondiente a diferentes etiquetas.
tipo de función (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 instanciaf elemento) {return 'elemento'; } return map [toString.call (obj)];}¿Otras formas?
Implementación de jQuery
Para más detalles, consulte https: //github.com/jquery/jqu ...
Implementación subrayada
Para más detalles, consulte https: //github.com/jashkenas/...
Implementación de Lodash
Para más detalles, consulte https: //github.com/lodash/lod ...
Implementación JSON
Puede realizar una copia profunda pasando por primera vez JSON.Stringify, y luego JSON.PARSE. Sin embargo, el tipo de datos solo admite tipos numéricos básicos.
var obj = {a: 'a', b: function () {console.log ('b')}} // Cuando json.stringify, la función se filtrará. Json.stringify (obj) // "{" A ":" A "}"resumen
Aquí resumimos aproximadamente la copia profunda y cómo implementar una copia profunda. En diferentes escenarios, es necesario determinar si se necesita una copia profunda en función del escenario comercial.