Voici un article simple sur quelques conseils sur l'utilisation des tableaux JavaScript. Nous utiliserons différentes méthodes pour combiner / fusionner deux tableaux JS, ainsi que pour discuter des avantages / inconvénients de chaque méthode.
Prenons d'abord la situation suivante:
var a = [1, 2, 3, 4, 5, 6, 7, 8, 9]; var b = ["foo", "bar", "baz", "bam", "bun", "fun"];
De toute évidence, le résultat de la combinaison le plus simple devrait être:
[1, 2, 3, 4, 5, 6, 7, 8, 9, "foo", "bar", "baz", "bam" "bun", "fun"]
Concat (..)
C'est la pratique 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 qui représente une combinaison de deux tableaux A et B et maintient A et B invariant. Simple?
Mais si A a 10 000 éléments et B a 10 000 éléments? C aura 20 000 éléments, donc l'utilisation de la mémoire de A et B doublera.
"Aucun problème!" vous avez dit. Qu'ils soient collectés des ordures, définissent A et B sur NULL, le problème est résolu!
a = b = null; // 'a' et 'b' sont recyclés
hehe. Pour les petits tableaux avec seulement quelques éléments, c'est bien. Mais pour les grandes tableaux ou les systèmes avec une mémoire limitée, ce processus doit être répété fréquemment, il a en fait de nombreuses améliorations.
Insertion de boucle
Ok, copie le contenu d'un tableau à un autre, en utilisant: Array # push (..)
// `b` sur` 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.
Il semble y 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 voudrez peut-être mettre un A plus petit devant B,. Pas de problème, il suffit de changer de poussoir (..) pour déboucher (..):
// `a` en` 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 en effet laide et difficile à maintenir. Pouvons-nous faire mieux?
Ceci est notre première tentative, en utilisant le tableau # réduit:
// `b` sur` a`: a = b.reduce (fonction (coll, item) {coll.push (item); return coll;}, a); a; // [1,2,3,4,5,6,7,8,9, "foo", "bar", "baz", "bam", "bun", "fun"] // ou `a` dans` b`: b = a.reduceRight (fonction (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 # Réduisez (..) et le tableau # ReduceRight (..) sont bien, mais ils sont un peu maladroits. La fonction de flèche d'Es6 => réduira la quantité de code, mais elle nécessite toujours une fonction, et chaque élément doit être appelé une fois, ce qui n'est pas parfait.
Alors que diriez-vous de ceci:
// `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", "bun", "fun"]
Est-ce un bien meilleur endroit? Surtout parce que la méthode UNSHIFT (..) n'a pas à s'inquiéter du tri inverse précédent ici. L'opération de discours de l'ES6 sera plus belle: a.push (… b) ou b.unhift (… un
Limite de longueur maximale pour le tableau
Le premier problème majeur est que l'utilisation de la mémoire double (seulement temporaire bien sûr!) Est essentiellement des éléments dans la pile via les appels de fonction. De plus, différents moteurs JS ont des limites sur la durée des données de copie.
Donc, si le tableau a un million d'éléments, vous serez certainement hors de la limite qui pousse (…) ou Unsith (…) permet la pile d'appels. Hélas, il fera un excellent travail pour gérer des milliers d'éléments, mais vous devez faire attention à ne pas dépasser la limite de longueur raisonnable.
Remarque: vous pouvez essayer d'épisser (…), qui a le même problème que Push (…) et un décalage (…).
Il existe un moyen d'éviter cette limite de longueur maximale.
Fonction CombineInto (A, B) {var Len = A.Length; pour (var i = 0; i <len; i = i + 5000) {b.unshift.apply (b, a.slice (i, i + 5000)); }}Attendez, notre lisibilité est reculée. Juste comme ça, cela peut empirer.
Ce qui précède concerne cet article, j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.