So implementieren Sie die Funktion zum Zusammenführen von Objekten

Vorwort

Die $.extend() in jQuery ist eine häufig verwendete Tool-Funktion, die hauptsächlich zum Zusammenführen von Parametern (Objekten) verwendet wird. Die spezifische Verwendung wird hier nicht beschrieben Der Zusammenführungsprozess erfolgt durch Übergabe von Parametern. Die neue Object.assign()-Methode in ES2015 kann auch eine Objektzusammenführung erreichen, aber dieser Artikel bezieht sich auf den Quellcode der Extend-Methode von jQuery Um die Objektzusammenführung selbst zu implementieren, werden die Attribute mehrerer Objekte auf das Zielobjekt kopiert. Wenn dieselben Attribute vorhanden sind, überschreiben die späteren Objekte die vorherigen.

Objektzusammenführung durch flaches Kopieren erreichen

In einem früheren Blogbeitrag wurde speziell das tiefe und flache Kopieren von Objekten und Arrays vorgestellt. Wenn Sie es nicht verstehen, lesen Sie es bitte hier. Schauen wir uns zuerst die Implementierung an und erklären wir dann

    function extend() {  //extend 浅拷贝实现
      var name,options,copy,
          length = arguments.length,
          i = 1,
          target = arguments[0] || {};  //取目标对象
      
    if([&#39;object&#39;,&#39;function&#39;].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,&#39;a&#39;]
    },
    test2 = {
      b : {
        c : 4,
        d : 5,
        f : 6
      },
      e : [1,&#39;a&#39;],
      g : 7
    }    var test = extend({},test1,test2);
    console.log(test.b.d);   //5
    test2.b.d = &#39;x&#39;;  //修改test2
    console.log(test.b.d);  // &#39;x&#39;   test随之修改

Die Idee ist wie folgt:

1. Standardmäßig wird der erste Parameter als angenommen das Zielobjekt. Wenn der erste Parameter nicht vom Datentyp „Objekt“ ist, weisen Sie den Wert einem leeren Objekt zu

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 also das Quellobjekt 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 sind verwenden 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.

Deep-Copy-Methode zur Realisierung der Objektzusammenführung

Beim Kopieren des Quellobjektattributwerts müssen Sie den Typ des Werts bestimmen. Wenn es sich um einen Objektdatentyp handelt, rufen Sie die Erweiterungsfunktion rekursiv auf . Anschließend können Sie das Zusammenführen von Objekten im Deep-Copy-Modus üben. Die Implementierung lautet 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([&#39;object&#39;,&#39;function&#39;].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 == &#39;object&#39;)){ // 类型判断
              src = Object.prototype.toString.call(copy) == &#39;[object Array]&#39; ? [] : {};  //区分数组和‘对象’
              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, Es wird verwendet, um zu steuern, ob die Parameter der tiefen Kopie standardmäßig falsch sind. Gleichzeitig ist das Zielelement der zweite Parameter

　2. Beim Kopieren des Attributwerts müssen Sie bestimmen Typ des tiefen Parameters und Attributwerts; wenn tief wahr ist und der Attributwert ein Objekttyp ist, rufen Sie die Erweiterungsfunktion rekursiv auf, andernfalls weisen Sie den Wert direkt zu

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

Schlussfolgerung

Immer sie verwenden alle $.extend() direkt, aber ich bin mir über die Implementierung nicht ganz im Klaren. Ich* bin vielleicht nicht streng bei der Implementierung, aber ich habe das Gefühl, dass die Ernte gut ist.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Funktion zum Zusammenführen von Objekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!