Para duplicar una matriz en JavaScript: ¿cuál de los siguientes es más rápido de usar?

Método de corte

var dup_array = original_array.slice();

For lazo

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

Sé que ambas formas solo hacen una copia superficial : si original_array contiene referencias a objetos, los objetos no se clonarán, pero solo se copiarán las referencias y, por lo tanto, ambas matrices tendrán referencias a los mismos objetos. Pero este no es el punto de esta pregunta.

Solo pregunto por la velocidad.

Hay al menos 5 (!) Formas de clonar una matriz:

• lazo
• rebanada
• Array.from ()
• concat
• operador de propagación (MÁS RÁPIDO)

Ha habido un hilo enorme de BENCHMARKS , que proporciona la siguiente información:

• para los navegadores de parpadeoslice() es el método más rápido, concat()es un poco más lento y while loopes 2.4 veces más lento.

• para otros navegadores while loopes el método más rápido, ya que esos navegadores no tienen optimizaciones internas para slicey concat.

Esto sigue siendo cierto en julio de 2016.

A continuación hay scripts simples que puede copiar y pegar en la consola de su navegador y ejecutar varias veces para ver la imagen. Producen milisegundos, menor es mejor.

mientras bucle

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

rebanada

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

Tenga en cuenta que estos métodos clonarán el objeto Array en sí, sin embargo, los contenidos de la matriz se copian por referencia y no se clonan en profundidad.

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

Técnicamente slice es la forma más rápida. Sin embargo , es aún más rápido si agrega el 0índice de inicio.

myArray.slice(0);

es más rápido que

myArray.slice();

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

¿qué pasa con es6 way?

arr2 = [...arr1];

La forma más fácil de clonar profundamente una matriz u objeto:

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

var cloned_array = [].concat(target_array);

Puse una demostración rápida: http://jsbin.com/agugo3/edit

Mis resultados en Internet Explorer 8 son 156, 782 y 750, lo que indicaría que slicees mucho más rápido en este caso.

a.map(e => e)Es otra alternativa para este trabajo. A partir de hoy .map()es muy rápido (casi tan rápido como .slice(0)) en Firefox, pero no en Chrome.

Por otro lado, si una matriz es multidimensional, ya que las matrices son objetos y los objetos son los tipos de referencia, ninguno de los métodos de división o de concat será una cura ... Así que una forma adecuada de la clonación de un array es una invención de Array.prototype.clone()lo sigue.

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

🏁 La forma más rápida de clonar una matriz

Hice esta función de utilidad muy simple para probar el tiempo que lleva clonar una matriz. No es 100% confiable, sin embargo, puede darle una idea general de cuánto tiempo lleva clonar una matriz existente:

function clone(fn) {
    const arr = [...Array(1000000)];
    console.time('timer');
    fn(arr);
    console.timeEnd('timer');
}

Y probado enfoque diferente:

1)   5.79ms -> clone(arr => Object.values(arr));
2)   7.23ms -> clone(arr => [].concat(arr));
3)   9.13ms -> clone(arr => arr.slice());
4)  24.04ms -> clone(arr => { const a = []; for (let val of arr) { a.push(val); } return a; });
5)  30.02ms -> clone(arr => [...arr]);
6)  39.72ms -> clone(arr => JSON.parse(JSON.stringify(arr)));
7)  99.80ms -> clone(arr => arr.map(i => i));
8) 259.29ms -> clone(arr => Object.assign([], arr));
9) Maximum call stack size exceeded -> clone(arr => Array.of(...arr));

ACTUALIZACIÓN :
Nota: de todos ellos, la única forma de clonar en profundidad una matriz es mediante el uso JSON.parse(JSON.stringify(arr)).

Dicho esto, no use lo anterior si su matriz puede incluir funciones, ya que volverá null.
Gracias @GilEpshtain por esta actualización .

Echa un vistazo a: enlace . No se trata de velocidad, sino de comodidad. Además, como puede ver, solo puede usar el segmento (0) en tipos primitivos .

Para hacer una copia independiente de una matriz en lugar de una copia de la referencia, puede usar el método de división de matriz.

Ejemplo:

Para hacer una copia independiente de una matriz en lugar de una copia de la referencia, puede usar el método de división de matriz.

var oldArray = ["mip", "map", "mop"];
var newArray = oldArray.slice();

Para copiar o clonar un objeto:

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

Fuente: enlace

Como @Dan dijo "Esta respuesta se vuelve obsoleta rápidamente. Use puntos de referencia para verificar la situación real", hay una respuesta específica de jsperf que no ha tenido una respuesta por sí misma: mientras que :

var i = a.length;
while(i--) { b[i] = a[i]; }

tuvo 960,589 operaciones / segundo con el segundo puesto a.concat()en 578,129 operaciones / segundo, que es 60%.

Este es el último Firefox (40) de 64 bits.

@aleclarson creó un nuevo punto de referencia más confiable.

Forma ECMAScript 2015 con el Spreadoperador:

Ejemplos básicos:

var copyOfOldArray = [...oldArray]
var twoArraysBecomeOne = [...firstArray, ..seccondArray]

Prueba en la consola del navegador:

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

Referencias

• 6 grandes usos del operador Spread
• Sintaxis extendida

Depende del navegador. Si mira en la publicación del blog Array.prototype.slice vs creación manual de matriz , hay una guía aproximada para el rendimiento de cada uno:

Resultados:

Hay una solución mucho más limpia:

var srcArray = [1, 2, 3];
var clonedArray = srcArray.length === 1 ? [srcArray[0]] : Array.apply(this, srcArray);

Se requiere la verificación de longitud, porque el Arrayconstructor se comporta de manera diferente cuando se llama con exactamente un argumento.

Recuerde .slice () no funcionará para matrices bidimensionales. Necesitará una función como esta:

function copy(array) {
  return array.map(function(arr) {
    return arr.slice();
  });
}

Depende de la longitud de la matriz. Si la longitud de la matriz es <= 1,000,000, los métodos slicey concattardan aproximadamente el mismo tiempo. Pero cuando das un rango más amplio, el concatmétodo gana.

Por ejemplo, intente este código:

var original_array = [];
for(var i = 0; i < 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 < 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 < 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 < 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();

Si establece la longitud de original_array en 1,000,000, el slicemétodo yconcat método demoran aproximadamente el mismo tiempo (3-4 ms, dependiendo de los números aleatorios).

Si establece la longitud de original_array en 10,000,000, entonces el slicemétodo toma más de 60 ms y el concatmétodo toma más de 20 ms.

Una solución simple:

original = [1,2,3]
cloned = original.map(x=>x)

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

Entonces, para evitar que ocurran estos escenarios, use

        const arr = ['1', '2', '3'];

        const cloneArr = Array.from(arr);

Tiempo de referencia!

function log(data) {
  document.getElementById("log").textContent += data + "\n";
}

benchmark = (() => {
  time_function = function(ms, f, num) {
    var z = 0;
    var t = new Date().getTime();
    for (z = 0;
      ((new Date().getTime() - t) < ms); z++)
      f(num);
    return (z)
  }

  function clone1(arr) {
    return arr.slice(0);
  }

  function clone2(arr) {
    return [...arr]
  }

  function clone3(arr) {
    return [].concat(arr);
  }

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

  function clone4(arr) {
    return arr.clone();
  }


  function benchmark() {
    function compare(a, b) {
      if (a[1] > b[1]) {
        return -1;
      }
      if (a[1] < b[1]) {
        return 1;
      }
      return 0;
    }

    funcs = [clone1, clone2, clone3, clone4];
    results = [];
    funcs.forEach((ff) => {
      console.log("Benchmarking: " + ff.name);
      var s = time_function(2500, ff, Array(1024));
      results.push([ff, s]);
      console.log("Score: " + s);

    })
    return results.sort(compare);
  }
  return benchmark;
})()
log("Starting benchmark...\n");
res = benchmark();

console.log("Winner: " + res[0][0].name + " !!!");
count = 1;
res.forEach((r) => {
  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 + ")");
});
log("\nWinner code:\n");
log(res[0][0].toString());

<textarea rows="50" cols="80" style="font-size: 16; resize:none; border: none;" id="log"></textarea>

El punto de referencia se ejecutará durante 10 segundos desde que hace clic en el botón.

Mis resultados:

Chrome (motor V8):

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 (motor SpiderMonkey):

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)

Código de ganador:

function clone1(arr) {
    return arr.slice(0);
}

Motor ganador:

SpiderMonkey (Mozilla / Firefox)

Formas rápidas de duplicar una matriz en JavaScript en orden:

#1: array1copy = [...array1];

#2: array1copy = array1.slice(0);

#3: array1copy = array1.slice();

Si sus objetos de matriz contienen algún contenido no serializable JSON (funciones, Number.POSITIVE_INFINITY, etc.), mejor usar

array1copy = JSON.parse(JSON.stringify(array1))

Puedes seguir este código. Forma inmutable matriz clon. Esta es la manera perfecta de clonar en matriz

const array = [1, 2, 3, 4]

const newArray = [...array]
newArray.push(6)
console.log(array)
console.log(newArray)

En ES6, simplemente puede utilizar la sintaxis Spread .

Ejemplo:

let arr = ['a', 'b', 'c'];
let arr2 = [...arr];

Tenga en cuenta que el operador de propagación genera una matriz completamente nueva, por lo que modificar una no afectará a la otra.

Ejemplo:

arr2.push('d') // becomes ['a', 'b', 'c', 'd']
console.log(arr) // while arr retains its values ['a', 'b', 'c']