Mehrere Methoden zum Zusammenführen von Arrays in JS und Vergleich von Vor- und Nachteilen_Grundkenntnisse

Dieser Artikel gehört zu den Grundkenntnissen von JavaScript. Wir lernen verschiedene gängige Methoden zum Kombinieren/Zusammenführen zweier JS-Arrays kennen und vergleichen die Vor- und Nachteile verschiedener Methoden.

Werfen wir zunächst einen Blick auf das konkrete Szenario:

Code kopieren Der Code 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 einer einfachen Verkettung der Arrays q und b:

Code kopieren Der Code lautet wie folgt:

[
5, 5, 1, 9, 9, 6, 4, 5, 8,
„tie“, „mao“, „csdn“, „ren“, „fu“, „fei“
]

concat(..)-Methode

Die häufigste Verwendung ist wie folgt:

Code kopieren Der Code 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 die Kombination der beiden Arrays q und b darstellt, aber q und b sind jetzt nutzlos, oder?

Wenn das Array q 10.000 Elemente hat und das Array b auch 10.000 Elemente? Dann hat das Array c jetzt 20.000 Elemente und diese Methode benötigt doppelt so viel Speicher.

„Das ist kein Problem!“, denken Sie vielleicht, dann werden sie im Müll gesammelt, oder?

Code kopieren Der Code lautet wie folgt:

q = b = null; // „q“ und „b“ werden jetzt durch Müll gesammelt

Ähm? Wenn die Arrays klein sind, gibt es kein Problem. Bei großen Arrays oder wenn eine wiederholte Verarbeitung erforderlich ist, ist der Speicher jedoch begrenzt und muss ebenfalls optimiert werden

Schleifeneinfügung

OK, versuchen wir, den Inhalt eines Arrays zu einem anderen hinzuzufügen, indem wir die Methode Array#push() verwenden:

Code kopieren Der Code lautet wie folgt:

// Array „b“ in „q“ einfügen

for (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 speichert q den Inhalt der beiden ursprünglichen Arrays (q b).

Es scheint, dass die Speicheroptimierung gut gelungen ist.

Aber was ist, wenn das q-Array klein und b groß ist? Aus Speicher- und Geschwindigkeitsgründen möchten Sie das kleinere q vor b einfügen. Kein Problem, verwenden Sie einfach die Methode unshift() anstelle von push(. ) Das ist alles, und der entsprechende Zyklus muss vom Großen zum Kleinen durchlaufen werden:

Code kopieren Der Code lautet wie folgt:

// `q` in `b`:

for (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 sind For-Schleifen langweilig und schwer zu warten. Können wir es besser machen?

Versuchen wir es zuerst mit Array#reduce:

Code kopieren Der Code lautet wie folgt:

// `b` auf `q`:

q = b.reduce( function(coll,item){
coll.push(item);
Rückgabekoll;
}, q );

q; // [5,5,1,9,9,6,4,5,8,"tie", "mao", "csdn", "ren", "fu", "fei"]

// oder `q` in `b`:

b = q.reduceRight( function(coll,item){

coll.unshift(item);
Rückgabekoll;
}, b );

b; // [5,5,1,9,9,6,4,5,8,"tie", "mao", "csdn", "ren", "fu", "fei"]

Array#reduce() und Array#reduceRight() sind sehr ausgefallen, aber etwas umständlich, und die meisten Leute können sich nicht an sie erinnern. Die =>-Pfeilfunktionen in der JS-Spezifikation 6 können die Codemenge erheblich reduzieren. , aber es erfordert einen Funktionsaufruf für jedes Array-Element, was ebenfalls eine sehr schlechte Methode ist
Was ist also mit dem folgenden Code?

Code kopieren Der Code 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"]

BIG ist höher, oder? Insbesondere die unshift()-Methode muss nicht wie zuvor die umgekehrte Reihenfolge berücksichtigen. Der ES6-Spread-Operator (Spread-Operator, plus... Präfix) ist noch höher: a. ..b ) oder b.unshift( ...a )

Tatsächlich ist diese Methode jedoch immer noch zu optimistisch. Unabhängig davon, ob a oder b als zweiter Parameter an apply() übergeben wird (der erste Parameter ist intern, wenn die Funktion im Apply-Modus aufgerufen wird) wird dies (d. h. Kontext, Kontext, Bereich) oder verwenden Sie ... den Erweiterungsoperator. Tatsächlich wird das Array in Argumente der Funktion aufgeteilt.
Das erste große Problem besteht darin, dass es doppelt so viel Speicher beansprucht (natürlich vorübergehend!), da das Array in den Funktionsstapel kopiert werden muss. Darüber hinaus verfügen verschiedene JS-Engines über unterschiedliche Implementierungsalgorithmen, was die Anzahl der Parameter einschränken kann kann an die Funktion übergeben werden.

Wenn dem Array eine Million Elemente hinzugefügt werden, überschreitet es definitiv die vom Funktionsstapel zulässige Größe, unabhängig vom Aufruf von push() oder unshift(). Diese Methode ist nur verfügbar, wenn es Tausende von Elementen gibt muss begrenzt sein. Es darf einen bestimmten Bereich nicht überschreiten.

Hinweis: Sie können auch splice() ausprobieren und Sie werden auf jeden Fall feststellen, dass es die gleichen Einschränkungen hat wie push(..)/unshift(..).

Eine Möglichkeit besteht darin, diese Methode weiterhin zu verwenden, jedoch schubweise:

Code kopieren Der Code lautet wie folgt:

Funktion combinto(q,b) {
var len = q.length;
für (var i=0; i < len; i=i 5000) {
// 5000 Elemente gleichzeitig verarbeiten
b.unshift.apply( b, q.slice( i, i 5000 ) );
}
}

Warten Sie, wir beeinträchtigen die Lesbarkeit unseres Codes (und sogar die Leistung!). Beenden wir diese Reise, bevor wir aufgeben.

Zusammenfassung

Array#concat() ist die bewährte Methode zum Kombinieren von zwei (oder mehr) Arrays. Sie erstellt jedoch ein neues Array, anstatt ein vorhandenes zu ändern.

Es gibt viele alternative Methoden, aber alle haben unterschiedliche Vor- und Nachteile, und Sie müssen entsprechend der tatsächlichen Situation auswählen.

Es gibt verschiedene oben aufgeführte Vor- und Nachteile. Die besten (einschließlich der nicht aufgeführten) sind vielleicht Reduce(..) und ReduceRight(..)

Was auch immer Sie wählen, denken Sie kritisch über Ihre Array-Zusammenführungsstrategie nach und nehmen Sie sie nicht als selbstverständlich hin