Detaillierte Erläuterung mehrerer Methoden zum Zusammenführen von JavaScript-Arrays

In diesem Artikel werden hauptsächlich verschiedene Methoden zum Zusammenführen von JavaScript-Arrays im Detail vorgestellt.

Dies ist ein einfacher Artikel über JavaScriptEinige Tipps zur Verwendung von 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:

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

Das einfachste Kombinationsergebnis sollte natürlich sein:

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

concat(..)

Dies ist der gebräuchlichste Ansatz:

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, und seien A und B bleiben unverändert. 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.

SchleifeEinfügen

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

// `b` onto `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(..):

// `a` into `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

Aber for-Schleife It ist in der Tat hässlich und schwer zu pflegen. Können wir es besser machen?

Dies ist unser erster Versuch mit Array#reduce:

// `b` onto `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"]

// or `a` into `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. ES6=>Die ArrowFunktion reduziert die Codemenge etwas, erfordert aber immer noch eine Funktion, die für jedes Element einmal aufgerufen werden muss, was nicht perfekt ist.

Wie wäre es mit diesem:

// `b` onto `a`:
a.push.apply( a, b );
a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]
// or `a` into `b`:
b.unshift.apply( b, a );
b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

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

Maximale Array-Längenbeschränkung

Das erste große Problem ist die Speichernutzung verdoppelt (vorübergehend natürlich!) Der angehängte Inhalt kopiert das Element im Grunde über einen Funktionsaufruf auf den Stapel. Darüber hinaus haben verschiedene JS-Engines Einschränkungen hinsichtlich der Länge der kopierten Daten 🎜> Wenn das Array also eine Million Elemente hat. Sie werden auf jeden Fall die durch push(…) oder unshift(…) zulässige Grenze des Aufrufstapels überschreiten. Leider reicht es auch für ein paar tausend Elemente aus, 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

Warten Sie einen Moment, lassen Sie uns darauf zurückkommen. Es kann schlimmer werden, wenn wir es ändern.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung mehrerer Methoden zum Zusammenführen von JavaScript-Arrays. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!