Ich habe zwei JavaScript-Arrays:
var array1 = ["Vijendra","Singh"];
var array2 = ["Singh", "Shakya"];
Ich möchte, dass die Ausgabe lautet:
var array3 = ["Vijendra","Singh","Shakya"];
Das Ausgabearray sollte wiederholte Wörter entfernt haben.
Wie füge ich zwei Arrays in JavaScript zusammen, sodass ich nur die eindeutigen Elemente von jedem Array in derselben Reihenfolge erhalte, in der sie in die ursprünglichen Arrays eingefügt wurden?
javascript
arrays
merge
Vijjendra
quelle
quelle
Antworten:
Einfach die Arrays zusammenführen (ohne Duplikate zu entfernen)
Verwendung der ES5-Version
Array.concat
:Die ES6-Version verwendet Destrukturierung
Da es keine "eingebaute" Möglichkeit gibt, Duplikate zu entfernen ( ECMA-262 hat tatsächlich eine
Array.forEach
Möglichkeit, dies zu tun), müssen wir dies manuell tun:Dann, um es zu benutzen:
Dadurch bleibt auch die Reihenfolge der Arrays erhalten (dh es ist keine Sortierung erforderlich).
Da sich viele Menschen über die Erweiterung
Array.prototype
undfor in
Schleifen von Prototypen ärgern , gibt es hier eine weniger invasive Möglichkeit, sie zu verwenden:Für diejenigen, die das Glück haben, mit Browsern zu arbeiten, in denen ES5 verfügbar ist, können Sie Folgendes verwenden
Object.defineProperty
:quelle
[a, b, c]
und[x, b, d]
seien Sie die Arrays (nehmen Sie Anführungszeichen an). concat gibt[a, b, c, x, b, d]
. Wäre nicht die einzige () 's ausgegeben werden[a, c, x, b, d]
. Das bewahrt nicht die Ordnung, die ich denke - ich glaube, OP will[a, b, c, x, d]
for ... in
mithasOwnProperty
in diesem Fall der Prototyp - Methode ist in OrdnungMit Underscore.js oder Lo-Dash können Sie Folgendes tun:
http://underscorejs.org/#union
http://lodash.com/docs#union
quelle
underscore.flatten()
, was besser als Union ist, da es ein Array von Arrays benötigt.Verketten Sie zuerst die beiden Arrays und filtern Sie anschließend nur die eindeutigen Elemente heraus:
Bearbeiten
Wie vorgeschlagen, besteht eine leistungsfähigere Lösung darin, die eindeutigen Elemente herauszufiltern,
b
bevor sie verkettet werden mita
:quelle
a
um hinzuzufügenb
, ist es dann besser, durchzugehen und Push zu verwenden?a.forEach(function(item){ if(a.indexOf(item)<0) a.push(item); });
var c = [...a, ...b.filter(o => !~a.indexOf(o))];
2.var c = [...new Set([...a, ...b])];
☺Dies ist eine ECMAScript 6-Lösung, die Spread-Operator- und Array-Generika verwendet.
Derzeit funktioniert es nur mit Firefox und möglicherweise mit der technischen Vorschau von Internet Explorer.
Aber wenn Sie Babel verwenden , können Sie es jetzt haben.
quelle
Array.from
kann anstelle des Spread-Operators verwendet werden:Array.from(new Set([].concat(...arr)))
ES6
ODER
ODER
quelle
union
+ 1. Beispiel sprengt den Stapel für großeArray
s + 3. Beispiel ist unglaublich langsam und verbraucht viel Speicher, da zwei Zwischen-Array
s erstellt werden müssen + 3. Beispiel kann nurunion
mit einem bekannten verwendet werden AnzahlArray
s zur Kompilierungszeit.Set
ist der Weg hierherMit einem Set (ECMAScript 2015) ist es so einfach:
quelle
const array3 = [...new Set(array1.concat(array2))]
Hier ist eine etwas andere Einstellung der Schleife. Mit einigen der Optimierungen in der neuesten Version von Chrome ist dies die schnellste Methode zum Auflösen der Vereinigung der beiden Arrays (Chrome 38.0.2111).
http://jsperf.com/merge-two-arrays-keeping-only-unique-values
while-Schleife: ~ 589k ops / s
Filter: ~ 445k ops / s
lodash: 308k ops / s
für Schleifen: 225k ops / s
In einem Kommentar wurde darauf hingewiesen, dass eine meiner Setup-Variablen dazu führte, dass meine Schleife den Rest überschritt, da kein leeres Array zum Schreiben initialisiert werden musste. Ich bin damit einverstanden, daher habe ich den Test auf das Spielfeld umgeschrieben und eine noch schnellere Option hinzugefügt.
http://jsperf.com/merge-two-arrays-keeping-only-unique-values/52
In dieser alternativen Lösung habe ich die assoziative Array-Lösung einer Antwort kombiniert, um den
.indexOf()
Aufruf in der Schleife zu eliminieren, der die Dinge mit einer zweiten Schleife erheblich verlangsamte, und einige der anderen Optimierungen, die andere Benutzer vorgeschlagen haben, ebenfalls in ihre Antworten aufgenommen .Die Top-Antwort hier mit der Doppelschleife für jeden Wert (i-1) ist immer noch deutlich langsamer. lodash ist immer noch stark und ich würde es jedem empfehlen, dem es nichts ausmacht, seinem Projekt eine Bibliothek hinzuzufügen. Für diejenigen, die nicht wollen, ist meine while-Schleife immer noch eine gute Antwort, und die Filterantwort zeigt hier eine sehr starke Leistung, die alle meine Tests mit dem neuesten Canary Chrome (44.0.2360) zum jetzigen Zeitpunkt übertrifft.
Schauen Sie sich Mikes Antwort und Dan Stockers Antwort an, wenn Sie die Geschwindigkeit steigern möchten. Dies sind bei weitem die schnellsten aller Ergebnisse, nachdem fast alle brauchbaren Antworten durchgegangen sind.
quelle
Sie können dies einfach mit ECMAScript 6 tun.
quelle
Array.from(new Set(array1.concat(array2)))
.tsconfig.json
, können Sie hinzufügen"downlevelIteration": true
zucompilerOptions
.Eine viel bessere Array-Merge-Funktion.
quelle
var test = ['a', 'b', 'c']; console.log(test);
wird drucken["a", "b", "c", merge: function]
Ich werfe nur meine zwei Cent hinein.
Dies ist eine Methode, die ich häufig verwende. Sie verwendet ein Objekt als Hash-Lookup-Tabelle, um die doppelte Überprüfung durchzuführen. Unter der Annahme, dass der Hash O (1) ist, läuft dies in O (n), wobei n a.length + b.length ist. Ich habe ehrlich gesagt keine Ahnung, wie der Browser den Hash ausführt, aber er funktioniert gut bei vielen tausend Datenpunkten.
quelle
String()
Funktion in Javascript. Dies funktioniert möglicherweise für primitive Werte (allerdings bei Kollisionen zwischen Typen), eignet sich jedoch nicht für Arrays von Objekten.Vermeiden Sie einfach verschachtelte Schleifen (O (n ^ 2)) und
.indexOf()
(+ O (n)).quelle
Vereinfachte das Beste aus dieser Antwort und verwandelte sie in eine nette Funktion:
quelle
Warum benutzt du kein Objekt? Es sieht so aus, als würden Sie versuchen, ein Set zu modellieren. Dadurch wird die Reihenfolge jedoch nicht beibehalten.
quelle
if (!set1.hasOwnProperty(key))
?Die beste Lösung...
Sie können direkt in der Browserkonsole einchecken, indem Sie auf ...
Ohne Duplikat
Mit Duplikat
Wenn Sie ohne Duplikat möchten, können Sie von hier aus eine bessere Lösung ausprobieren - Shouting Code .
Probieren Sie die Chrome-Browserkonsole aus
Ausgabe:
quelle
Mein anderthalb Cent:
quelle
Sie können dies einfach mit Underscore.js erreichen => uniq :
Es wird gedruckt ["Vijendra", "Singh", "Shakya"] .
quelle
Für ES6 nur eine Zeile:
quelle
Ich weiß, dass es bei dieser Frage nicht um eine Reihe von Objekten geht, aber Suchende landen hier.
Daher lohnt es sich, zukünftigen Lesern eine geeignete ES6-Methode zum Zusammenführen und anschließenden Entfernen von Duplikaten hinzuzufügen
Array von Objekten :
quelle
Die Implementierung der
indexOf
Methode für andere Browser erfolgt über MDCquelle
from
übrigens einen Parameter?indexOf
. Bereinigte den Code durch Entfernen des kommentierten Teils. @meder - nochmals vielen Dank.Neue Lösung (die verwendet
Array.prototype.indexOf
undArray.prototype.concat
):Verwendungszweck:
Array.prototype.indexOf (für Internet Explorer):
quelle
Dies kann mit Set erfolgen.
quelle
Es gibt so viele Lösungen zum Zusammenführen von zwei Arrays. Sie können in zwei Hauptkategorien unterteilt werden (mit Ausnahme der Verwendung von Bibliotheken von Drittanbietern wie lodash oder underscore.js).
a) Kombinieren Sie zwei Arrays und entfernen Sie doppelte Elemente.
b) Filtern Sie Elemente heraus, bevor Sie sie kombinieren.
Kombinieren Sie zwei Arrays und entfernen Sie doppelte Elemente
Kombinieren
Vereinigend
Es gibt viele Möglichkeiten, ein Array zu vereinheitlichen. Ich persönlich schlage unten zwei Methoden vor.
Filtern Sie Elemente heraus, bevor Sie sie kombinieren
Es gibt auch viele Möglichkeiten, aber ich persönlich schlage den folgenden Code aufgrund seiner Einfachheit vor.
quelle
quelle
Das Schöne an diesem ist die Leistung und dass Sie bei der Arbeit mit Arrays im Allgemeinen Verkettungsmethoden wie Filter, Map usw. verwenden, damit Sie diese Zeile hinzufügen können und Array2 mit Array1 verknüpft und dedupliziert wird, ohne dass ein Verweis auf das spätere erforderlich ist eine (wenn Sie Methoden verketten, die Sie nicht haben), Beispiel:
(Ich mag es nicht, Array.prototype zu verschmutzen, und das wäre der einzige Weg, die Kette zu respektieren - das Definieren einer neuen Funktion wird sie brechen - also denke ich, dass so etwas der einzige Weg ist, dies zu erreichen.)
quelle
Sie können dies versuchen:
quelle
Ein funktionaler Ansatz mit ES2015
Nach dem funktionalen Ansatz ist a
union
von zweiArray
s nur die Zusammensetzung vonconcat
undfilter
. Um eine optimale Leistung zu erzielen, greifen wir auf den nativenSet
Datentyp zurück, der für die Suche nach Eigenschaften optimiert ist.Wie auch immer, die Schlüsselfrage in Verbindung mit einer
union
Funktion ist, wie Duplikate behandelt werden. Folgende Permutationen sind möglich:Die ersten beiden Permutationen sind mit einer einzigen Funktion einfach zu handhaben. Die letzten beiden sind jedoch komplizierter, da Sie sie nicht verarbeiten können, solange Sie sich auf
Set
Suchvorgänge verlassen. Da das Wechseln zu einfachenObject
Suchvorgängen für alte Eigenschaften einen schwerwiegenden Leistungseinbruch bedeuten würde, ignoriert die folgende Implementierung nur die dritte und vierte Permutation. Sie müssten eine separate Version von erstellenunion
, um sie zu unterstützen.Von hier an wird es trivial, eine
unionn
Funktion zu implementieren , die eine beliebige Anzahl von Arrays akzeptiert (inspiriert von Naomiks Kommentaren):Es stellt sich heraus, dass
unionn
es nurfoldl
(akaArray.prototype.reduce
) ist, wasunion
als Reduzierer dient. Hinweis: Da die Implementierung keinen zusätzlichen Akkumulator verwendet, wird ein Fehler ausgegeben, wenn Sie ihn ohne Argumente anwenden.quelle
flip
und binnotf
unbenutzt. AuchunionBy
Prädikat Lecks Implementierungsdetails (erfordern implizites Wissen vonSet
Typ). Es wäre schön, wenn Sie so etwas tun könnten:union = unionBy (apply)
undunionci = unionBy (p => x => p(x.toLowerCase()))
. Auf diese Weise sendet der Benutzer einfach, was auch immer der Gruppierungswert istp
- nur eine Idee ^ _ ^zs
Variablendeklaration fehlt auchvar
/let
Schlüsselwortdeswegen ... hier ist eine einzeilige Lösung:
Nicht besonders lesbar, aber es kann jemandem helfen:
Set
.Set
in ein Array zu konvertieren .sort()
Funktion wird auf das neue Array angewendet.quelle
reduce()
Sie verwendenArray.from(set)
Einzelne oder mehrere Array-Eingänge zusammenführen oder zusammenführen und deDuplizieren. Beispiel unten.
Verwenden von ES6 - Festlegen der Destrukturierung
Ich habe diese einfache Funktion geschrieben, die mehrere Array-Argumente akzeptiert. Hat so ziemlich das gleiche wie die obige Lösung, hat nur einen praktischeren Anwendungsfall. Diese Funktion verkettet doppelte Werte nicht nur in einem Array, damit sie zu einem späteren Zeitpunkt gelöscht werden können.
KURZFUNKTIONSDEFINITION (nur 9 Zeilen)
VERWENDUNGSBEISPIEL CODEPEN :
quelle
arr.map
hier verwenden? Sie verwenden es alsforeach
, da das Ergebnis ignoriert wirdquelle
quelle