N façons de fusionner des tableaux dans les compétences JavaScript_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 :

Copier le code Le code est le suivant :

var une = [ 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 :

Copier le code Le code est le suivant :

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

concat(..)

C'est l'approche la plus courante :

Copier le code Le code est le suivant :

var c = a.concat( b );
une; // [1,2,3,4,5,6,7,8,9]
b; // ["foo","bar","baz","bam","chignon","amusant"]
c; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","chignon","amusant"]

Comme vous pouvez le voir, C est un tout nouveau tableau, représentant la combinaison de deux tableaux a et b, laissant A et B 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 ! », dites-vous. Laissez-les être ramassés, définissez A et B sur null, problème résolu !

Copier le code Le code est le suivant :

a = b = null ; // 'a' et 'b' sont recyclés

héhé. 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

D'accord, copions le contenu d'un tableau dans un autre, en utilisant : Array#push(..)

Copier le code Le code est le suivant :

// `b` sur `a`
pour (var i=0; i < b.length; i ) {
a.push( b[i] );
>
une; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","chignon","amusant"]
b = nul;

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

Semble avoir une meilleure empreinte mémoire.

Mais que se passe-t-il si le tableau a est plus 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(..):

Copier le code Le code est le suivant :

// `a` dans `b` :
pour (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","chignon","amusant"]

Conseils fonctionnels

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

C'est notre première tentative, en utilisant Array#reduce :

Copier le code Le code est le suivant :

// `b` sur `a` :
a = b.reduce( function(coll,item){
coll.push(item);
Retour coll;
}, une );

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

// ou `a` en `b` :
b = a.reduceRight( function(coll,item){
coll.unshift(item);
Retour coll;
},b);

b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","chignon","fun"]

Array#reduce(..) et Array#reduceRight(..) sont sympas, mais ils sont un peu maladroits. 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.

Que diriez-vous de ceci :

Copier le code Le code est le suivant :

// `b` sur `a` :
a.push.apply( a, b );

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

// ou `a` en `b` :
b.unshift.apply( b, a );

b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","chignon","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 maximale de longueur du tableau

Le premier problème majeur est que l'utilisation de la mémoire a doublé (temporairement bien sûr !) et ce qui est ajouté consiste essentiellement à copier des éléments dans la pile via des appels de fonction. De plus, différents moteurs JS ont des limites sur la longueur des données copiées.
Ainsi, 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, il fera du bon travail avec quelques milliers d'éléments, mais il faudra faire attention à ne pas dépasser des limites de longueur raisonnables.

Remarque : vous pouvez essayer splice(...), qui a le même problème que push(...) et unshift(...).

Il existe un moyen d'éviter cette limite de longueur maximale.

Copier le code Le code est le suivant :

fonction combinerInto(a,b) {
var len = a.longueur;
pour (var i=0; i < len; i=i 5000) {
b.unshift.apply( b, a.slice( i, i 5000 ) );
>
>

Attendez une minute, notre lisibilité est à l'envers. Ça y est, ça peut empirer à mesure que ça change, haha.