Einführung in verschiedene Methoden zur Implementierung der JavaScript-Array-Zusammenführung

Dies ist ein einfacher Artikel über einige 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:

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

Natürlich sollte das einfachste Kombinationsergebnis 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 A und B unverändert lässt. 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'和'b'就被回收了

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(..)

// `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;

Jetzt hat das Array a der 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"]

Funktionelle Tricks

Aber for-Schleife ist wirklich hässlich und schwer umzusetzen 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 umständlich . ES6 => ArrowFunction 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 hat sich verdoppelt (natürlich vorübergehend!). Darüber hinaus gibt es bei verschiedenen JS-Engines Einschränkungen hinsichtlich der Länge der kopierten Daten Wenn Sie mehrere Millionen Elemente verwenden, überschreiten Sie auf jeden Fall die durch push(…) oder unshift(…) zulässige Grenze des Aufrufstapels. 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, unsere Lesbarkeit wird sich verschlechtern, wenn wir es ändern

Das obige ist der detaillierte Inhalt vonEinführung in verschiedene Methoden zur Implementierung der JavaScript-Array-Zusammenführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!