Quelles sont les méthodes d'implémentation de la copie superficielle et de la copie profonde en js ? (Résumer)

Ce que cet article vous apporte, c'est quelles sont les méthodes d'implémentation de la copie superficielle et de la copie profonde en js ? (Résumé), il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

JS a cinq types de données de base : chaîne, nombre, booléen, nul et indéfini. Ces cinq types de missions constituent un transfert de valeur. L'affectation d'un objet consiste à attribuer une référence à l'adresse de l'objet. À ce stade, la modification des propriétés ou des valeurs de l'objet entraînera une modification des valeurs de toutes les références à l'objet. Si vous souhaitez réellement copier un nouvel objet au lieu de copier une référence à l'objet, vous devez utiliser une copie complète de l'objet.

Méthode d'implémentation de copie superficielle

1 affectation '='.

Pas grand chose à dire, la méthode d'affectation la plus basique consiste simplement à attribuer une référence à un objet.

2.Object.assign()

Object.assign est une nouvelle fonction dans ES6. La méthode Object.assign() peut copier n'importe quel nombre de propriétés énumérables de l'objet source vers l'objet cible, puis renvoyer 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.

Object.assign(target, ...sources)

Paramètres :
target : objet cible.
sources : n'importe quel nombre d'objets sources.
Valeur de retour : L'objet cible sera renvoyé.

var obj = { a: {a: "hello", b: 21} };
var initalObj = Object.assign({}, obj);

initalObj.a.a = "changed";
console.log(obj.a.a); // "changed"

Il est à noter que :
Object.assign() peut gérer une copie complète d'un calque, 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 }

Copie profonde

1 .Copie manuelle

var obj1 = { a: 10, b: 20, c: 30 };
var obj2 = { a: obj1.a, b: obj1.b, c: obj1.c };
obj2.b = 100;
console.log(obj1);
// { a: 10, b: 20, c: 30 } <-- 沒被改到
console.log(obj2);
// { a: 10, b: 100, c: 30 }

2. Conversion de chaîne JSON

Utilisez JSON.stringify pour convertir l'objet en chaîne, puis utilisez JSON.parse pour convertir la chaîne en chaîne. nouvel objet.

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);
// false
console.log(obj1.body === obj2.body);
// false

C'est du vrai Deep Copy, cette méthode est simple et facile à utiliser.

Mais cette méthode présente également de nombreux inconvénients, par exemple, elle supprimera le constructeur de l'objet. C'est-à-dire qu'après une copie profonde, quel que soit le constructeur d'origine de l'objet, il deviendra Objet après une copie profonde.

Les seuls objets que cette méthode peut gérer correctement sont les objets Number, String, Boolean, Array et plats, c'est-à-dire les structures de données qui peuvent être directement représentées par json. Les objets RegExp ne peuvent pas être copiés en profondeur de cette manière.

En d'autres termes, seuls les objets pouvant être convertis au format JSON peuvent être utilisés de cette manière. Les fonctions ne peuvent pas être converties en JSON.

var obj1 = { fun: function(){ console.log(123) } };
var obj2 = JSON.parse(JSON.stringify(obj1));
console.log(typeof obj1.fun);
// 'function'
console.log(typeof obj2.fun);
// 'undefined' <-- 没复制

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

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

utilisez directement var newObj = Object.create(oldObj), vous pouvez 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;
}

5.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

6. Fonctions tierces

Il existe également d'autres bibliothèques de fonctions tierces avec des fonctions de copie approfondie, telles que lodash.

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!