Explication détaillée de plusieurs méthodes de fusion de tableaux JavaScript

Cet article présente principalement diverses méthodes de fusion de Tableaux JavaScript en détail. Les amis intéressés peuvent se référer à

Ceci est un article simple sur JavaScriptQuelques conseils pour utiliser les tableaux. 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 Soit A et B reste inchangé. 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' et 'b' sont recyclés

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.

BoucleInsérer

Bien, 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 contient 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"]

Conseils de fonction

Mais

for loop Il est en effet moche et difficile à entretenir. 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.

Et 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 que l'utilisation de la mémoire 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 🎜> Ainsi, si le tableau contient un million 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, revenons à cela, cela pourrait empirer à mesure que nous le 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!