Explication détaillée sur la mise en œuvre de la fonction de fusion d'objets

Cet article vous apporte principalement un exemple d'implémentation basé sur la fonction de fusion d'objets. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Préface

$.extend() dans jQuery est une fonction outil souvent utilisée, principalement utilisée pour fusionner des paramètres (objets). L'utilisation spécifique ne sera pas décrite ici. Vous pouvez transmettre Le paramètre contrôle si une copie complète est utilisée pendant le processus de fusion ; la nouvelle méthode Object.assign() dans ES2015 peut également réaliser la fusion d'objets, mais une copie superficielle est utilisée pendant le processus de fusion ; le code source de la méthode extend de jQuery. Fusionnez vos propres objets, c'est-à-dire copiez les propriétés de plusieurs objets dans l'objet cible. S'il existe les mêmes propriétés, les objets ultérieurs écraseront les précédents.

Une méthode de copie superficielle pour réaliser la fusion d'objets

Un article de blog précédent a spécifiquement présenté les copies profondes et superficielles d'objets et de tableaux. Si vous ne comprenez pas, veuillez lire ici. Regardons d'abord l'implémentation puis expliquons

function extend() { //extend 浅拷贝实现
  var name,options,copy,
   length = arguments.length,
   i = 1,
   target = arguments[0] || {}; //取目标对象
  
 if(['object','function'].indexOf(typeof target) < 0){
  target = {};
  }
 

  for(;i<length;i++){

  options = arguments[i]

  if(options != null){ //排除空参数的情况 extend({},,)

   for(name in options){ //遍历对象 赋值

   copy = options[name];

   if (copy !== undefined) {
    target[name] = copy;
   }
   }
  }
  }

  return target 
 }

 //测试数据 
 var test1 = {
  a : 1,
  b : {
  c : 2,
  d : 3
  },
  e : [1,'a']
 },
 test2 = {
  b : {
  c : 4,
  d : 5,
  f : 6
  },
  e : [1,'a'],
  g : 7
 }

 var test = extend({},test1,test2);
 console.log(test.b.d); //5

 test2.b.d = 'x'; //修改test2
 console.log(test.b.d); // 'x' test随之修改

L'idée est la suivante :

1 Par défaut, le premier paramètre est pris comme objet cible. Le premier paramètre n'est pas un type de données d'objet, attribuez une valeur. Est un objet vide

2. Parcourez les paramètres restants (objet source) et copiez les propriétés de l'objet source dans l'objet cible.

3. Renvoyez l'objet cible comme résultat fusionné

Dans la deuxième étape, les valeurs d'attribut de l'objet source ne sont pas jugées. Toutes sont attribuées à l'aide de '=', donc quand. de l'objet source Lorsque la valeur d'attribut est un attribut d'objet, seule la valeur de référence est copiée, qui est une copie superficielle. D'après les résultats du test, on peut voir que les valeurs d'attribut de l'attribut b de test et test2 utilisent le. même objet et s’influenceront mutuellement. Après avoir su cela, vous devriez avoir une idée sur la façon de mettre en œuvre la copie approfondie lors de la fusion.

Pour implémenter la fusion d'objets via la copie profonde

Il est nécessaire de déterminer le type de valeur lors de la copie de la valeur de l'attribut de l'objet source. S'il s'agit d'un type de données d'objet, la fonction d'extension est appelée. récursivement. Ensuite, vous pouvez pratiquer la méthode de copie profonde de fusion d'objets, et la mise en œuvre est la suivante :

function extend() { //extend 深拷贝实现
  var name,options,src,copy,
   deep = false, //是否深拷贝 默认为false
   length = arguments.length,
   i = 1,
   target = arguments[0] || {};

  //如果第一个参数为boolean类型,赋值给deep
  if(typeof target == 'boolean'){
  deep = arguments[0];
  target = arguments[i] || {}; //目标对象顺延
  i++;
  }

  //如果target不是对象数据类型的话 target赋值为 {}
  if(['object','function'].indexOf(typeof target) < 0){
  target = {};
  }

  for(;i<length;i++){

  options = arguments[i];

  if(options != null){

   for(name in options){

   copy = options[name];
   src = target[name];

   if(target === copy){ //避免重复循环
    continue;
   }

   if(deep && copy && (typeof copy == 'object')){ // 类型判断

    src = Object.prototype.toString.call(copy) == '[object Array]' ? [] : {}; //区分数组和‘对象'
    target[name] = extend(deep,src,copy);
   }else {

    if (copy !== undefined) {

    target[name] = copy;
    }
   }
   }
  }
  }

  return target
 }

1. Jugement des paramètres, si le premier paramètre est de type booléen, il est pris comme paramètre profond. contrôle s'il faut copier en profondeur, la valeur par défaut de deep est false en même temps, l'élément cible sera le deuxième paramètre

2. Lors de la copie de la valeur de l'attribut, il est nécessaire de déterminer le type du paramètre profond et valeur d'attribut ; si deep est vrai et que la valeur d'attribut est un type d'objet, la fonction d'extension est appelée de manière récursive, sinon, attribuez directement

3. Il est nécessaire de faire la distinction entre les tableaux et les « objets » pour attribuer différentes valeurs initiales. valeurs aux propriétés de l'objet cible. S'ils sont tous {}, la valeur d'attribut du type tableau copiée dans l'élément cible deviendra {'0':xx, '1': xx...}

Conclusion

Toujours Ils utilisent tous directement $.extend(). C'est facile à utiliser mais je ne suis pas très clair sur l'implémentation. Je* ne suis peut-être pas rigoureux dans l'implémentation, mais je pense que la récolte est bonne.

Recommandations associées :

Méthodes pour implémenter la fonction de fusion d'objets

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!