Explication détaillée et exemples d'objets de clonage profond en JavaScript

Objets de clone profond JavaScript

Je travaillais sur un projet aujourd'hui et il y avait une obligation d'utiliser des objets de clone profond et de programmer sur la chaîne de prototypes. J'ai donc décidé de revoir ce point de connaissances sur un coup de tête et. trouvé l'information correspondante sur Internet. Connaissance,

Cloner un objet, ce terme peut paraître fantaisiste, mais ce n'est en réalité rien. Il s'agit simplement de copier un objet qui a exactement la même apparence
Peut-être que certains débutants réfléchissent. , n'est-ce pas simple ?

var obj1 = {name: 'payen'};

var obj2 = obj1;

Ceci n'est pas un objet cloné, obj1 et obj2 sont fondamentalement le même objet,

Ils ont tous deux pointé vers le même espace d'adressage mémoire et ont obtenu la même petite maison

C'est parce que l'objet est une valeur de référence

En parlant de valeurs de référence

Les seules valeurs de référence en JavaScript sont des objets

Notez ici que les tableaux sont des objets spéciaux et les fonctions sont également des objets exécutables spéciaux, c'est-à-dire qu'ils sont également des objets. Ce qu'on appelle l'objet de clone profond signifie qu'il ne veut pas la même maison. Je ne veux pas faire une copie exacte de la maison. sachez si vous pouvez comprendre ce que je dis=￣ω￣=, qui est également un objet de clone profond. La valeur de référence doit être copiée et l'objet de clone superficiel correspondant n'a besoin que de prendre la valeur de référence. vous ne le comprenez pas. Vous le comprendrez après avoir lu le code

Tout d'abord, jetons un coup d'œil à l'objet clone superficiel

var house = {
  name: 'payen',
  people: {
    father: true,
    mother: true
  }
}
function easyClone(obj){
  var newObj = {};
  for(var prop in obj){
    if(obj.hasOwnProperty(prop)){
      newObj[prop] = obj[prop];
    }
  }
  return newObj;
}
var newHouse = easyClone(house);

Ne vous plaignez pas que j'utilise facile. Je ne me souviens pas comment parler « facile » en anglais (je ne sais vraiment pas comment j'ai réussi le CET-6). Il y a un petit problème de performances concernant le for-in. Les enfants intéressés peuvent lire mon autre article

Ce code est très simple et je ne l'expliquerai pas plus

Jetons un coup d'œil à la console Chrome

Elle a l'air géniale

Alors laissez-moi faire une chose maintenant

Ajouter une personne à la nouvelle maison

Il semble que cette "nouvelle maison" ne soit pas nouvelle, ne vous laissez pas confondre par le nom de la variable, il y a donc des valeurs de référence . , le clonage superficiel n'est pas facile à utiliser

Dans ce cas, que devons-nous faire

Puisque nous voulons obtenir un nouvel objet, nous créons un nouvel objet et copions le contenu. de l'ancien objet, puis copiez-le dans un nouvel objet

Il y a une autre question Et s'il y a encore des objets dans l'objet

Ensuite, continuez. répéter le processus de création et d'ajout, évidemment Un processus de boucle

Mais il existe deux types de boucles

Itération

Récursion

Il y a il ne fait aucun doute que la récursion est meilleure

Dans une boucle récursive, lorsqu'une condition qui satisfait à la condition de terminaison est rencontrée, elle revient couche par couche jusqu'à la fin. Nous pouvons ensuite trouver la valeur de référence couche par couche. récursivité jusqu'à ce qu'il n'y ait plus de valeur de référence.
Regardons le code

var house = {
  name: 'payen',
  people: {
    father: true,
    mother: true,
    child: {
      age: 1
    }
  },
  money: [1000,2000,3000]
}
function deepClone(original, target){
  var target = target || {};// 如果target为undefined或没传参，设置空对象
  for(var prop in original){// 遍历原对象
    if(original.hasOwnProperty(prop)){// 只拷贝对象内部，不考虑原型链
      if(typeof original[prop] === 'object'){// 引用值
        if(Object.prototype.toString.call(original[prop]) === '[object Array]'){
          target[prop] = [];// 处理数组引用值
        }else{
          target[prop] = {};// 处理对象引用值
        }// 可以用三目运算符
        deepClone(original[prop],target[prop]);// 递归克隆
      }else{// 基本值
        target[prop] = original[prop];
      }  
    }
  }
  return target;
}
var newHouse = deepClone(house);

Le if-else mentionné ci-dessus est tout à fait approprié pour utiliser l'opérateur ternaire, mais je pense qu'il est trop long, et mon Le trouble obsessionnel-compulsif a dit que c'était très inconfortable à lire. Afin de prouver qu'il s'agit bien d'un clone profond, j'ai spécialement ajouté La maison d'origine est devenue plus compliquée (on ne considère pas le clonage profond des fonctions, ce qui est gênant et peu important). signification). Cette fois, c'est vraiment une maison neuve

Je ne m'étendrai pas dessus

On voit que la référence. la valeur du nouvel objet a changé, mais l'ancien objet n'a pas changé

Il en va de même pour la programmation sur la chaîne de prototypes

var house = {
  name: 'payen',
  people: {
    father: true,
    mother: true,
    child: {
      age: 1
    }
  },
  money: [1000,2000,3000]
}
Object.prototype.cloneTo = function(obj){
  var obj = obj || {};
  for(var prop in this){
    if(this.hasOwnProperty(prop)){
      if(typeof this[prop] === 'object'){
        if(Object.prototype.toString.call(this[prop]) === '[object Array]'){
          obj[prop] = [];
        }else{
          obj[prop] = {};
        }
        this[prop].cloneTo(obj[prop]);
      }else{
        obj[prop] = this[prop];
      }
    }
  }
  return obj;
}
var newHouse = {};
house.cloneTo(newHouse);

Merci d'avoir lu, j'espère cela peut vous aider, merci pour votre soutien à ce site !

Pour des explications plus détaillées et des exemples d'objets de clonage profond JavaScript, veuillez faire attention au site Web PHP chinois !