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

Question

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  lt  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

User · Answer

var cloned array      concat target array

User · Answer

Easiest way to deep clone Array or Object   var dup array   JSON parse JSON stringify original array

User · Answer

A simple solution   original    1 2 3  cloned   original map x  gt x

User · Answer

I put together a quick demo  http   jsbin com agugo3 edit  My results on Internet nbsp Explorer nbsp 8 are 156  782  and 750  which would indicate slice is much faster in this case

User · Answer

As  Dan said  This answer becomes outdated fast  Use benchmarks to check the actual situation   there is one specific answer from jsperf that has not had an answer for itself  while   var i   a length  while i--    b i    a i       had 960 589 ops sec with the runnerup a concat   at 578 129 ops sec  which is 60    This is the lastest Firefox  40  64 bit      aleclarson created a new  more reliable benchmark

User · Answer

There is a much cleaner solution   var srcArray    1  2  3   var clonedArray   srcArray length     1    srcArray 0     Array apply this  srcArray     The length check is required  because the Array constructor behaves differently when it is called with exactly one argument

User · Answer

ECMAScript 2015 way with the Spread operator   Basic examples   var copyOfOldArray       oldArray  var twoArraysBecomeOne       firstArray    seccondArray    Try in the browser console   var oldArray    1  2  3  var copyOfOldArray       oldArray  console log oldArray  console log copyOfOldArray   var firstArray    5  6  7  var seccondArray     a    b    c   var twoArraysBecomOne       firstArray     seccondArray  console log twoArraysBecomOne     References   6 Great Uses of the Spread Operator  Spread syntax

User · Answer

It depends on the browser  If you look in the blog post Array prototype slice vs manual array creation  there is a rough guide to performance of each     Results

User · Answer

Technically slice is the fastest way  However  it is even faster if you add the 0 begin index   myArray slice 0     is faster than  myArray slice      http   jsperf com cloning-arrays 3

User · Answer

Benchmark time    x000D   x000D  function log data    x000D    document getElementById  log   textContent    data     n   x000D    x000D   x000D  benchmark         gt    x000D    time function   function ms  f  num    x000D      var z   0  x000D      var t   new Date   getTime    x000D      for  z   0  x000D          new Date   getTime   - t   lt  ms   z    x000D        f num   x000D      return  z  x000D      x000D   x000D    function clone1 arr    x000D      return arr slice 0   x000D      x000D   x000D    function clone2 arr    x000D      return     arr  x000D      x000D   x000D    function clone3 arr    x000D      return    concat arr   x000D      x000D   x000D    Array prototype clone   function     x000D      return this map e   gt  Array isArray e    e clone     e   x000D       x000D   x000D    function clone4 arr    x000D      return arr clone    x000D      x000D   x000D   x000D    function benchmark     x000D      function compare a  b    x000D        if  a 1   gt  b 1     x000D          return -1  x000D          x000D        if  a 1   lt  b 1     x000D          return 1  x000D          x000D        return 0  x000D        x000D   x000D      funcs    clone1  clone2  clone3  clone4   x000D      results       x000D      funcs forEach  ff    gt    x000D        console log  Benchmarking      ff name   x000D        var s   time function 2500  ff  Array 1024    x000D        results push  ff  s    x000D        console log  Score      s   x000D   x000D         x000D      return results sort compare   x000D      x000D    return benchmark  x000D       x000D  log  Starting benchmark    n    x000D  res   benchmark    x000D   x000D  console log  Winner      res 0  0  name            x000D  count   1  x000D  res forEach  r    gt    x000D    log  count             r 0  name     score      Math floor 10000   r 1    res 0  1     100     count    2        winner        speed of winner             Math round r 1    100    100         x000D      x000D  log   nWinner code  n    x000D  log res 0  0  toString     x000D   lt textarea rows  50  cols  80  style  font-size  16  resize none  border  none   id  log  gt  lt  textarea gt  x000D   x000D   x000D       The benchmark will run for 10s since you click the button    My results     Chrome  V8 engine      1  clone1 score  100   winner   4110764  2  clone3 score  74 32  speed of winner   3055225  3  clone2 score  30 75  speed of winner   1264182  4  clone4 score  21 96  speed of winner   902929    Firefox  SpiderMonkey Engine      1  clone1 score  100   winner   8448353  2  clone3 score  16 44  speed of winner   1389241  3  clone4 score  5 69  speed of winner   481162  4  clone2 score  2 27  speed of winner   192433       Winner code    function clone1 arr        return arr slice 0          Winner engine       SpiderMonkey  Mozilla Firefox

User · Answer

Take a look at  link  It s not about speed  but comfort  Besides as you can see you can only use slice 0  on primitive types   To make an independent copy of an array rather than a copy of the refence to it  you can use the array slice method   Example      To make an independent copy of an array rather than a copy of the refence to it  you can use the array slice method   var oldArray     mip    map    mop    var newArray   oldArray slice          To copy or clone an object    function cloneObject source        for  i in source            if  typeof source i      source                 this i    new cloneObject source i                      else              this i    source i                var obj1   bla  blabla  foo  foofoo  etc  etc    var obj2  new cloneObject obj1      Source  link

User · Answer

If you want a REAL cloned object array in JS with cloned references of all attributes and sub-objects  export function clone arr        return JSON parse JSON stringify arr      ALL other operations do not create clones  because they just change the base address of the root element  not of the included objects  Except you traverse recursive through the object-tree  For a simple copy  these are OK  For storage address relevant operations I suggest  and in most all other cases  because this is fast   to type convert into string and back in a complete new object

User · Answer

Fastest Way to Clone an Array I made this very plain utility function to test the time that it takes to clone an array  It is not 100  reliable however it can give you a bulk idea as for how long it takes to clone an existing array  function clone fn      const arr       Array 1000000      console time  timer      fn arr     console timeEnd  timer       And tested different approach  1    5 79ms - gt  clone arr   gt  Object values arr    2    7 23ms - gt  clone arr   gt     concat arr    3    9 13ms - gt  clone arr   gt  arr slice     4   24 04ms - gt  clone arr   gt    const a       for  let val of arr    a push val     return a      5   30 02ms - gt  clone arr   gt      arr    6   39 72ms - gt  clone arr   gt  JSON parse JSON stringify arr     7   99 80ms - gt  clone arr   gt  arr map i   gt  i    8  259 29ms - gt  clone arr   gt  Object assign     arr    9  Maximum call stack size exceeded - gt  clone arr   gt  Array of    arr      UPDATE   Tests were made back in 2018  so today most likely you ll get different result with current browsers  Out of all of those  the only way to deep clone an array is by using JSON parse JSON stringify arr    That said  do not use the above if your array might include functions as it will return null Thank you  GilEpshtain for this update

User · Answer

You can follow this code  Immutable way array clone  This is the perfect way to array cloning   const array    1  2  3  4   const newArray       array  newArray push 6  console log array  console log newArray

User · Answer

const arr     1    2    3                 Old way         const cloneArr   arr slice                ES6 way         const cloneArrES6       arr       But problem with 3rd approach is that if you are using muti-dimensional      array  then only first level is copied          const nums                    1  2                   10                        const cloneNums       nums       Let s change the first item in the first nested item in our cloned array           cloneNums 0  0     8            console log cloneNums                      8   2      10      300                 NOOooo  the original is also affected         console log nums                     8   2      10      300       So  in order to avoid these scenarios to happen  use           const arr     1    2    3             const cloneArr   Array from arr

User · Answer

It depends on the length of the array  If the array length is  lt   1 000 000  the slice and concat methods are taking approximately the same time  But when you give a wider range  the concat method wins   For example  try this code   var original array       for var i   0  i  lt  10000000  i           original array push  Math floor Math random     1000000   1       function a1         var dup           var start   Date now        dup   original array slice        var end   Date now        console log  slice method takes      end - start      ms       function a2         var dup           var start   Date now        dup   original array concat          var end   Date now        console log  concat method takes      end - start      ms       function a3         var dup           var start   Date now        for var i   0  i  lt  original array length  i               dup push original array i              var end   Date now        console log  for loop with push method takes      end - start      ms       function a4         var dup           var start   Date now        for var i   0  i  lt  original array length  i               dup i    original array i             var end   Date now        console log  for loop with   method takes      end - start      ms       function a5         var dup   new Array original array length      var start   Date now        for var i   0  i  lt  original array length  i               dup push original array i              var end   Date now        console log  for loop with   method and array constructor takes      end - start      ms       a1    a2    a3    a4    a5      If you set the length of original array to 1 000 000  the slice method and concat method are taking approximately the same time  3-4 nbsp ms  depending on the random numbers    If you set the length of original array to 10 000 000  then the slice method takes over 60 nbsp ms and the concat method takes over 20 nbsp ms

User · Answer

Fast ways to duplicate an array in JavaScript in Order    1  array1copy       array1     2  array1copy   array1 slice 0     3  array1copy   array1 slice     If your array objects contain some JSON-non-serializable content  functions  Number POSITIVE INFINITY  etc   better to use   array1copy   JSON parse JSON stringify array1

User · Answer

In ES6  you can simply utilize the Spread syntax   Example   let arr     a    b    c    let arr2       arr     Please note that the spread operator generates a completely new array  so modifying one won t affect the other   Example   arr2 push  d      becomes   a    b    c    d   console log arr     while arr retains its values   a    b    c

User · Answer

what about es6 way   arr2       arr1

User · Answer

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

User · Answer

a map e   gt  e  is another alternative for this job  As of today  map   is very fast  almost as fast as  slice 0   in Firefox  but not in Chrome   On the other hand  if an array is multi-dimensional  since arrays are objects and objects are reference types  none of the slice or concat methods will be a cure    So one proper way of cloning an array is an invention of Array prototype clone   as follows    x000D   x000D  Array prototype clone   function    x000D    return this map e   gt  Array isArray e    e clone     e   x000D     x000D   x000D  var arr     1  2  3  4    1  2    1  2  3    4   5   6    x000D      brr   arr clone    x000D  brr 4  2  1     two   x000D  console log JSON stringify arr    x000D  console log JSON stringify brr    x000D   x000D   x000D

User · Answer

Fastest way to clone an Array of Objects will be using spread operator var clonedArray     originalArray   but the objects inside that cloned array will still pointing at the old memory location  hence change to clonedArray objects will also change the orignalArray  var clonedArray   originalArray map      ele     gt   return ele    this will not only create new array but also the objects will be cloned to

User · Answer

Remember  slice   won t work for two-dimensional arrays  You ll need a function like this   function copy array      return array map function arr        return arr slice

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

Examples related to javascript

Examples related to arrays

Examples related to duplicates

Examples related to copy

Examples related to slice