web-dev-qa-db-fra.com

Javascript - Comment cloner un objet?

Je suis confus. Je crée une copie de myObjOne, puis-je supprimer une entrée de myObjOne et JS supprime aussi l’entrée de ma copie (myObjTwo) aussi? Mais pourquoi?

  myObjOne = {};
  myObjOne['name'] = 'xxx';
  myObjOne['id'] = 'yyy';
  myObjOne['plz'] = 'zzz';  

  // clone
  myObjTwo = myObjOne;

  // remove something
  delete myObjOne['name'];

  console.dir(myObjTwo);

exemplehttp://jsbin.com/itixes/edit#javascript,html

javascriptcopyclone
19
user970727

Mise à jour: Suppression de Object.create comme méthode de clonage, comme indiqué dans les commentaires.

  myObjTwo = myObjOne;

ne clone pas. Il copie simplement la référence. 

Si vous voulez cloner, vous pouvez utiliser JSON.parse et JSON.stringify

var x = {a:{b:{c:{'d':'e'}}}};
var y = JSON.parse(JSON.stringify(x));  //y is a clone of x
console.log(y.a.b.c.d); //prints e
console.log(y === x); //prints false

Avertissement: Comme Raynos l'a mentionné dans les commentaires, ce clone basé sur JSON ne conserve pas les méthodes de l'objet d'entrée dans l'objet de sortie. Cette solution est suffisante si votre objet ne contient aucune méthode. Les méthodes sont les propriétés d'un objet qui sont des fonctions. Si var obj = {add : function(a,b){return a+b;}} alors add est une méthode de obj.

Si vous avez besoin d’une solution prenant en charge la copie de méthodes, passez en revue ces réponses SO (comme l’ont souligné musefan, Matt et Ranhiru Cooray).

Je suggérerais Comment cloner correctement un objet JavaScript?

22
Narendra Yadala

Vous pouvez utiliser jQuery comme ceci:

var myObjTwo = jQuery.extend(true, {}, myObjOne);

Le premier argument indique que nous voulons créer une copie complète de myObjOne.

16
Nicu Surdu

Ce n'est pas comme cela que vous clonez, c'est simplement stocker le même objet d'origine dans une variable supplémentaire. Peut-être cette réponse va vous aider

3
musefan

Beaucoup de conseils sur la façon de faire une copie non seulement de l'objet et de ses propriétés, mais de tous les objets référencés par ses propriétés. Voici une version qui clone l'objet sans le copier et pour que le clone hérite de toutes les propriétés ajoutées ultérieurement, à l'exception de celles masquées par les propriétés propres du clone:

var cloneOf = (function() {
  function F(){}
  return function(o) {
    F.prototype = o;
    return new F();
  }
}());

Certains peuvent reconnaître le motif. Un exemple:

var base = {foo:'foo', bar:'bar'};
var baseClone = cloneOf(base);
alert(baseClone.foo);  // foo
2
RobG

Vous pouvez utiliser Object.assign() mais soyez conscient du support du navigateur.

Plus d'infos ici: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign .

Exemple:

myObjTwo = Object.assign({}, myObjOne);
1
Pablo

Avec ES6, utilisez l'opérateur spread.

myObjTwo = {...myObjOne}

L'opérateur de propagation dans es6 n'est qu'un Ellipsis . Il crée une copie de l'original, même si celui-ci est détruit

0
Allan Mwesigwa

Simple.

var clone=function(o){
      var n= {}.toString.apply(o)=="[object Array]" ? []:{};
      for(i in o)
         n[i]= typeof o[i]=='object' ? clone(o[i]):o[i];
      return n;
 };

Usage:

var x={a:{d:34},b:33};
var y=clone(x);  // clones 'x'
0
Dinesh

Votre ligne myObjTwo = myObjOne ne clone pas myObjOne, elle crée simplement une référence dupliquée au même objet!

La solution consiste à utiliser une fonction de clonage, provenant peut-être d'une bibliothèque telle que underscore.js . Mais en réalité, il semble que vous ayez du temps à lire et à apprendre sur le concept d’objets et de pointeurs en Javascript.

0
funkybro