Detaillierte Erläuterung der Implementierung der Objektzusammenführungsfunktion

Dieser Artikel enthält hauptsächlich ein Implementierungsbeispiel basierend auf der Funktion zum Zusammenführen von Objekten. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Vorwort

$.extend() in jQuery ist eine häufig verwendete Toolfunktion, die hauptsächlich zum Zusammenführen von Parametern (Objekten) verwendet wird. Die spezifische Verwendung wird hier nicht beschrieben. Sie können übergeben Der Parameter steuert, ob während des Zusammenführungsprozesses eine tiefe Kopie verwendet wird. Die neue Object.assign()-Methode in ES2015 kann auch die Zusammenführung von Objekten realisieren, aber während des Zusammenführungsprozesses wird eine flache Kopie verwendet Der Quellcode der Extend-Methode von jQuery. Führen Sie Ihre eigenen Objekte zusammen, dh kopieren Sie die Eigenschaften mehrerer Objekte in das Zielobjekt. Wenn dieselben Eigenschaften vorhanden sind, überschreiben die späteren Objekte die vorherigen.

Eine Methode zum flachen Kopieren, um das Zusammenführen von Objekten zu erreichen

In einem früheren Blog-Beitrag wurden speziell die tiefen und flachen Kopien von Objekten und Arrays vorgestellt. Wenn Sie das nicht verstehen, lesen Sie bitte hier. Schauen wir uns zunächst die Implementierung an und erklären dann

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随之修改

Die Idee ist wie folgt:

1 Standardmäßig wird der erste Parameter als Zielobjekt verwendet Der erste Parameter ist kein Objektdatentyp. Weisen Sie einen Wert zu. Ist ein leeres Objekt

2. Durchlaufen Sie die verbleibenden Parameter (Quellobjekt) und kopieren Sie die Eigenschaften des Quellobjekts in das Zielobjekt.

3. Geben Sie das Zielobjekt als zusammengeführtes Ergebnis zurück

Im zweiten Schritt werden die Attributwerte des Quellobjekts nicht alle mit „=“ zugewiesen Wenn der Attributwert ein Objektattribut ist, wird nur der Referenzwert kopiert, bei dem es sich um eine flache Kopie handelt. Aus den Testergebnissen ist ersichtlich, dass die Attributwerte des b-Attributs von test und test2 verwendet werden dasselbe Objekt und beeinflussen sich gegenseitig. Nachdem Sie dies wissen, sollten Sie auch Ideen haben, wie Sie Deep Copy während der Zusammenführung implementieren können.

Um das Zusammenführen von Objekten durch tiefes Kopieren zu implementieren

Beim Kopieren des Quellobjektattributwerts muss der Typ des Werts bestimmt werden. Wenn es sich um einen Objektdatentyp handelt, wird die Erweiterungsfunktion aufgerufen rekursiv. Dann können Sie die Deep-Copy-Methode zum Zusammenführen von Objekten üben. Die Implementierung ist wie folgt:

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 Parameterbeurteilung: Wenn der erste Parameter ein boolescher Typ ist, wird er als tiefer Parameter verwendet Steuert, ob tief kopiert werden soll. Der Standardwert für tief ist falsch. Gleichzeitig ist das Zielelement der zweite Parameter

2. Beim Kopieren des Attributwerts muss der Typ des tiefen Parameters bestimmt werden Attributwert; wenn deep wahr ist und der Attributwert ein Objekttyp ist, wird die Erweiterungsfunktion rekursiv aufgerufen, andernfalls direkt zuweisen

3. Es ist notwendig, zwischen Arrays und „Objekten“ zu unterscheiden, um unterschiedliche Initialen zuzuweisen Werte zu den Eigenschaften des Zielobjekts. Wenn sie alle {} sind, wird der Attributwert des in das Zielelement kopierten Array-Typs zu {'0':xx, '1': xx...}

Schlussfolgerung

Immer verwenden sie alle $.extend(). Es ist einfach zu verwenden, aber ich bin mir über die Implementierung nicht ganz im Klaren. Ich* bin vielleicht nicht streng bei der Implementierung, aber ich denke, dass die Ernte gut ist.

Verwandte Empfehlungen:

Methoden zur Implementierung der Objektzusammenführungsfunktion

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Implementierung der Objektzusammenführungsfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!