Hintergrund
Ich habe eine Funktion, die ein config
Objekt als Argument nimmt. Innerhalb der Funktion habe ich auch default
Objekt. Jedes dieser Objekte enthält Eigenschaften, die im Wesentlichen als Einstellungen für den Rest des Codes innerhalb der Funktion dienen. Um zu vermeiden, dass alle Einstellungen innerhalb des config
Objekts angegeben werden müssen, verwende ich die extend
Methode von jQuery , um ein neues Objekt settings
mit Standardwerten aus dem default
Objekt auszufüllen, wenn diese nicht im config
Objekt angegeben wurden:
var config = {key1: value1};
var default = {key1: default1, key2: default2, key 3: default 3};
var settings = $.extend(default, config);
//resulting properties of settings:
settings = {key1: value1, key2: default2, key 3: default 3};
Problem
Dies funktioniert hervorragend, aber ich möchte diese Funktionalität ohne die Notwendigkeit von jQuery reproduzieren. Gibt es ein ebenso elegantes (oder nahes) Mittel, um dies mit einfachem altem Javascript zu tun?
Bearbeiten: Nicht doppelte Begründung
Diese Frage ist kein Duplikat der Frage " Wie kann ich Eigenschaften von zwei JavaScript-Objekten dynamisch zusammenführen? ". Während diese Frage lediglich ein Objekt erstellen möchte, das alle Schlüssel und Werte aus zwei separaten Objekten enthält, möchte ich speziell darauf eingehen, wie dies zu tun ist, falls beide Objekte einige, aber nicht alle Schlüssel gemeinsam haben und welches Objekt Vorrang hat ( Standardeinstellung) für das resultierende Objekt für den Fall, dass doppelte Schlüssel vorhanden sind. Und noch genauer, ich wollte die Verwendung der jQuery-Methode ansprechen, um dies zu erreichen, und einen alternativen Weg finden, dies ohne jQuery zu tun. Während sich viele der Antworten auf beide Fragen überschneiden, bedeutet dies nicht, dass die Fragen selbst gleich sind.
quelle
jQuery.isPlainObject
undjQuery.isFunction
Antworten:
Um das Ergebnis in Ihrem Code zu erhalten, gehen Sie wie folgt vor:
Beachten Sie, dass die Art und Weise, wie Sie dort erweitern, das Standardobjekt ändert. Wenn Sie das nicht wollen, verwenden Sie
Eine robustere Lösung, die die Funktionalität von jQuery nachahmt, wäre folgende:
quelle
Sie können Object.assign verwenden.
Es kopiert die Werte aller aufzählbaren eigenen Eigenschaften von einem oder mehreren Quellobjekten in ein Zielobjekt und gibt das Zielobjekt zurück.
Es funktioniert in allen Desktop-Browsern außer IE (aber einschließlich Edge). Der mobile Support wurde gemindert.
Überzeugen Sie sich hier: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
Über tiefe Kopie
Object.assign verfügt jedoch nicht über die Deep-Option, die die Erweiterungsmethode von jQuery bietet.
Hinweis: Im Allgemeinen können Sie JSON jedoch für einen ähnlichen Effekt verwenden
quelle
Sie können den Spread-Operator ECMA 2018 in Objektliteralen verwenden ...
BabelJS-Unterstützung für ältere Browser
quelle
Dies ist mein etwas anderer Ansatz mit Deep Copy, den ich mir ausgedacht habe, als ich versucht habe, eine jQuery-Abhängigkeit zu beseitigen. Es ist hauptsächlich für kleine Geräte konzipiert, sodass möglicherweise nicht alle Funktionen vorhanden sind, die man erwartet. Sollte vollständig ES5-kompatibel sein (ab IE9 aufgrund der Verwendung von Object.keys ):
Sie fragen sich vielleicht, was die fünfte Zeile genau bewirkt ... Wenn obj2.key ein Objektliteral ist (dh wenn es kein gewöhnlicher Typ ist), rufen wir rekursiv darauf auf. Wenn eine Eigenschaft mit diesem Namen in obj1 noch nicht vorhanden ist, initialisieren wir sie zuerst mit einem leeren Objekt. Ansonsten setzen wir einfach obj1.key auf obj2.key.
Hier sind einige meiner Mokka / Chai-Tests, die beweisen sollten, dass die häufigsten Fälle hier funktionieren:
Ich würde mich über Feedback oder Kommentare zu dieser Implementierung freuen. Danke im Voraus!
quelle
Sie können die Eigenschaften von Object mithilfe der
for
Anweisung durchlaufen .quelle
a
. Obwohl dies nicht im Beispiel enthalten ist,$.extend
funktioniert es tatsächlich so, dass alle Eigenschaften aller Objekte zusammengeführt werden.Ich bevorzuge diesen Code, der mein generisches forEachIn verwendet und das erste Objekt nicht entstellt:
Wenn Sie wirklich Dinge in das erste Objekt einbinden möchten, können Sie Folgendes tun:
quelle
Es hilft mir sehr, wenn ich mich mit reinem Javascript entwickle.
quelle
Der Ansatz von Ivan Kuckir kann auch angepasst werden, um einen neuen Objektprototyp zu erstellen:
quelle