Plusieurs méthodes de fusion de tableaux en JS et comparaison des avantages et des inconvénients_Connaissances de base

Cet article fait partie des compétences de base de JavaScript. Nous apprendrons diverses méthodes courantes de combinaison/fusion de deux tableaux JS et comparerons les avantages et les inconvénients de différentes méthodes.

Jetons d'abord un coup d'œil au scénario spécifique :

Copier le code Le code est le suivant :

var q = [5, 5, 1, 9, 9, 6, 4, 5, 8];
var b = [ "tie", "mao", "csdn", "ren", "fu", "fei" ];

Évidemment, le résultat de la simple concaténation des tableaux q et b est :

Copier le code Le code est le suivant :

[
5, 5, 1, 9, 9, 6, 4, 5, 8,
"cravate", "mao", "csdn", "ren", "fu", "fei"
]

Méthode concat(..)

L'utilisation la plus courante est la suivante :

Copier le code Le code est le suivant :

var c = q.concat( b );

q; // [5,5,1,9,9,6,4,5,8]
b; // ["cravate","mao","csdn","ren","fu","fei"];

c; // [5,5,1,9,9,6,4,5,8,"cravate","mao","csdn","ren","fu","fei"]

Comme vous pouvez le voir, c est un tout nouveau tableau, représentant la combinaison des deux tableaux q et b, mais q et b sont inutiles maintenant, n'est-ce pas ?

Si le tableau q a 10 000 éléments et que le tableau b a également 10 000 éléments ? Alors le tableau c a maintenant 20 000 éléments, et cette méthode prend deux fois plus de mémoire.

"Ce n'est pas un problème !", pensez-vous. Laissez simplement q et b vides, et ils seront ensuite collectés, n'est-ce pas ? Problème résolu !

Copier le code Le code est le suivant :

q = b = null ; // `q` et `b` sont maintenant récupérés

Euh ? Si les tableaux sont petits, alors il n'y a pas de problème. Mais pour les grands tableaux, ou lorsqu'un traitement répété est nécessaire plusieurs fois, la mémoire est limitée et doit également être optimisée

.

Insertion de boucle

OK, essayons d'ajouter le contenu d'un tableau à un autre, en utilisant la méthode Array#push() :

Copier le code Le code est le suivant :

// Insère le tableau `b` dans `q`
pour (var i=0; i < b.length; i ) {
​ q.push( b[i] );
>

q; // [5,5,1,9,9,6,4,5,8,"cravate","mao","csdn","ren","fu","fei"]

b = nul;

Maintenant, q stocke le contenu des deux tableaux d'origine (q b).

Il semble que l'optimisation de la mémoire ait été bien faite.

Mais que se passe-t-il si le tableau q est petit et b est grand ? Pour des raisons de mémoire et de vitesse, vous souhaitez insérer le plus petit q devant b Pas de problème, utilisez simplement la méthode unshift() au lieu de push(. ) Voilà, et le cycle correspondant est à parcourir du grand au petit :

Copier le code Le code est le suivant :

// `q` dans `b` :
pour (var i=q.length-1; i >= 0; i--) {
b.unshift( q[i] );
>
b; // [5,5,1,9,9,6,4,5,8,"cravate","mao","csdn","ren","fu","fei"]

q = nul;

Conseils pratiques

Malheureusement, les boucles for sont ennuyeuses et difficiles à entretenir. Pouvons-nous faire mieux ?

Essayons d'abord Array#reduce :

Copier le code Le code est le suivant :

// `b` sur `q` :
q = b.reduce( function(coll,item){
coll.push(item);
Retour coll;
}, q );
q; // [5,5,1,9,9,6,4,5,8,"cravate","mao","csdn","ren","fu","fei"]

// ou `q` dans `b` :

b = q.reduceRight( function(coll,item){
coll.unshift(item);
Retour coll;
},b);

b; // [5,5,1,9,9,6,4,5,8,"cravate","mao","csdn","ren","fu","fei"]

Array#reduce() et Array#reduceRight() sont très sophistiqués, mais un peu encombrants, et la plupart des gens ne s'en souviennent pas. Les fonctions fléchées => dans la spécification JS 6 peuvent réduire considérablement la quantité de code. , mais cela nécessite un appel de fonction pour chaque élément du tableau, ce qui est également une très mauvaise méthode
. Alors qu'en est-il du code ci-dessous ?

Copier le code Le code est le suivant :

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

q; // [5,5,1,9,9,6,4,5,8,"cravate","mao","csdn","ren","fu","fei"]

// ou `q` dans `b` :
b.unshift.apply( b, q );

b; // [5,5,1,9,9,6,4,5,8,"cravate","mao","csdn","ren","fu","fei"]

BIG est plus élevé, n'est-ce pas !? En particulier, la méthode unshift() n'a pas besoin de considérer l'ordre inverse comme avant. L'opérateur spread ES6 (opérateur spread, plus... préfixe) est encore plus élevé : a. ..b ) ou b.unshift( ...a )

Cependant, en fait, cette méthode est encore trop optimiste. Dans les deux cas, que a ou b soit passé à apply() comme deuxième paramètre (le premier paramètre est interne lors de l'appel de Function en mode apply Devenez ceci (c'est-à-dire le contexte, contexte, scope), ou utiliser... l'opérateur d'expansion. En fait, le tableau sera découpé en arguments de la fonction.
Le premier problème majeur est qu'il occupe le double de la mémoire (temporairement, bien sûr !) car le tableau doit être copié dans la pile de fonctions. De plus, différents moteurs JS ont des algorithmes d'implémentation différents, ce qui peut limiter le nombre de paramètres. peut être transmis à la fonction.

Si un million d'éléments sont ajoutés au tableau, celui-ci dépassera certainement la taille autorisée par la pile de fonctions, quel que soit l'appel à push() ou unshift(). Cette méthode n'est disponible que lorsqu'il y a des milliers d'éléments, elle est donc disponible. doit être limité. Il ne peut pas dépasser une certaine plage.

Remarque : vous pouvez également essayer splice(), et vous constaterez certainement qu'il a les mêmes restrictions que push(..)/unshift(..).

Une option consiste à continuer à utiliser cette méthode, mais par lots :

Copier le code Le code est le suivant :

fonction combinerInto(q,b) {
var len = q.longueur;
pour (var i=0; i < len; i=i 5000) {
// Traitez 5 000 éléments à la fois
b.unshift.apply( b, q.slice( i, i 5000 ) );
>
>

Attendez, nous nuisons à la lisibilité de notre code (et même aux performances !) Terminons ce voyage avant d'abandonner.

Résumé

Array#concat() est la méthode éprouvée pour combiner deux (ou plus) tableaux mais elle crée un nouveau tableau plutôt que de modifier un tableau existant.

Il existe de nombreuses méthodes alternatives, mais elles présentent toutes des avantages et des inconvénients différents, et vous devez choisir en fonction de la situation réelle.

Il existe divers avantages/inconvénients énumérés ci-dessus, les meilleurs (y compris ceux non répertoriés) sont peut-être réduire(..) et réduireDroit(..)

Quel que soit votre choix, réfléchissez de manière critique à votre stratégie de fusion de tableaux et ne la tenez pas pour acquise
.