Question Moyen le plus rapide Javascript de dupliquer un tableau - tranche vs boucle


Afin de dupliquer un tableau en Javascript,

Est-ce que quelqu'un sait (et peut-être testé) s'il est plus rapide à utiliser:

Méthode de tranche:

var dup_array = original_array.slice();

ou Pour la boucle:

for(var i = 0, len = original_array.length; i < len; ++i)
   dup_array[i] = original_array[i];

MISE À JOUR: (juste pour clarifier moi-même) je sais que les deux façons font seulement un copie superficielle: si original_array contient des références à des objets, les objets ne seront pas clonés, mais seules les références seront copiées. Par conséquent, les deux tableaux auront des références aux mêmes objets. Mais ce n'est pas le but de cette question.

Je ne demande que de la vitesse.


461
2017-10-20 13:43


origine


Réponses:


Il y a au moins 5 (!) façons de cloner un tableau:

  • boucle
  • tranche
  • Array.from ()
  • concat
  • opérateur de propagation, etc. (si lent, oubliez-le pour l'instant) 

Il y a eu un huuuge BENCHMARKS fil, fournissant les informations suivantes:

  • pour cligner navigateurs slice() est la méthode la plus rapide, concat() est un peu plus lent, et while loop est 2.4x plus lent.

  • pour les autres navigateurs while loop est la méthode la plus rapide, car ces navigateurs n'ont pas d'optimisations internes pour slice et concat.

Cela reste vrai en juillet 2016.

Voici des scripts simples que vous pouvez copier-coller dans la console de votre navigateur et exécuter plusieurs fois pour voir l'image. Ils sortent en millisecondes, plus bas est mieux.

en boucle

n = 1000*1000;
start = + new Date();
a = Array(n); 
b = Array(n); 
i = a.length;
while(i--) b[i] = a[i];
console.log(new Date() - start);

tranche 

n = 1000*1000;
start = + new Date();
a = Array(n); 
b = a.slice();
console.log(new Date() - start);

Veuillez noter que ces méthodes vont cloner l'objet Array lui-même, mais le contenu du tableau est copié par référence et n'est pas cloné en profondeur.

origAr == clonedArr //returns false
origAr[0] == clonedArr[0] //returns true

611
2017-12-12 15:42



Techniquement slice EST le moyen le plus rapide, TOUTEFOIS c'est encore plus rapide si vous ajoutez le 0 commencer l'index.

myArray.slice(0);

est plus rapide que,

myArray.slice();

http://jsperf.com/cloning-arrays/3


160
2018-02-02 18:11



Qu'en est-il de la manière es6?

arr2 = [...arr1];

77
2017-07-06 16:34



La manière la plus simple de cloner en profondeur Array ou Object:

var dup_array = JSON.parse(JSON.stringify(original_array))

37
2018-05-05 20:23



J'ai mis en place une démo rapide. http://jsbin.com/agugo3/edit

mes résultats sur IE8 sont 156/782/750, ce qui indiquerait slice est beaucoup plus rapide dans ce cas.


24
2017-10-20 14:06



var cloned_array = [].concat(target_array);

23
2017-10-05 12:00



Puisque personne n'a encore mentionné a.map(e => e) est une autre alternative pour ce travail. À partir d'aujourd'hui .map() est très rapide (presque aussi vite que .slice(0)) en FF mais pas en Chrome.

D'un autre côté, si un tableau est multidimensionnel puisque les tableaux sont des objets et que les objets sont des types de référence, aucune des méthodes de tranche ou de concat ne sera un remède ... Array.prototype.clone() comme suit;

Array.prototype.clone = function(){
  return this.map(e => Array.isArray(e) ? e.clone() : e);
};

var arr = [ 1, 2, 3, 4, [ 1, 2, [ 1, 2, 3 ], 4 , 5], 6 ],
    brr = arr.clone();
brr[4][2][1] = "two";
console.log(JSON.stringify(arr));
console.log(JSON.stringify(brr));


15
2018-05-28 21:32



Cela dépend du navigateur. Si vous regardez le lien ci-dessous, il y a un guide approximatif de la performance de chacun: http://weblogs.asp.net/alexeigorkov/archive/2008/02/18/array-prototype-slice-vs-manual-array-creation.aspx

enter image description here

Résultats:

enter image description here


7
2017-10-20 13:55