N Möglichkeiten zum Zusammenführen von JavaScript-Arrays

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 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!“, 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 hier 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

　Array-Maximallängenbeschränkung

　Das erste Hauptproblem ist, dass sich die Speichernutzung verdoppelt hat (natürlich nur vorübergehend!) und der angehängte Inhalt das Element grundsätzlich über einen Funktionsaufruf auf den Stapel kopiert. Darüber hinaus haben verschiedene JS-Engines Einschränkungen hinsichtlich der Länge der kopierten Daten

Wenn das Array also eine Million Elemente hat, werden Sie definitiv die Grenze des für push(...) oder unshift(...) zulässigen Aufrufstapels überschreiten. Leider wird dies bei ein paar tausend Elementen der Fall sein . Funktioniert gut, aber Sie müssen darauf achten, angemessene Längenbeschränkungen nicht zu überschreiten.

Hinweis: Sie können splice(...) ausprobieren, was push(...) und unshift( ähnelt. .) 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 ) );
    }
}