So duplizieren Sie ein Array in JavaScript: Welche der folgenden Optionen ist schneller zu verwenden?

Schnittmethode

var dup_array = original_array.slice();

For Schleife

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

Ich weiß, dass beide Methoden nur eine flache Kopie erstellen: Wenn original_array Verweise auf Objekte enthält, werden Objekte nicht geklont, sondern nur die Verweise werden kopiert, und daher haben beide Arrays Verweise auf dieselben Objekte. Dies ist jedoch nicht der Punkt dieser Frage.

Ich frage nur nach Geschwindigkeit.

Es gibt mindestens 5 (!) Möglichkeiten, ein Array zu klonen:

• Schleife
• Scheibe
• Array.from ()
• concat
• Spread Operator (SCHNELLSTES)

Es gab einen riesigen BENCHMARKS-Thread mit folgenden Informationen:

• Für Blink- Browser slice()ist dies die schnellste Methode, concat()etwas langsamer und while loop2,4-mal langsamer.

• für andere Browser while loopist die schnellste Methode, da diese Browser keine internen Optimierungen für sliceund haben concat.

Dies gilt auch im Juli 2016.

Im Folgenden finden Sie einfache Skripte, die Sie kopieren, in die Konsole Ihres Browsers einfügen und mehrmals ausführen können, um das Bild anzuzeigen. Sie geben Millisekunden aus, niedriger ist besser.

while-Schleife

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

Scheibe

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

Beachten Sie, dass diese Methoden das Array-Objekt selbst klonen. Der Inhalt des Arrays wird jedoch als Referenz kopiert und nicht tief geklont.

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

Technisch slice ist der schnellste Weg. Allerdings ist es noch schneller , wenn Sie das Add - 0Index beginnen.

myArray.slice(0);

ist schneller als

myArray.slice();

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

was ist mit es6 weg?

arr2 = [...arr1];

Der einfachste Weg, ein Array oder Objekt tief zu klonen:

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

var cloned_array = [].concat(target_array);

Ich habe eine kurze Demo zusammengestellt: http://jsbin.com/agugo3/edit

Meine Ergebnisse in Internet Explorer 8 sind 156, 782 und 750, was darauf hinweist, dass dies slicein diesem Fall viel schneller ist.

a.map(e => e)ist eine weitere Alternative für diesen Job. Ab heute .map()ist .slice(0)in Firefox sehr schnell (fast so schnell wie ), aber nicht in Chrome.

Wenn andererseits ein Array mehrdimensional ist, da Arrays Objekte und Objekte Referenztypen sind, ist keine der Slice- oder Concat-Methoden eine Heilung ... Ein geeigneter Weg zum Klonen eines Arrays ist also eine Erfindung von Array.prototype.clone()as folgt.

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

🏁 Schnellster Weg zum Klonen eines Arrays

Ich habe diese sehr einfache Dienstprogrammfunktion erstellt, um die Zeit zu testen, die zum Klonen eines Arrays benötigt wird. Es ist nicht 100% zuverlässig, kann Ihnen jedoch eine umfassende Vorstellung davon geben, wie lange es dauert, ein vorhandenes Array zu klonen:

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

Und verschiedene Ansätze getestet:

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

UPDATE :
Hinweis: Von allen ist die einzige Möglichkeit, ein Array tief zu klonen, die Verwendung von JSON.parse(JSON.stringify(arr)).

Verwenden Sie das oben Gesagte jedoch nicht, wenn Ihr Array möglicherweise Funktionen enthält, die zurückgegeben werden null.
Vielen Dank an @GilEpshtain für dieses Update .

Schauen Sie sich an: Link . Es geht nicht um Geschwindigkeit, sondern um Komfort. Außerdem können Sie, wie Sie sehen, Slice (0) nur für primitive Typen verwenden .

Sie können die Array-Slice-Methode verwenden, um eine unabhängige Kopie eines Arrays zu erstellen, anstatt eine Kopie der Referenz darauf.

Beispiel:

Sie können die Array-Slice-Methode verwenden, um eine unabhängige Kopie eines Arrays zu erstellen, anstatt eine Kopie der Referenz darauf.

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

So kopieren oder klonen Sie ein Objekt:

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

Quelle: Link

Wie @Dan sagte "Diese Antwort ist schnell veraltet. Verwenden Sie Benchmarks , um die tatsächliche Situation zu überprüfen", gibt es eine spezifische Antwort von jsperf, die keine Antwort für sich hatte: while :

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

hatte 960.589 Ops / Sek. mit dem zweiten Platz a.concat()bei 578.129 Ops / Sek., was 60% entspricht.

Dies ist das neueste 64-Bit-Firefox (40).

@aleclarson hat einen neuen, zuverlässigeren Benchmark erstellt.

ECMAScript 2015 Weg mit dem SpreadBetreiber:

Grundlegende Beispiele:

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

Versuchen Sie es in der Browserkonsole:

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

Verweise

• 6 großartige Anwendungen des Spread-Operators
• Syntax verbreiten

Das hängt vom Browser ab. Wenn Sie sich den Blog-Beitrag Array.prototype.slice im Vergleich zur manuellen Array-Erstellung ansehen , gibt es eine grobe Anleitung zur Leistung der einzelnen:

Ergebnisse:

Es gibt eine viel sauberere Lösung:

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

Die Längenprüfung ist erforderlich, da sich der ArrayKonstruktor anders verhält, wenn er mit genau einem Argument aufgerufen wird.

Denken Sie daran, dass .slice () für zweidimensionale Arrays nicht funktioniert. Sie benötigen eine Funktion wie diese:

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

Dies hängt von der Länge des Arrays ab. Wenn die Arraylänge ist <= 1000000, die sliceund concatnehmen Methoden etwa zur gleichen Zeit. Wenn Sie jedoch einen größeren Bereich concatangeben, gewinnt die Methode.

Versuchen Sie zum Beispiel diesen Code:

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

Wenn Sie die Länge von original_array auf 1.000.000 festlegen, dauern sliceMethode und concatMethode ungefähr dieselbe Zeit (3-4 ms, abhängig von den Zufallszahlen).

Wenn Sie die Länge von original_array auf 10.000.000 festlegen, slicedauert die Methode über 60 ms und die concatMethode über 20 ms.

Eine einfache Lösung:

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

Um diese Szenarien zu vermeiden, verwenden Sie

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

        const cloneArr = Array.from(arr);

Benchmark-Zeit!

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>

Der Benchmark wird 10 Sekunden lang ausgeführt, da Sie auf die Schaltfläche klicken.

Meine Ergebnisse:

Chrom (V8-Motor):

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)

Gewinnercode:

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

Gewinner Motor:

SpiderMonkey (Mozilla / Firefox)

Schnelle Möglichkeiten zum Duplizieren eines Arrays in JavaScript in der folgenden Reihenfolge:

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

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

#3: array1copy = array1.slice();

Wenn Ihre Array-Objekte nicht serialisierbaren JSON-Inhalt (Funktionen, Number.POSITIVE_INFINITY usw.) enthalten, ist dies besser zu verwenden

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

Sie können diesem Code folgen. Unveränderlicher Weg Array-Klon. Dies ist der perfekte Weg zum Klonen von Arrays

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

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

In ES6 können Sie einfach die Spread-Syntax verwenden .

Beispiel:

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

Bitte beachten Sie, dass der Spread-Operator ein völlig neues Array generiert, sodass sich das Ändern eines Arrays nicht auf das andere auswirkt.

Beispiel:

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