Pour dupliquer un tableau en JavaScript: lequel des éléments suivants est le plus rapide à utiliser?

Méthode de tranche

var dup_array = original_array.slice();

For boucle

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

Je sais que les deux façons ne font qu'une copie superficielle : si original_array contient des références à des objets, les objets ne seront pas clonés, mais seules les références seront copiées, et donc les deux tableaux auront des références aux mêmes objets. Mais ce n'est pas le but de cette question.

Je ne demande que de la vitesse.

Il existe au moins 5 (!) Façons de cloner un tableau:

• boucle
• tranche
• Array.from ()
• concat
• opérateur de propagation (FASTEST)

Il y a eu un thread huuuge BENCHMARKS , fournissant les informations suivantes:

• pour les navigateurs clignotantsslice() est la méthode la plus rapide, concat()un peu plus lente et while loop2,4 fois plus lente.

• pour les autres navigateurs while loopest la méthode la plus rapide, car ces navigateurs n'ont pas d'optimisations internes pour sliceet concat.

Cela reste vrai en juillet 2016.

Vous trouverez ci-dessous des scripts simples que vous pouvez copier-coller dans la console de votre navigateur et exécuter plusieurs fois pour voir l'image. Ils produisent des millisecondes, plus c'est bas, mieux c'est.

en boucle

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

tranche

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

Veuillez noter que ces méthodes cloneront l'objet Array lui-même, cependant le contenu du tableau est copié par référence et n'est pas cloné en profondeur.

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

Techniquement, slice c'est le moyen le plus rapide. Cependant , il est encore plus rapide si vous ajoutez l' 0index de début.

myArray.slice(0);

est plus rapide que

myArray.slice();

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

qu'en est-il de l'es6?

arr2 = [...arr1];

Moyen le plus simple de cloner en profondeur un tableau ou un objet:

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

var cloned_array = [].concat(target_array);

J'ai monté une démo rapide: http://jsbin.com/agugo3/edit

Mes résultats sur Internet Explorer 8 sont 156, 782 et 750, ce qui indiquerait que slicec'est beaucoup plus rapide dans ce cas.

a.map(e => e)est une autre alternative pour ce travail. À ce jour .map()est très rapide (presque aussi rapide que .slice(0)) dans Firefox, mais pas dans Chrome.

D'un autre côté, si un tableau est multidimensionnel, puisque les tableaux sont des objets et que les objets sont des types de référence, aucune des méthodes slice ou concat ne sera un remède ... Donc, une façon appropriée de cloner un tableau est une invention de Array.prototype.clone()as suit.

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

🏁 Le moyen le plus rapide de cloner un tableau

J'ai fait cette fonction utilitaire très simple pour tester le temps qu'il faut pour cloner un tableau. Il n'est pas fiable à 100%, mais il peut vous donner une idée globale du temps nécessaire pour cloner un tableau existant:

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

Et testé une approche différente:

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

MISE À JOUR :
Remarque: sur tous, la seule façon de cloner en profondeur un tableau est d'utiliser JSON.parse(JSON.stringify(arr)).

Cela dit, n'utilisez pas ce qui précède si votre tableau peut inclure des fonctions car il reviendra null.
Merci @GilEpshtain pour cette mise à jour .

Jetez un oeil à: lien . Ce n'est pas une question de vitesse, mais de confort. De plus, comme vous pouvez le voir, vous ne pouvez utiliser la tranche (0) que sur les types primitifs .

Pour créer une copie indépendante d'un tableau plutôt qu'une copie de la référence, vous pouvez utiliser la méthode de tranche de tableau.

Exemple:

Pour créer une copie indépendante d'un tableau plutôt qu'une copie de la référence, vous pouvez utiliser la méthode de tranche de tableau.

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

Pour copier ou cloner un objet:

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: lien

Comme @Dan l'a dit "Cette réponse devient rapidement obsolète. Utilisez des repères pour vérifier la situation réelle", il y a une réponse spécifique de jsperf qui n'a pas eu de réponse pour elle-même: tandis que :

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

avait 960 589 ops / sec avec le runnerup a.concat()à 578,129 ops / sec, qui est 60%.

Il s'agit du dernier Firefox (40) 64 bits.

@aleclarson a créé une nouvelle référence plus fiable.

ECMAScript 2015 façon avec l' Spreadopérateur:

Exemples de base:

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

Essayez dans la console du navigateur:

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

Références

• 6 grandes utilisations de l'opérateur Spread
• Syntaxe de propagation

Cela dépend du navigateur. Si vous regardez dans le billet de blog Array.prototype.slice vs la création manuelle de tableaux , il existe un guide approximatif des performances de chacun:

Résultats:

Il existe une solution beaucoup plus propre:

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

La vérification de la longueur est requise, car le Arrayconstructeur se comporte différemment lorsqu'il est appelé avec exactement un argument.

N'oubliez pas que .slice () ne fonctionnera pas pour les tableaux à deux dimensions. Vous aurez besoin d'une fonction comme celle-ci:

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

Cela dépend de la longueur du tableau. Si la longueur du tableau est <= 1 000 000, les méthodes sliceet concatprennent environ le même temps. Mais quand vous donnez une gamme plus large, la concatméthode gagne.

Par exemple, essayez ce 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();

Si vous définissez la longueur de original_array sur 1 000 000, la sliceméthode etconcat méthode prennent approximativement le même temps (3 à 4 ms, selon les nombres aléatoires).

Si vous définissez la longueur de original_array sur 10 000 000, la sliceméthode prend plus de 60 ms et la concatméthode prend plus de 20 ms.

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

Donc, pour éviter que ces scénarios ne se produisent, utilisez

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

        const cloneArr = Array.from(arr);

Temps de référence!

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>

Le benchmark fonctionnera pendant 10 secondes depuis que vous cliquez sur le bouton.

Mes résultats:

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

Code gagnant:

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

Moteur gagnant:

SpiderMonkey (Mozilla / Firefox)

Des moyens rapides de dupliquer un tableau en JavaScript dans l'ordre:

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

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

#3: array1copy = array1.slice();

Si vos objets tableau contiennent du contenu non sérialisable JSON (fonctions, Number.POSITIVE_INFINITY, etc.), mieux utiliser

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

Vous pouvez suivre ce code. Clone de tableau de façon immuable. C'est le moyen idéal pour cloner un tableau

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

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

Dans ES6, vous pouvez simplement utiliser la syntaxe Spread .

Exemple:

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

Veuillez noter que l'opérateur d'étalement génère un tout nouveau tableau, donc la modification de l'un n'affectera pas l'autre.

Exemple:

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