So führen Sie JavaScript-Arrays zusammen

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:

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:

[
   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 zweier 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!“, sagten 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;

Nun hat das Array a der Inhalt von Array b.

Scheint einen besseren Speicherbedarf zu haben.

Aber was ist, wenn Array a relativ klein 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"]

Funktionale Fähigkeiten

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:

// `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 . 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 mit diesem hier:

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

Der 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

　Die maximale Längenbeschränkung des Arrays

Das erste große Problem ist , Die Speichernutzung hat sich verdoppelt (natürlich nur vorübergehend!). Der angehängte Inhalt kopiert das Element grundsätzlich über einen Funktionsaufruf auf den Stapel.

Wenn das Array also eine Million Elemente hat, überschreiten Sie definitiv die Grenze des für push(...) oder unshift(...) zulässigen Aufrufstapels. Leider reicht es auch für ein paar tausend Elemente aus Sie müssen jedoch darauf achten, angemessene Längenbeschränkungen nicht zu überschreiten

Hinweis: Sie können splice(...) ausprobieren, was dasselbe ist wie push(...) und unshift(...) . Dieses Problem.

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

function combineInto(a,b) {
    var len = a.length;
    for (var i=0; i < len; i=i+5000) {
        b.unshift.apply( b, a.slice( i, i+5000 ) );
    }
}