Heim > Web-Frontend > js-Tutorial > Hauptteil

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

黄舟
Freigeben: 2017-02-25 13:46:10
Original
1175 Leute haben es durchsucht

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" ];
Nach dem Login kopieren

Offensichtlich sollte das einfachste Kombinationsergebnis sein:

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

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"]
Nach dem Login kopieren

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'就被回收了
Nach dem Login kopieren

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;
Nach dem Login kopieren

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"]
Nach dem Login kopieren

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"]
Nach dem Login kopieren

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"]
Nach dem Login kopieren

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.

Warte, es kann schlimmer werden, wenn es sich ändert, haha N Methoden zum Zusammenführen von JavaScript-Arrays finden Sie auf der chinesischen PHP-Website (www.php.cn) >
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 ) );
    }
}
Nach dem Login kopieren

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!