Aujourd'hui, je vais vous parler de la copie profonde et de la copie superficielle de JS. Quelle est la différence entre elles et quelles sont leurs fonctions ? Laissez-moi vous donner un exemple ci-dessous.
var m = { a: 10, b: 20 }var n = m;n.a = 15;// Quelle est la valeur de m.a à ce moment
m.a will ? sortie 15, Parce qu'il s'agit d'une copie superficielle, n et m pointent vers le même tas, et la copie d'objet n'est qu'une référence de l'objet copié.
Copie profonde
La copie profonde est différente de la copie superficielle ci-dessus, qui consiste à copier complètement un objet au lieu de copier la référence de l'objet. Par exemple, dans l'exemple précédent, nous écrivons. :
var m = { a: 10, b: 20 }var n = {a:m.a,b:m.b};n.a = 15;
Cette fois, nous sortons m.a et constatez que m.a La valeur est toujours 10 et n'a pas changé. Bien que toutes les valeurs de l'objet m et de l'objet n soient les mêmes, elles ne sont pas les mêmes dans le tas. .
Copie profonde et copie superficielle
Le schéma de la copie profonde et de la copie superficielle est à peu près le suivant :
La copie superficielle copie uniquement le objet pointé vers le pointeur sans copier l'objet lui-même, les anciens et les nouveaux objets partagent toujours la même mémoire. Cependant, la copie complète créera un objet identique. Le nouvel objet ne partage pas la mémoire avec l'objet d'origine et les modifications apportées au nouvel objet ne modifieront pas l'objet d'origine.
Comment implémenter une copie superficielle
1. Elle peut être implémentée par une simple affectation
Semblable à l'exemple ci-dessus, bien sûr, nous pouvons également encapsuler une fonction simple, comme suit :
function simpleClone(initalObj) { var obj = {}; for ( var i in initalObj) { obj[i] = initalObj[i]; } return obj; } var obj = { a: "hello", b:{ a: "world", b: 21 }, c:["Bob", "Tom", "Jenny"], d:function() { alert("hello world"); } } var cloneObj = simpleClone(obj); console.log(cloneObj.b); console.log(cloneObj.c); console.log(cloneObj.d); cloneObj.b.a = "changed"; cloneObj.c = [1, 2, 3]; cloneObj.d = function() { alert("changed"); }; console.log(obj.b); console.log(obj.c); console.log(obj.d);
2. Object.assign() implémente la méthode
Object.assign() pour copier les propriétés énumérables d'un nombre quelconque d'objets source eux-mêmes. à l'objet cible, puis renvoie l'objet cible. Cependant, Object.assign() effectue une copie superficielle, en copiant les références aux propriétés de l'objet, et non à l'objet lui-même.
var obj = { a: {a: "bonjour", b: 21} };var initalObj = Object.assign({}, initalObj.a.a = "changed";console.log( obj.a.a); // "changé"
Remarque : Lorsque l'objet n'a qu'un seul calque, il s'agit d'une copie complète, par exemple comme suit :
var obj1 = { a: 10, b: 20, c: 30 };var obj2 = Object.assign({}, obj1);obj2.b = 100;console.log(obj1);// { a: 10, b: 20, c: 30 } <-- 沒被改到console.log(obj2);// { a: 10, b: 100, c: 30 }
Comment mettre en œuvre la copie approfondie
1. La méthode 1 est la copie manuelle
Comme dans l'exemple ci-dessus, la copie manuelle peut obtenir une copie approfondie.
2. Si l'objet n'a qu'un seul calque, vous pouvez utiliser la fonction ci-dessus : Object.assign()
3. Convertir en JSON et inversement
var obj1 = { body: { a: 10 } };var obj2 = JSON.parse(JSON.stringify(obj1));obj2.body.a = 20;console.log(obj1);// { body: { a: 10 } } <-- 沒被改到console.log(obj2);// { body: { a: 20 } }console.log(obj1 === obj2);// falseconsole.log(obj1.body === obj2.body);// false
chaîne, puis utilise JSON.parse pour convertir la chaîne en un nouvel objet.
peut encapsuler les fonctions suivantesvar cloneObj = function(obj){ var str, newobj = obj.constructor === Array ? [] : {}; if(typeof obj !== 'object'){ return; } else if(window.JSON){ str = JSON.stringify(obj), //系列化对象 newobj = JSON.parse(str); //还原 } else { for(var i in obj){ newobj[i] = typeof obj[i] === 'object' ? cloneObj(obj[i]) : obj[i]; } } return newobj;};
function deepClone(initalObj, finalObj) { var obj = finalObj || {}; for (var i in initalObj) { var prop = initalObj[i]; // 避免相互引用对象导致死循环,如initalObj.a = initalObj的情况 if(prop === obj) { continue; } if (typeof prop === 'object') { obj[i] = (prop.constructor === Array) ? [] : {}; arguments.callee(prop, obj[i]); } else { obj[i] = prop; } } return obj;}var str = {};var obj = { a: {a: "hello", b: 21} };deepClone(obj, str);console.log(str.a);
function deepClone(initalObj, finalObj) { var obj = finalObj || {}; for (var i in initalObj) { var prop = initalObj[i]; // 避免相互引用对象导致死循环,如initalObj.a = initalObj的情况 if(prop === obj) { continue; } if (typeof prop === 'object') { obj[i] = (prop.constructor === Array) ? [] : Object.create(prop); } else { obj[i] = prop; } } return obj;}
var $ = require('jquery');var obj1 = { a: 1, b: { f: { g: 1 } }, c: [1, 2, 3]};var obj2 = $.extend(true, {}, obj1);console.log(obj1.b.f === obj2.b.f);// false
var _ = require('lodash');var obj1 = { a: 1, b: { f: { g: 1 } }, c: [1, 2, 3]};var obj2 = _.cloneDeep(obj1);console.log(obj1.b.f === obj2.b.f);// false
Comment gérer l'affichage incomplet de la dernière ligne de texte en HTML
Comment utiliser CSS3 pour créer des effets d'icônes
Comment convertir l'encodage CSS
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!