Per duplicare un array in JavaScript: quale dei seguenti è più veloce da usare?

Metodo Slice

var dup_array = original_array.slice();

For ciclo continuo

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

Conosco entrambi i modi per fare solo una copia superficiale : se original_array contiene riferimenti ad oggetti, gli oggetti non verranno clonati, ma solo i riferimenti verranno copiati e quindi entrambi gli array avranno riferimenti agli stessi oggetti. Ma questo non è il punto di questa domanda.

Sto chiedendo solo della velocità.

Esistono almeno 5 (!) Modi per clonare un array:

• ciclo continuo
• fetta
• Array.from ()
• concat
• operatore di diffusione (FASTEST)

C'è stato un grande thread BENCHMARKS , che fornisce le seguenti informazioni:

• per i browser lampeggiantislice() è il metodo più veloce, concat()è un po 'più lento ed while loopè 2,4 volte più lento.

• per altri browser while loopè il metodo più veloce, dal momento che quei browser non hanno ottimizzazioni interne per slicee concat.

Questo rimane vero a luglio 2016.

Di seguito sono riportati semplici script che è possibile copiare e incollare nella console del browser ed eseguire più volte per visualizzare l'immagine. Producono millisecondi, più basso è meglio.

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

fetta

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

Si noti che questi metodi cloneranno l'oggetto Array stesso, tuttavia i contenuti dell'array vengono copiati per riferimento e non vengono clonati in profondità.

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

Tecnicamente slice è il modo più veloce. Tuttavia , è ancora più veloce se aggiungi l' 0indice iniziale.

myArray.slice(0);

è più veloce di

myArray.slice();

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

che dire di es6 way?

arr2 = [...arr1];

Il modo più semplice per eseguire la clonazione profonda di array o oggetti:

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

var cloned_array = [].concat(target_array);

Ho messo insieme una breve demo: http://jsbin.com/agugo3/edit

I miei risultati su Internet Explorer 8 sono 156, 782 e 750, il che indicherebbe slice è molto più veloce in questo caso.

a.map(e => e)è un'altra alternativa per questo lavoro. Ad oggi .map()è molto veloce (quasi altrettanto veloce .slice(0)) in Firefox, ma non in Chrome.

D'altra parte, se un array è multidimensionale, poiché gli array sono oggetti e gli oggetti sono tipi di riferimento, nessuno dei metodi fetta o concat sarà una cura ... Quindi un modo corretto di clonazione una matrice è un'invenzione Array.prototype.clone()come segue.

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

🏁 Il modo più veloce per clonare un array

Ho creato questa semplice utility per testare il tempo necessario per clonare un array. Non è affidabile al 100%, tuttavia può darti un'idea generale di quanto tempo ci vuole per clonare un array esistente:

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

E testato un approccio diverso:

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

AGGIORNAMENTO :
Nota: tra tutti, l'unico modo per clonare in profondità un array è usare JSON.parse(JSON.stringify(arr)).

Detto questo, non utilizzare quanto sopra se l'array potrebbe includere funzioni in quanto tornerà null.
Grazie @GilEpshtain per questo aggiornamento .

Dai un'occhiata a: link . Non si tratta di velocità, ma di comfort. Inoltre, come puoi vedere, puoi usare solo slice (0) su tipi primitivi .

Per creare una copia indipendente di un array anziché una copia del riferimento ad esso, è possibile utilizzare il metodo slice dell'array.

Esempio:

Per creare una copia indipendente di un array anziché una copia del riferimento ad esso, è possibile utilizzare il metodo slice dell'array.

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

Per copiare o clonare un oggetto:

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

Fonte: link

Come ha detto @Dan "Questa risposta diventa obsoleta rapidamente. Usa i benchmark per verificare la situazione reale", c'è una risposta specifica da jsperf che non ha avuto una risposta per sé: while :

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

aveva 960.589 operazioni al secondo con il secondo classificato a.concat() a 578.129 ops / sec, che è del 60%.

Questo è l'ultimo Firefox (40) a 64 bit.

@aleclarson ha creato un nuovo benchmark più affidabile.

ECMAScript 2015 con il Spread operatore:

Esempi di base:

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

Prova nella console del browser:

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

Riferimenti

• 6 Grandi usi dell'operatore di diffusione
• Diffondere la sintassi

Dipende dal browser. Se guardi nel post del blog Array.prototype.slice vs creazione manuale dell'array , c'è una guida approssimativa alle prestazioni di ciascuno:

risultati:

C'è una soluzione molto più pulita:

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

È necessario il controllo della lunghezza, poiché il Arraycostruttore si comporta in modo diverso quando viene chiamato con esattamente un argomento.

Ricorda .slice () non funzionerà con array bidimensionali. Avrai bisogno di una funzione come questa:

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

Dipende dalla lunghezza dell'array. Se la lunghezza dell'array è <= 1.000.000, i metodi slicee concatimpiegano all'incirca allo stesso tempo. Ma quando dai una gamma più ampia, ilconcat metodo vince.

Ad esempio, prova questo codice:

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

Se si imposta la lunghezza di original_array su 1.000.000, il slicemetodo econcat metodo impiegano all'incirca lo stesso tempo (3-4 ms, a seconda dei numeri casuali).

Se si imposta la lunghezza di original_array su 10.000.000, il slicemetodo richiede oltre 60 ms e il concatmetodo richiede oltre 20 ms.

Una soluzione semplice:

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

Quindi, per evitare che si verifichino questi scenari, utilizzare

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

        const cloneArr = Array.from(arr);

Tempo di benchmark!

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>

Il benchmark verrà eseguito per 10 secondi da quando si fa clic sul pulsante.

I miei risultati:

Chrome (motore 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 (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)

Codice del vincitore:

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

Motore vincitore:

SpiderMonkey (Mozilla / Firefox)

Modi rapidi per duplicare un array in JavaScript in ordine:

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

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

#3: array1copy = array1.slice();

Se gli oggetti dell'array contengono contenuti JSON non serializzabili (funzioni, Number.POSITIVE_INFINITY, ecc.) Che è meglio usare

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

Puoi seguire questo codice. Clone di array a modalità immutabile. Questo è il modo perfetto per eseguire la clonazione di array

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

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

In ES6, puoi semplicemente utilizzare la sintassi Spread .

Esempio:

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

Si noti che l'operatore spread genera un array completamente nuovo, quindi la modifica di uno non influirà sull'altro.

Esempio:

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