Ich suche nach dem besten Weg, um mehrere JavaScript-Objekte (assoziative Arrays) "hinzuzufügen".
Zum Beispiel gegeben:
a = { "one" : 1, "two" : 2 };
b = { "three" : 3 };
c = { "four" : 4, "five" : 5 };
Was ist der beste Weg, um zu berechnen:
{ "one" : 1, "two" : 2, "three" : 3, "four" : 4, "five" : 5 }
Antworten:
ECMAscript 6 wurde eingeführt
Object.assign()
, um dies nativ in Javascript zu erreichen.MDN-Dokumentation zu Object.assign ()
Object.assign
wird in vielen modernen Browsern unterstützt, aber noch nicht in allen. Verwenden Sie einen Transpiler wie Babel und Traceur , um abwärtskompatibles ES5-JavaScript zu generieren.quelle
Object.assign.apply({}, [{a: 1}, {b: 2}, ....])
Object.assign.apply
Zusammenführen eines Arrays von Objekten besteht darin, stattdessen den Spread-Operator zu verwenden:Object.assign( ...objects )
Sie könnten jquery's
$.extend
wie folgt verwenden :quelle
d = $.extend({},a,b,c);
Dies sollte es tun:
Ausgabe:
quelle
length
Nachschlag die Größe des Arrays bei jedem Aufruf? Ich bin es so gewohnt zu schreiben,for (var i = 0, len = array.length; i < len; ++i)
dass ich mich nicht mehr daran erinnern kann, warum ich damit angefangen habe.ECMAScript 6 hat eine verbreitete Syntax . Und jetzt können Sie dies tun:
quelle
Unterstreichen hat nur wenige Methoden, um dies zu tun;
1. _.extend (Ziel, * Quellen)
Kopieren Sie alle Eigenschaften in der Quelle über zu den Objekten Zielobjekt, und senden Sie das Zielobjekt.
Oder
2. _.defaults (Objekt, * Standard)
Füllen Sie undefinierte Eigenschaften im Objekt mit Werten aus den Standardobjekten aus und geben Sie das Objekt zurück .
Oder
quelle
Warum sollte die Funktion auf 3 Argumente beschränkt sein? Überprüfen Sie auch für
hasOwnProperty
.quelle
Flaches Klonen (ohne Prototyp) oder Zusammenführen von Objekten ist jetzt mit einer kürzeren Syntax als Object.assign () möglich .
Die Spread-Syntax für Objektliterale wurde in ECMAScript 2018 eingeführt :
Der Spread (...) -Operator wird in vielen modernen Browsern unterstützt, jedoch nicht in allen.
Es wird daher empfohlen, einen Transpiler wie Babel zu verwenden zu verwenden, um ECMAScript 2015+ Code in aktuellen und älteren Browsern oder Umgebungen in eine abwärtskompatible Version von JavaScript zu konvertieren.
Dies ist der entsprechende Code, den Babel für Sie generiert :
quelle
Hinweis: Vorhandene Eigenschaften in vorherigen Objekten werden überschrieben.
quelle
a === d
am Ende. Das könnte in Ordnung sein und es könnte nicht.Es ist einfach, den ES7-Spread-Operator für ein Objekt in Ihrer Browserkonsole zu verwenden
quelle
Der schnellste, effizienteste und allgemeinere Weg ist wahrscheinlich dieser (Sie können eine beliebige Anzahl von Objekten zusammenführen und sogar auf den ersten kopieren -> zuweisen):
Außerdem können Sie das erste Objekt so ändern, wie es als Referenz übergeben wurde. Wenn Sie dies nicht möchten, aber ein völlig neues Objekt mit allen Eigenschaften haben möchten, können Sie {} als erstes Argument übergeben.
Das kombinierte Objekt und das Objekt1 enthalten beide die Eigenschaften von Objekt1, Objekt2, Objekt3.
In diesem Fall enthält das kombinierte Objekt die Eigenschaften von Objekt1, Objekt2, Objekt3, aber Objekt1 wird nicht geändert.
Überprüfen Sie hier: https://jsfiddle.net/ppwovxey/1/
Hinweis: JavaScript-Objekte werden als Referenz übergeben.
quelle
ES6 ++
Die Frage ist das Hinzufügen von verschiedenen unterschiedlichen Objekten in einem.
Angenommen, Sie haben ein Objekt mit mehreren Schlüsseln, die Objekte sind:
Dies war die Lösung, die ich gefunden habe (muss noch vorgehen: /)
Auf diese Weise können wir ALLE Objektschlüssel dynamisch zu einem hinzufügen.
quelle
Um eine dynamische Anzahl von Objekten zusammenführen, können wir verwenden ,
Object.assign
mit Spread - Syntax .Die obige Funktion akzeptiert eine beliebige Anzahl von Objekten und führt alle ihre Eigenschaften zu einem neuen Objekt zusammen, wobei Eigenschaften von späteren Objekten diejenigen von vorherigen Objekten überschreiben.
Demo:
Code-Snippet anzeigen
Um ein Array von Objekten zusammenzuführen, kann eine ähnliche Methode angewendet werden.
Demo:
Code-Snippet anzeigen
quelle
Am einfachsten: Operatoren verbreiten
quelle
quelle