Introduction à plusieurs méthodes pour implémenter la fusion de tableaux 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 :

var a = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ];
var b = [ "foo", "bar", "baz", "bam", "bun", "fun" ];

Évidemment, le résultat de la combinaison la plus simple devrait être :

[
   1, 2, 3, 4, 5, 6, 7, 8, 9,
   "foo", "bar", "baz", "bam" "bun", "fun"
]

concat(..)

C'est l'approche 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, représentant la combinaison des deux tableaux a et b, et 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 !

a = b = null; // 'a'和'b'就被回收了

Haha. Pour les petits tableaux contenant seulement quelques éléments, cela ne pose aucun problème. Mais pour les grandes baies ou dans les systèmes avec une mémoire limitée qui doivent répéter ce processus fréquemment, il y a en fait beaucoup de marge d'amélioration.

Insertion de boucle

D'accord, copions le contenu d'un tableau dans un autre, en utilisant : Array#push(..)

// `b` onto `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.

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(..) :

// `a` into `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"]

Astuces fonctionnelles

Mais for loop est vraiment moche et difficile à maintenir. Pouvons-nous faire mieux ?

C'est notre premier essai, en utilisant Array#reduce :

// `b` onto `a`:
a = b.reduce( function(coll,item){
    coll.push( item );
    return coll;
}, a );

a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

// or `a` into `b`:
b = a.reduceRight( function(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#reduce(..) et Array#reduceRight(..) sont sympas, mais ils sont un peu maladroits . ES6 => ArrowFunction réduira un peu la quantité de code, mais cela nécessite toujours une fonction qui doit être appelée une fois pour chaque élément, ce qui n'est pas parfait.

Que pensez-vous de celui-ci :

// `b` onto `a`:
a.push.apply( a, b );
a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]
// or `a` into `b`:
b.unshift.apply( b, a );
b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","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 de propagation d'ES6 sera plus belle : a.push(…b) ou b.unshift(…a

Limitation maximale de la longueur du tableau

Le premier problème majeur est la mémoire L'utilisation a doublé (temporairement bien sûr !). Le contenu ajouté copie essentiellement l'élément dans la pile via un appel de fonction. De plus, différents moteurs JS ont des limites sur la longueur des données copiées 🎜> Donc, si le tableau a un. millions d'éléments, vous dépasserez certainement la limite de la pile d'appels autorisée par push(…) ou unshift(…). Hélas, cela fera bien l'affaire avec quelques milliers d'éléments, mais il faut faire attention à ne pas dépasser les 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é va reculer. Cela pourrait empirer à mesure que nous la modifions

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!