N façons de fusionner des tableaux JavaScript

Ceci est un article simple sur quelques conseils sur l'utilisation des tableaux JavaScript. Nous utiliserons différentes méthodes pour combiner/fusionner deux tableaux JS, et discuterons des avantages/inconvénients de chaque méthode.

Considérons d'abord la situation suivante :

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

Évidemment, le résultat de la combinaison la plus simple devrait être :

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

concat(..)

C'est l'approche la plus courante :

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

Comme vous pouvez le voir, C est un tout nouveau tableau, représentant la combinaison de deux tableaux a et b, et laissez A et B rester inchangés. Simple, non ?

Mais que se passe-t-il si a a 10 000 éléments et b a également 10 000 éléments ? C aura 20 000 éléments, donc l’utilisation de la mémoire de a et b doublera.

« Pas de problème ! », avez-vous dit. Laissez-les être ramassés, définissez A et B sur null, problème résolu !

a = b = null; // 'a'和'b'就被回收了

Haha. Pour les petits tableaux contenant seulement quelques éléments, cela ne pose aucun problème. Mais pour les grandes baies ou dans les systèmes avec une mémoire limitée qui doivent répéter ce processus fréquemment, il y a en fait beaucoup de marge d'amélioration.

Insertion de boucle

Bon, copions le contenu d'un tableau dans un autre, en utilisant : 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;

Maintenant, le tableau a a le contenu du tableau b.

Semble avoir une meilleure empreinte mémoire.

Mais que se passe-t-il si le tableau a est relativement petit ? Pour des raisons de mémoire et de vitesse, vous souhaiterez peut-être mettre le plus petit a devant b. Pas de problème, remplacez simplement push(..) par 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"]

Compétences fonctionnelles

Cependant, la boucle for est effectivement moche et difficile à maintenir. Pouvons-nous faire mieux ?

C'est notre première tentative, en utilisant 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(..) et Array#reduceRight(..) sont sympas, mais c'est un peu maladroit . Les fonctions fléchées de ES6=> réduiront un peu la quantité de code, mais elles nécessitent toujours une fonction qui doit être appelée une fois pour chaque élément, ce qui n'est pas parfait.

Et celui-ci :

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

Celui-ci est bien meilleur, non ? D'autant plus que la méthode unshift(..) n'a pas à se soucier du tri inverse précédent ici. L'opération span d'ES6 sera plus belle : a.push( ...b) ou b.unshift( ...a

　Limite de longueur maximale du tableau

　Le premier principal Le problème est que l'utilisation de la mémoire a doublé (seulement temporairement bien sûr !) et le contenu ajouté copie essentiellement l'élément dans la pile via un appel de fonction. De plus, différents moteurs JS ont des limites sur la longueur des données copiées <. 🎜>

Donc, si le tableau contient un million d'éléments, vous dépasserez certainement la limite de la pile d'appels autorisée pour push(...) ou unshift(...) Hélas, avec quelques milliers d'éléments, ce sera le cas. . Fonctionne bien, mais vous devez faire attention à ne pas dépasser les limites de longueur raisonnables

Remarque : vous pouvez essayer splice(...), qui est similaire à push(...) et unshift(. . .) Il existe un moyen d'éviter cette limite de longueur maximale

Attendez, c'est tout, ça peut empirer à mesure que ça change, haha. N méthodes de fusion de tableaux JavaScript. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (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 ) );
    }
}

!