una - javascript bidimensional

La forma más rápida de duplicar una matriz en JavaScript: sector contra bucle ''for''

Question

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

Método de rebanada

var dup_array = original_array.slice();

For bucle

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.

Answer 1

Clonar matrices

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

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

Y probado diferente enfoque:

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

Answer 2

¿Qué hay de manera es6?

arr2 = [...arr1];

Answer 3

Armé 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 el sector es mucho más rápido en este caso.

Answer 4

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

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

tuvo 960,589 ops / sec con el subcampeón a.concat() a 578,129 ops / sec, que es del 60%.

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

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

Answer 5

Depende de la longitud de la matriz. Si la longitud de la matriz es <= 1,000,000, los métodos de slice y concat están tomando aproximadamente el mismo tiempo. Pero cuando das un rango más amplio, el método concat gana.

Por ejemplo, prueba 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 método de concat y el método concat están tomando aproximadamente la misma hora (3-4 ms, dependiendo de los números aleatorios).

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

Answer 6

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

Resultados:

Answer 7

Echa un vistazo a: link . No se trata de velocidad, sino de confort. Además, como puede ver, solo puede usar slice (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: link

Answer 8

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

• lazo
• rebanada
• Array.from ()
• concat
• operador de propagación, etc. (tan lento, olvídalo por ahora)

Ha habido un subproceso de jsben.ch/#/wQ9RU proporciona la siguiente información:

• para los navegadores con parpadeo, slice() es el método más rápido, concat() es un poco más lento, y while loop es 2.4x más lento.

• para otros navegadores, while loop es el método más rápido, ya que esos navegadores no tienen optimizaciones internas para slice y concat .

Esto sigue siendo cierto en julio de 2016.

A continuación se muestran los scripts simples que puede copiar y pegar en la consola de su navegador y ejecutar varias veces para ver la imagen. Producen milisegundos, cuanto más bajo 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, el contenido de la matriz se copia por referencia y no se clona en profundidad.

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

Answer 9

Hay una solución mucho más limpia:

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

La verificación de la longitud es obligatoria, ya que el constructor de Array comporta de manera diferente cuando se llama con exactamente un argumento.

Answer 10

La forma más fácil de clonar en profundidad la matriz o el objeto:

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

Answer 11

Modo ECMAScript 2015 con el operador Spread :

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 de propagación
• Sintaxis extendida

Answer 12

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

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

Answer 13

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

myArray.slice(0);

es más rápido que

myArray.slice();

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

Answer 14

Una solución simple:

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

Answer 15

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 tipos de referencia, ninguno de los métodos de división o concat será una cura ... Por lo tanto, una forma adecuada de clonar una matriz es una invención de Array.prototype.clone() como 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));

Answer 16

var cloned_array = [].concat(target_array);