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:
La copie de code est la 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:
La copie de code est la suivante:
[
1, 2, 3, 4, 5, 6, 7, 8, 9,
"foo", "bar", "baz", "bam" "bun", "fun"
]]
Concat (..)
C'est la pratique la plus courante:
La copie de code est la suivante:
var c = a.concat (b);
un; // [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 (..)
La copie de code est la suivante:
// `b` sur` a`
pour (var i = 0; i <b.length; i ++) {
a.push (b [i]);
}
un; // [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 (..):
La copie de code est la suivante:
// `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", "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:
La copie de code est la suivante:
// `b` sur` a`:
a = b.reduce (fonction (coll, item) {
coll.push (élément);
Retour Coll;
}, un );
un; // [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 (article);
Retour 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:
La copie de code est la suivante:
// `b` sur` a`:
a.push.apply (a, b);
un; // [1,2,3,4,5,6,7,8,9, "foo", "bar", "baz", "bam", "bun", "fun"]
// ou `a` dans` 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.unshift (... a
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 au-delà 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 ce problème comme push (...) et un décalage (...).
Il existe un moyen d'éviter cette limite de longueur maximale.
La copie de code est la suivante:
fonction combiningInto (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. C'est ça, ça peut empirer, haha.