Cet article appartient aux compétences de base de JavaScript. Nous apprendrons diverses méthodes communes pour combiner / fusionner deux tableaux JS et comparer les avantages et les inconvénients de diverses méthodes.
Jetons un coup d'œil au scénario spécifique:
La copie de code est la suivante:
var q = [5, 5, 1, 9, 9, 6, 4, 5, 8];
var b = ["Tie", "mao", "csdn", "ren", "fu", "fei"];
De toute évidence, le résultat d'une épissage simple des tableaux Q et B est:
La copie de code est la suivante:
[
5, 5, 1, 9, 9, 6, 4, 5, 8,
"Tie", "Mao", "CSDN", "Ren", "Fu", "Fei"
]]
Concat (..) Méthode
Les usages les plus courants sont les suivants:
La copie de code est la suivante:
var c = q.concat (b);
Q; // [5,5,1,9,9,6,4,5,8]
B; // ["Tie", "Mao", "CSDN", "Ren", "Fu", "Fei"];
C; // [5,5,1,9,9,6,4,5,8, "Tie", "Mao", "CSDN", "Ren", "Fu", "Fei"]
Comme vous pouvez le voir, C est un tout nouveau tableau qui représente une combinaison de deux tableaux: Q et B, mais Q et B sont inutiles maintenant, non?
Si le tableau Q dispose de 10 000 éléments et que le tableau B dispose de 10 000 éléments? Ensuite, le tableau C compte désormais 20 000 éléments, qui occupe le double de la mémoire.
"C'est OK!", Vous pouvez penser. Mettez simplement Q et B en vain, puis ce sera collecté des ordures, non? Le problème est résolu!
La copie de code est la suivante:
q = b = null; // `Q` et` B` peuvent désormais être collectés aux ordures
Um? Si les tableaux sont petits, il n'y a naturellement aucun problème. Cependant, lorsque de grands tableaux ou un traitement répété sont nécessaires, la mémoire est limitée et elle doit également être optimisée.
Insertion de boucle
Ok, essayons d'ajouter le contenu d'un tableau à un autre, en utilisant la méthode du tableau # push ():
La copie de code est la suivante:
// insérer un 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, "Tie", "Mao", "CSDN", "Ren", "Fu", "Fei"]
b = null;
Maintenant, le contenu de deux tableaux d'origine est stocké dans Q (Q + B).
Il semble avoir fait un bon travail d'optimisation de la mémoire.
Mais que se passe-t-il si le tableau Q est très petit et B est très grand? Pour les considérations de mémoire et de vitesse, vous souhaitez insérer le Q plus petit à l'avant de b. Pas de problème, utilisez simplement la méthode UNSHIFT () au lieu de push (), et la traversée correspondante doit être effectuée de grande à petite:
La copie de code est la suivante:
// `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, "Tie", "Mao", "CSDN", "Ren", "Fu", "Fei"]
q = null;
Conseils pratiques
Malheureusement, la boucle FOR est rustique et difficile à entretenir. Pouvons-nous faire mieux?
Essayons le tableau # Réduisez en premier:
La copie de code est la suivante:
// `b` sur` Q`:
q = b.reduce (fonction (coll, item) {
coll.push (élément);
Retour Coll;
}, q);
Q; // [5,5,1,9,9,6,4,5,8, "Tie", "Mao", "CSDN", "Ren", "Fu", "Fei"]
// ou `Q` dans` B`:
b = q.reduceRight (fonction (coll, item) {
coll.unshift (article);
Retour Coll;
}, b);
B; // [5,5,1,9,9,6,4,5,8, "Tie", "Mao", "CSDN", "Ren", "Fu", "Fei"]
Array # réduction () et array # reduceRight () sont très haut de gamme, mais un peu volumineux, et la plupart des gens ne s'en souviennent pas. Les fonctions => flèches (fonctions de flèche) dans JS Spécification 6 peuvent réduire considérablement la quantité de code, mais elle nécessite des appels de fonction à chaque élément de tableau, ce qui est également une très mauvaise méthode.
Alors, que diriez-vous du code suivant?
La copie de code est la suivante:
// `b` sur` Q`:
Q.push.Apply (Q, B);
Q; // [5,5,1,9,9,6,4,5,8, "Tie", "Mao", "CSDN", "Ren", "Fu", "Fei"]
// ou `Q` dans` B`:
b.unshift.apply (b, q);
B; // [5,5,1,9,9,6,4,5,8, "Tie", "Mao", "CSDN", "Ren", "Fu", "Fei"]
Big est plus haut, non !? En particulier, la méthode UNSHIFT () n'a pas besoin de considérer l'ordre inverse comme auparavant. L'opérateur d'expansion de l'ES6 (opérateur de propagation, préfixe) est plus avancé: a.push (... b) ou b.unshift (... a)
Cependant, en fait, cette méthode est encore trop optimiste. Dans les deux cas, qu'il s'agisse de passer A ou B pour appliquer () comme deuxième paramètre (le premier paramètre devient cette fonction en interne lors de la fonction d'appel dans la méthode d'application, c'est-à-dire le contexte, la portée), ou la méthode de l'opérateur d'extension, le tableau sera en fait brisé dans les arguments de la fonction.
Le premier problème majeur est qu'il occupe le double de la mémoire (bien sûr, temporaire!) Parce que le tableau doit être copié dans la pile de fonctions. De plus, différents moteurs JS ont différents algorithmes d'implémentation, ce qui peut limiter le nombre de paramètres que la fonction peut passer.
Si un tableau ajoute un million d'éléments, il dépassera certainement la taille autorisée par la pile de fonctions, qu'il s'agisse d'un appel push () ou non change (). Cette méthode n'est disponible que lorsqu'il y a quelques milliers d'éléments, il doit donc être limité à dépasser une certaine plage.
Remarque: vous pouvez également essayer Splice (), et vous constaterez certainement qu'il a la même limitation que Push (..) / Unhift (..).
Une option consiste à continuer à utiliser cette méthode, mais avec le traitement par lots:
La copie de code est la suivante:
fonction combiningInto (q, b) {
var len = q.length;
pour (var i = 0; i <len; i = i + 5000) {
// 5 000 articles sont traités à la fois
b.unshift.apply (b, q.slice (i, i + 5000));
}
}
Attendez, nous compromettant la lisibilité du code (même les performances!). Terminer ce voyage avant d'abandonner.
Résumer
Array # Concat () est une méthode éprouvée pour combiner deux (ou plus) tableaux. Mais il crée un nouveau tableau au lieu de modifier celui existant.
Il existe de nombreuses façons de s'adapter, mais ils ont tous des avantages et des inconvénients différents et doivent être choisis en fonction des conditions réelles.
Les divers avantages / inconvénients sont répertoriés ci-dessus, et peut-être les meilleures méthodes (y compris celles non répertoriées) sont réduites (..) et réduceright (..)
Quoi que vous choisissiez, vous devriez réfléchir de manière critique à votre combinaison et à votre stratégie plutôt qu'à la prendre pour acquise.