Copie d'un tableau par valeur en javascript

Question

Lors de la copie d'un tableau en javascript vers un autre tableau :

var arr1 = ['a','b','c'];
var arr2 = arr1;
arr2.push('d');  //now, arr1 = ['a','b','c','d']

J'ai réalisé que arr2 fait référence au même tableau que arr1 plutôt qu'un nouveau tableau indépendant. Comment puis-je copier le tableau pour obtenir deux tableaux indépendants ? L'utilisation de jQuery serait idéale.

Answer 1

Utilisez ça :

var arr2 = arr1.slice(0);

En gros, le tranche() clone le tableau et renvoie la référence au nouveau tableau. Notez également que :

• Pour les références d'objets (et non l'objet réel), slice copie les références d'objets dans le nouveau tableau. L'original et le nouveau tableau font tous deux référence au même objet. Si un objet référencé change, les changements sont visibles à la fois dans le nouveau tableau et dans le tableau original.
• Pour les chaînes de caractères et les nombres, slice copie les chaînes de caractères et les nombres dans le nouveau tableau. Les modifications apportées à la chaîne ou au nombre dans un tableau n'affectent pas l'autre tableau.

Answer 2

Javascript fournit plusieurs types différents de tableaux (au moins 5 types).

var type1 = ['a', 'b']; // Array of Strings
var type2 = [1, 2]; // Array of Numbers
var type3 = [['a'], ['b']]; // Array of Arrays
var type4 = [{a: 'a'} , {b: 'b'}]; // Array of Object-Literals
var type5 = [{a: function () {}}, {b: function () {}}]; // Array of Objects

Selon le type de tableau, diverses techniques (comme .splice, .concat, JSON, $.extend, etc.) peuvent être utilisées pour copier profondément un tableau.

myArray.splice(0);
myArray.concat();
JSON.parse(JSON.stringify(myArray));
$.extend(true, [], myArray); // jQuery
_.extend(); // underscore
_.cloneDeep(); // lo-dash

Cependant, la plupart des techniques ne permettent pas de copier en profondeur tous les types de tableaux.

Prise en charge de la copie profonde pour diverses techniques (par type de tableau)

• Splice et Concat peuvent être utilisés pour copier en profondeur un tableau de chaînes de caractères et un tableau de nombres, Splice étant plus performant que Concat. http://jsperf.com/duplicate-array-slice-vs-concat/3
• JSON.parse(JSON.stringify()) peut être utilisé pour copier en profondeur un tableau de chaînes de caractères, un tableau de nombres, un tableau de matrices et un tableau de littéraux d'objets, mais pas un tableau d'objets prototypes.
• jQuery $.extend() peut être utilisé pour copier en profondeur tout type de tableau. D'autres bibliothèques, comme underscore et lo-dash, offrent des fonctions de copie profonde similaires, mais leurs performances sont également plus faibles. Plus surprenant, $.extend a également de meilleures performances que JSON.parse(JSON.stringify()). http://jsperf.com/js-deep-copy/2 ,

Copie profonde de tout type de tableau (sans bibliothèque tierce) :

Et pour les développeurs qui hésitent à utiliser des bibliothèques tierces (comme jQuery), la fonction personnalisée suivante peut être utilisée à la place. Elle offre des performances plus rapides que $.extend, et copie en profondeur tous les types de tableaux.

function copy(o) {
   var out, v, key;
   out = Array.isArray(o) ? [] : {};
   for (key in o) {
       v = o[key];
       out[key] = (typeof v === "object") ? copy(v) : v;
   }
   return out;
}

Answer 3

Pas besoin de jQuery... Exemple de travail

var arr2 = arr1.slice()

Ceci copie le tableau à partir de la position de départ 0 jusqu'à la fin du tableau.

Il est important de noter que cela fonctionnera comme prévu pour les types primitifs (chaîne, nombre, etc.), et d'expliquer également le comportement attendu pour les types de référence...

Si vous avez un tableau de types de référence, disons de type Object . Le tableau sera être copiés, mais les deux tableaux contiendront des références à la même Object 's. Ainsi, dans ce cas, il semblerait que le tableau soit copié par référence même si le tableau est effectivement copié.

Answer 4

Je l'ai déjà utilisé dans le passé :

var array2 = [].concat(array1);

Je pense que c'est aussi bien que d'utiliser la tranche mais plus lisible, donc je ne sais pas pourquoi cela n'a pas été suggéré. Peut-être qu'il me manque un inconvénient ?

Answer 5

Les méthodes mentionnées ci-dessus fonctionnent bien lorsqu'on travaille avec des types de données simples comme des nombres ou des chaînes de caractères, mais lorsque le tableau contient d'autres objets, ces méthodes échouent. Lorsque nous essayons de faire passer un objet d'un tableau à un autre, il est transmis comme une référence et non comme un objet.

Ajoutez le code suivant dans votre fichier js :

Object.prototype.clone = function() {
  var newObj = (this instanceof Array) ? [] : {};
  for (i in this) {
    if (i == 'clone') continue;
    if (this[i] && typeof this[i] == "object") {
      newObj[i] = this[i].clone();
    } else newObj[i] = this[i]
  } return newObj;
};

et utiliser simplement

var arr1 = ['val_1','val_2','val_3'];
var arr2 = arr1.clone()

Ça va marcher.