jQuery extend() Methode

Im heutigen Beitrag lernen wir die Methode extend() in jQuery kennen, die die Eigenschaften von zwei oder mehr Objekten zusammenführt.

extend() in jQuery

jQuery stellt eine eingebaute Methode .extend() zur Verfügung, die den Inhalt von zwei oder mehr Objekten in das Zielobjekt zusammenführt. Die Eigenschaften aller Objekte werden dem Zielobjekt hinzugefügt, wenn zwei oder mehr Objekte als Argument an .extend() übergeben werden.

Null- oder undefinierte Argumente werden beim Zusammenführen der Objekte ignoriert.

Syntax:

jQuery.extend(deep, target, [object1])

1. deep ist ein boolescher Parameter. Der Merge wird rekursiv, wenn er als true angegeben wird.
2. Das Ziel ist ein Objekt, das die neuen Eigenschaften erhalten soll.
3. Das Objekt1 ist ein Objekt, das zusätzliche Eigenschaften zum Einfügen enthält.

Wenn nur ein Argument in $.extend() übergeben wird, zeigt dies an, dass das Argument Ziel weggelassen wird. In einem solchen Fall wird das jQuery-Objekt selbst zum Zielobjekt.

Mit dieser Funktionalität können Sie dem jQuery-namespace neue Fähigkeiten/Funktionalitäten hinzufügen. Dies kann Plug-in-Autoren zugute kommen, die jQuery neue Methoden hinzufügen müssen.

Standardmäßig führt $.extend() eine nicht-rekursive Zusammenführung durch. Angenommen, eine Eigenschaft des Zielobjekts ist selbst ein Objekt oder ein Array.

In diesem Fall wird es von einer Eigenschaft mit dem identischen Schlüssel im zweiten oder nachfolgenden Objekten vollständig überschrieben.

Durch Übergeben von true als 1. Argument an die Funktion $.extend() werden die Objekte rekursiv zusammengeführt. Vom Prototyp des Objekts geerbte Eigenschaften werden jedoch kopiert.

Eigenschaften, die ein Objekt sind, das über new MyCustomObject(args) oder integrierte JavaScript-Typen wie Date oder RegExp erstellt wurde, werden nicht neu erstellt und erscheinen als einfache Objekte im resultierenden Objekt oder Array.

Versuchen wir es mit dem folgenden einfachen Beispiel zu verstehen.

const firstObj = {
  name: 'John Doe',
  address: {city: 'Banglore', country: 'India'},
  age: 25
};
const secondObj = {
  address: {country: 'United Kingdom'},
  phone: '7878954123'
};
console.log($.extend(true, firstObj, secondObj));
console.log($.extend(false, firstObj, secondObj));

Im obigen Beispiel haben wir zwei Objekte mit unterschiedlichen Eigenschaften definiert. Wenn Sie die extend-Methode aufrufen, wobei der erste Parameter true ist, also ein deep-Parameter, werden die Eigenschaften des ersten Objekts rekursiv durch die Eigenschaften des zweiten Objekts aktualisiert.

In unserem Fall wird nur das Land durch das zweite Objekt aktualisiert und andere Eigenschaften werden angehängt.

Im zweiten Fall, wenn Sie die Methode extend mit dem zweiten Parameter false aufrufen, werden die Eigenschaften des ersten Objekts durch die Eigenschaften des zweiten Objekts ersetzt.

Wenn ähnliche Eigenschaften vorhanden sind, werden die Eigenschaften des ersten Objekts durch die Eigenschaften des zweiten Objekts ersetzt; Andernfalls werden neue Eigenschaften des zweiten Objekts erstellt.

Versuchen Sie, das obige Code-Snippet in einem beliebigen Browser auszuführen, der jQuery unterstützt, wodurch das Ergebnis unten angezeigt wird.

{
  address: {
    city: "Banglore",
    country: "United Kingdom"
  },
  age: 25,
  name: "John Doe",
  phone: "7878954123"
}
{
  address: {
    country: "United Kingdom"
  },
  age: 25,
  name: "John Doe",
  phone: "7878954123"
}

Demo