Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fastest way to duplicate an array in JavaScript - slice vs. 'for' loop

In order to duplicate an array in JavaScript: Which of the following is faster to use?

Slice method

var dup_array = original_array.slice(); 

For loop

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

I know both ways do only a shallow copy: if original_array contains references to objects, objects won't be cloned, but only the references will be copied, and therefore both arrays will have references to the same objects. But this is not the point of this question.

I'm asking only about speed.

like image 869
Marco Demaio Avatar asked Oct 20 '10 13:10

Marco Demaio


People also ask

Does JavaScript slice make a copy?

slice does not alter the original array. It returns a shallow copy of elements from the original array. Elements of the original array are copied into the returned array as follows: For objects, slice copies object references into the new array.

How do you duplicate an array in JavaScript?

To duplicate an array, just return the element in your map call. numbers = [1, 2, 3]; numbersCopy = numbers. map((x) => x); If you'd like to be a bit more mathematical, (x) => x is called identity.

How do you make a shallow copy of an array?

Array Clone – Shallow Copy In Java, to create clone of array, you should use clone() method of array. It creates a shallow copy of array. Cloning always creates shallow copy of array. Any change (in original array) will be reflected in cloned array as well.

How do you duplicate an array?

If you want to copy the first few elements of an array or a full copy of an array, you can use Arrays. copyOf() method. Arrays. copyOfRange() is used to copy a specified range of an array.


1 Answers

There are at least 6 (!) ways to clone an array:

  • loop
  • slice
  • Array.from()
  • concat
  • spread operator (FASTEST)
  • map A.map(function(e){return e;});

There has been a huuuge BENCHMARKS thread, providing following information:

  • for blink browsers slice() is the fastest method, concat() is a bit slower, and while loop is 2.4x slower.

  • for other browsers while loop is the fastest method, since those browsers don't have internal optimizations for slice and concat.

This remains true in Jul 2016.

Below are simple scripts that you can copy-paste into your browser's console and run several times to see the picture. They output milliseconds, lower is better.

while loop

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); 

slice

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

Please note that these methods will clone the Array object itself, array contents however are copied by reference and are not deep cloned.

origAr == clonedArr //returns false origAr[0] == clonedArr[0] //returns true 
like image 140
Dan Avatar answered Oct 04 '22 04:10

Dan