Dieser Artikel gehört zu den grundlegenden Fähigkeiten von JavaScript. Wir werden verschiedene gemeinsame Methoden zum Kombinieren/Zusammenführen von zwei JS -Arrays lernen und die Vor- und Nachteile verschiedener Methoden vergleichen.
Schauen wir uns das spezifische Szenario an:
Die Codekopie lautet wie folgt:
var q = [5, 5, 1, 9, 9, 6, 4, 5, 8];
var b = ["Tie", "mao", "csdn", "ren", "fu", "fei"];
Offensichtlich ist das Ergebnis eines einfachen Spleißens von Arrays Q und B:
Die Codekopie lautet wie folgt:
[
5, 5, 1, 9, 9, 6, 4, 5, 8,
"Krawatte", "Mao", "CSDN", "Ren", "Fu", "Fei"
]
concat (..) Methode
Die häufigsten Verwendungen sind wie folgt:
Die Codekopie lautet wie folgt:
var c = q.concat (b);
Q; // [5,5,1,9,9,6,4,5,8]
B; // ["Tie", "mao", "csdn", "ren", "fu", "fei"];
C; // [5,5,1,9,9,6,4,5,8, "Tie", "Mao", "CSDN", "Ren", "Fu", "Fei"]
Wie Sie sehen können, ist C ein brandneues Array, das eine Kombination aus zwei Arrays darstellt: Q und B, aber Q und B sind jetzt nutzlos, oder?
Wenn das Q -Array 10.000 Elemente hat und das B -Array 10.000 Elemente hat? Dann hat das Array C nun 20.000 Elemente, die doppelt so hoch wie die Erinnerung.
"Das ist in Ordnung!", Denken Sie vielleicht. Setzen Sie einfach Q und B vergeblich, und dann wird es Müll gesammelt, oder? Das Problem ist gelöst!
Die Codekopie lautet wie folgt:
q = b = null; // `q` und` b` können jetzt Müll gesammelt werden
Äh? Wenn die Arrays klein sind, gibt es natürlich kein Problem. Wenn jedoch große Arrays oder eine wiederholte Verarbeitung erforderlich sind, ist der Speicher begrenzt und muss auch optimiert werden.
Schleifeninsertion
OK, versuchen wir mit der Methode Array#Push () den Inhalt eines Arrays zu einem anderen hinzuzufügen:
Die Codekopie lautet wie folgt:
// Array `b` in` q` einfügen
für (var i = 0; i <B.Length; i ++) {
Q.push (b [i]);
}
Q; // [5,5,1,9,9,6,4,5,8, "Tie", "Mao", "CSDN", "Ren", "Fu", "Fei"]
B = NULL;
Jetzt wird der Inhalt von zwei ursprünglichen Arrays in q (q + b) gespeichert.
Es scheint eine gute Arbeit in der Speicheroptimierung geleistet zu haben.
Aber was ist, wenn das Q -Array sehr klein und B sehr groß ist? Für Speicher- und Geschwindigkeitsüberlegungen möchten Sie das kleinere Q in die Vorderseite b einfügen. Kein Problem, verwenden Sie einfach die Unshift () -Methode anstelle von Push (), und die entsprechende Durchführung muss von groß bis klein durchgeführt werden:
Die Codekopie lautet wie folgt:
// `q` in` b`:
für (var i = q.Length-1; i> = 0; i--) {
B.Unshift (q [i]);
}
B; // [5,5,1,9,9,6,4,5,8, "Tie", "Mao", "CSDN", "Ren", "Fu", "Fei"]
q = null;
Praktische Tipps
Leider ist die für Schleife rustikal und schwer zu pflegen. Können wir es besser machen?
Versuchen wir Array#zuerst reduzieren:
Die Codekopie lautet wie folgt:
// `b` auf` q`:
q = B.Rece (Funktion (coll, item) {
Coll.push (Artikel);
return coll;
}, Q );
Q; // [5,5,1,9,9,6,4,5,8, "Tie", "Mao", "CSDN", "Ren", "Fu", "Fei"]
// oder `q` in` b`:
B = Q.REDUCERIGHT (Funktion (Coll, Element) {
Coll.Unshift (Artikel);
return coll;
}, B );
B; // [5,5,1,9,9,6,4,5,8, "Tie", "Mao", "CSDN", "Ren", "Fu", "Fei"]
Array#recry () und Array#Reduderight () sind sehr hochwertig, aber etwas sperrig, und die meisten Menschen können sich nicht daran erinnern. Die => Pfeilfunktionen (Pfeilfunktionen) in der JS-Spezifikation 6 können die Codemenge erheblich reduzieren, benötigen jedoch Funktionsaufrufe für jedes Array-Element, was auch eine sehr schlechte Methode ist.
Wie wäre es mit dem folgenden Code?
Die Codekopie lautet wie folgt:
// `b` auf` q`:
q.push.apply (q, b);
Q; // [5,5,1,9,9,6,4,5,8, "Tie", "Mao", "CSDN", "Ren", "Fu", "Fei"]
// oder `q` in` b`:
B.Unshift.Apply (b, q);
B; // [5,5,1,9,9,6,4,5,8, "Tie", "Mao", "CSDN", "Ren", "Fu", "Fei"]
Groß ist höher, richtig!? Insbesondere muss die Unshift () -Methode die entgegengesetzte Reihenfolge wie zuvor nicht berücksichtigen. Der Expansionsbetreiber von ES6 (Spread Operator, Präfix) ist fortgeschrittener: a.push (... b) oder B.Unshift (... a)
Tatsächlich ist diese Methode jedoch immer noch zu optimistisch. In beiden Fällen wird das Array tatsächlich in die Argumente der Funktion unterteilt.
Das erste große Problem besteht darin, dass es das doppelte Speicher des Speichers (natürlich vorübergehend!) Nimmt, da das Array in den Funktionsstapel kopiert werden muss. Darüber hinaus haben verschiedene JS -Motoren unterschiedliche Implementierungsalgorithmen, die die Anzahl der Parameter, die die Funktion übergeben kann, einschränken kann.
Wenn ein Array eine Million Elemente hinzufügt, überschreitet es definitiv die Größe des Funktionsstapels, egal ob es sich um einen Push () oder einen Unschuh () -Anruf handelt. Diese Methode ist nur verfügbar, wenn einige tausend Elemente vorhanden sind. Daher muss sie darauf beschränkt sein, einen bestimmten Bereich zu übertreffen.
Hinweis: Sie können auch Splice () versuchen, und Sie werden auf jeden Fall feststellen, dass es die gleiche Einschränkung hat wie Push (..)/Unschuh (..).
Eine Option besteht darin, diese Methode weiter zu verwenden, jedoch mit der Stapelverarbeitung:
Die Codekopie lautet wie folgt:
Funktion combineInto (q, b) {
var len = Q.Length;
für (var i = 0; i <len; i = i+5000) {
// 5.000 Artikel werden gleichzeitig verarbeitet
B.Unshift.Apply (b, q.slice (i, i+5000));
}
}
Warten Sie, wir beeinträchtigen die Lesbarkeit des Code (sogar Leistung!). Beenden Sie diese Reise, bevor wir aufgeben.
Zusammenfassen
Array#concat () ist eine bewährte Methode zur Kombination von zwei (oder mehr) Arrays. Aber er schafft ein neues Array, anstatt den vorhandenen zu modifizieren.
Es gibt viele Möglichkeiten, sich anzupassen, aber alle haben unterschiedliche Vor- und Nachteile und müssen gemäß den tatsächlichen Bedingungen ausgewählt werden.
Die verschiedenen Vor-/Nachteile sind oben aufgeführt.
Was auch immer Sie wählen, Sie sollten kritisch über Ihre Kombination und Strategie nachdenken, anstatt sie für selbstverständlich zu halten.