Kombinieren/zusammenführen Sie zwei JS-Arrays mit unterschiedlichen Methoden_Javascript-Tipps

Dies ist ein einfacher Artikel mit einigen Tipps zur Verwendung von JavaScript-Arrays. Wir werden verschiedene Methoden verwenden, um zwei JS-Arrays zu kombinieren/zusammenzuführen, und die Vor- und Nachteile jeder Methode diskutieren.

Betrachten wir zunächst die folgende Situation:

Code kopieren Der Code lautet wie folgt:

var a = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ];
var b = [ „foo“, „bar“, „baz“, „bam“, „bun“, „fun“ ];

Offensichtlich sollte das einfachste Kombinationsergebnis sein:

Code kopieren Der Code lautet wie folgt:

[
1, 2, 3, 4, 5, 6, 7, 8, 9,
„foo“, „bar“, „baz“, „bam“ „bun“, „fun“
]

concat(..)

Dies ist der gebräuchlichste Ansatz:

Code kopieren Der Code lautet wie folgt:

var c = a.concat( b );
a; // [1,2,3,4,5,6,7,8,9]
b; // ["foo", "bar", "baz", "bam", "bun", "fun"]
c; // [1,2,3,4,5,6,7,8,9,"foo",bar",baz",bam",bun",fun"]

Wie Sie sehen können, ist C ein brandneues Array, das die Kombination der beiden Arrays a und b darstellt, wobei A und B unverändert bleiben. Einfach, oder?

Aber was ist, wenn a 10.000 Elemente hat und b auch 10.000 Elemente? C wird 20.000 Elemente haben, sodass sich die Speichernutzung von a und b verdoppelt.

„Kein Problem!“, sagen Sie. Lassen Sie sie im Müll sammeln, setzen Sie A und B auf Null, das Problem ist gelöst!

a = b = null; // 'a' und 'b' werden recycelt

Haha. Bei kleinen Arrays mit nur wenigen Elementen ist dies kein Problem. Aber bei großen Arrays oder in Systemen mit begrenztem Speicher, die diesen Vorgang häufig wiederholen müssen, gibt es tatsächlich viel Raum für Verbesserungen.
Schleifeneinfügung

Okay, kopieren wir den Inhalt eines Arrays in ein anderes, indem wir Folgendes verwenden: Array#push(..)

Code kopieren Der Code lautet wie folgt:

// `b` auf `a`
for (var i=0; i < b.length; i ) {
a.push( b[i] );
}
a; // [1,2,3,4,5,6,7,8,9,"foo",bar",baz",bam",bun",fun"]
b = null;

Array a hat nun den Inhalt von Array b.

Scheint einen besseren Speicherbedarf zu haben.

Aber was ist, wenn Array a kleiner ist? Aus Speicher- und Geschwindigkeitsgründen möchten Sie möglicherweise das kleinere a vor b setzen. Kein Problem, ersetzen Sie einfach push(..) durch unshift(..):

Code kopieren Der Code lautet wie folgt:

// `a` in `b`:
for (var i=a.length-1; i >= 0; i--) {
b.unshift( a[i] );
}
b; // [1,2,3,4,5,6,7,8,9,"foo","bar", "baz", "bam", "bun", "fun"]

Funktionstipps

Allerdings ist die for-Schleife tatsächlich hässlich und schwer zu warten. Können wir es besser machen?

Dies ist unser erster Versuch mit Array#reduce:

Code kopieren Der Code lautet wie folgt:

// `b` auf `a`:
a = b.reduce( function(coll,item){
coll.push( item );
return coll;
}, a );

a; // [1,2,3,4,5,6,7,8,9,"foo",bar",baz",bam",bun",fun"]

// oder `a` in `b`:
b = a.reduceRight( function(coll,item){
coll.unshift(item);
return coll;
}, b );

b; // [1,2,3,4,5,6,7,8,9,"foo",bar",baz",bam",bun",fun"]

Array#reduce(..) und Array#reduceRight(..) sind nett, aber etwas klobig. Die Pfeilfunktionen von ES6=> reduzieren die Codemenge etwas, erfordern aber immer noch eine Funktion, die für jedes Element einmal aufgerufen werden muss, was nicht perfekt ist.

Wie wäre es damit:

Code kopieren Der Code lautet wie folgt:

// `b` auf `a`:

a.push.apply( a, b );

a; // [1,2,3,4,5,6,7,8,9,"foo",bar",baz",bam",bun",fun"]

// oder `a` in `b`:

b.unshift.apply( b, a );

b; // [1,2,3,4,5,6,7,8,9,"foo",bar",baz",bam",bun",fun"]

Das ist viel besser, oder? Zumal sich die Methode unshift(..) hier nicht um die bisherige umgekehrte Sortierung kümmern muss. Die Span-Operation von ES6 wird schöner sein: a.push( ...b) oder b.unshift( ...a

Maximale Array-Längenbeschränkung

Das erste große Problem besteht darin, dass sich die Speichernutzung verdoppelt hat (vorübergehend natürlich!) und was angehängt wird, ist im Grunde das Kopieren von Elementen über Funktionsaufrufe in den Stapel. Darüber hinaus gibt es bei verschiedenen JS-Engines Einschränkungen hinsichtlich der Länge der kopierten Daten.

Wenn das Array also eine Million Elemente hat, überschreiten Sie definitiv die Grenze des für push(...) oder unshift(...) zulässigen Aufrufstapels. Mit ein paar tausend Elementen wird es leider gut funktionieren, aber Sie müssen darauf achten, angemessene Längengrenzen nicht zu überschreiten.

Hinweis: Sie können splice(...) ausprobieren, was das gleiche Problem wie push(...) und unshift(...) hat.

Es gibt eine Möglichkeit, diese maximale Längenbeschränkung zu umgehen.

Code kopieren Der Code lautet wie folgt:

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

Moment mal, unsere Lesbarkeit ist rückwärts. Das ist es, es kann schlimmer werden, wenn es sich verändert, haha.