Maison >interface Web >js tutoriel >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 :
concat(..)
C'est l'approche la plus courante :
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 !
Insertion de boucle
D'accord, copions le contenu d'un tableau dans un autre, en utilisant : Array#push(..)
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(..):
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 :
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 :
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.
Attendez une minute, notre lisibilité est à l'envers. Ça y est, ça peut empirer à mesure que ça change, haha.