Comment implémenter des copies profondes et superficielles de tableaux et d'objets

Prémisse : La différence entre les types de données primitifs et les types d'objets lors de l'attribution de valeurs

Les types de données de JavaScript sont divisés en types de données primitifs et types d'objets. Les deux sont stockés de différentes manières en mémoire, ce qui entraîne des différences dans leur affectation. Prenons respectivement une châtaigne

  var x = 1;  var y = x;  //y获得了和x同样的值
  y = 2;
  console.log(x);  // 1

  var m = [1,2]; //m存放的是指向[1,2]这个数组对象的引用地址
  var n = m; //n也获得 [1,2]数组对象的引用地址
  n[0] = 3;
  console.log(m);  //[3,2]

Cela peut être vu sur la châtaigne ci-dessus : Lorsqu'une valeur est attribuée au type de données d'origine, la valeur réelle des données est donnée. Après l'affectation, les deux valeurs. ​​sont identiques, pas Influence mutuelle ; Le type d'objet donne l'adresse de référence des données d'origine, donc les anciennes et les nouvelles données s'influenceront mutuellement, car il s'agit essentiellement du même objet de données , tel comme le tableau dans Shangli

Qu'est-ce qu'une copie superficielle ?

Comme son nom l'indique, la copie superficielle est une méthode de copie superficielle ; lorsque la valeur de l'attribut est un type d'objet, seule la référence aux données de l'objet est copiée, ce qui entraîne le les données anciennes et nouvelles qui ne sont pas complètement séparées s'influenceront également mutuellement. Prenons un autre exemple...

  //测试数据
  var array1 = ['a',1,true,{name:'lei',age:18}];

  //concat()  slice() 实现浅拷贝
  var array2 = array1.concat()

  //修改拷贝后的数据
  array2[0] = 'b';            //array1[0]是原始数据类型 所以是直接赋值的
  array2[3].name = 'zhang';   //array1[3]是对象数据类型 所以拷贝的是对象的引用，其实还是和原数组使用同一对象

  console.log(array1);   //  ['a',1,true,{name:'zhang',age:18}]

Dans le châtaignier, array2 est une copie superficielle de array1. Les éléments du tableau sont de types de données primitifs et n'affecteront pas chacun. other (array1[ 0]), mais array1[3] est un type d'objet et s'affectera toujours.

Comment implémenter une copie superficielle

1. Array.concat() ou array.slice() dans Shangli est une implémentation spéciale de copie superficielle de façon de tableau.

2. Comment le mettre en œuvre soi-même ? Ne suffirait-il pas de parcourir chaque attribut de l'objet/tableau puis de l'attribuer à un nouvel objet ? L'implémentation suivante

  //实现浅拷贝
  function shallowCopy( target ){
    if(typeof target !== 'object') return ;
    //判断目标类型，来创建返回值
    var newObj = target instanceof Array ? [] : {};

    for(var item in target){
      //只复制元素自身的属性，不复制原型链上的
      if(target.hasOwnProperty(item)){
        newObj[item] = target[item]
      }
    }

    return newObj
  }

  //测试

  var test = [1,'a',{name:'lei',age:18}];

  var copy = shallowCopy(test);
  console.log(copy[2].name);   //lei

  copy[2].name = 'zhang';
  console.log(test[2].name);   //zhang   原数据也被修改

copie approfondie et son implémentation

De Vous pouvez essentiellement comprendre l'explication de la copie superficielle. La copie profonde est une copie « complète » après la copie, les anciennes et les nouvelles données sont complètement séparées et ne partagent plus les valeurs d'attribut du type d'objet. s’influencent mutuellement.

Méthode d'implémentation :

1. Méthode délicate JSON.parse(JSON.stringify(Obj))
   

var test = [1,'a',{name:'lei',age:18}];

var copy1 = JSON.parse(JSON.stringify(test));  //特殊方式

console.log(copy1);

copy1[2].name = 'zhang'
console.log(test);   //[1,'a',{name:'lei',age:18}]  未受到影响

　Remarque : Cette méthode ne peut pas copier en profondeur les objets dont les valeurs d'attribut sont des fonctions. Vous pouvez l'essayer vous-même

　2. Implémenter la copie profonde

　La copie superficielle a été. implémenté, en y réfléchissant, il devrait être que lors de l'attribution de la valeur de l'attribut de type d'objet, le résultat n'est pas une séparation complète, nous devons donc modifier la façon de copier la valeur de l'attribut de type d'objet et appeler à nouveau une copie complète dessus, ainsi. réaliser la copie profonde, comme suit :

//实现深拷贝
function deepCopy( target ){
  if(typeof target !== 'object') return ;
  //判断目标类型，来创建返回值
  var newObj = target instanceof Array ? [] : {};

  for(var item in target){
    //只复制元素自身的属性，不复制原型链上的
    if(target.hasOwnProperty(item)){
      newObj[item] = typeof target[item] == 'object' ? deepCopy(target[item]) : target[item]  //判断属性值类型    }
  }

  return newObj
}

//测试
var test = [1,'a',{name:'lei',age:18}];

var copy2 = deepCopy(test);
copy2[2].name = 'zhang'

console.log(test);  ////[1,'a',{name:'lei',age:18}]  未受到影响

Résumé

Assurez-vous de comprendre les raisons de la copie superficielle : lors de la copie de données de type objet, l'adresse de référence est copiée, et les mêmes données L'objet est toujours utilisé ; donc la façon d'implémenter la copie profonde est de copier les valeurs des attributs de type d'objet de manière récursive pour éviter l'affectation directe.

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!