Que sont la copie profonde et la copie superficielle js et comment les implémenter

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

Utilisez JSON. stringify convertit l'objet en une

chaîne, puis utilise JSON.parse pour convertir la chaîne en un nouvel objet.

peut encapsuler les fonctions suivantes

var 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;};

4. Copie récursive

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);

5. Utilisez la méthode Object.create()

Utilisez var. directement newObj = Object.create(oldObj) peut obtenir l'effet de copie complète.

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;}

6. jquery

jquery fournit un $.extend qui peut être utilisé pour Deep Copy.

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

7. lodash

Une autre bibliothèque de fonctions très populaire, lodash, fournit également _.cloneDeep pour Deep Copy.

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

Ceci fonctionne bien et est très simple à utiliser.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

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!