web-dev-qa-db-fra.com

Comment copier un objet JavaScript dans une nouvelle variable PAS par référence?

J'ai écrit un rapide jsfiddle ici , dans lequel je passe un petit objet JSON à une nouvelle variable et modifie les données à partir de la variable d'origine (pas la nouvelle variable), mais les données de la nouvelle variable sont également mises à jour. Cela doit signifier que l'objet JSON a été passé par référence, n'est-ce pas?

Voici mon code rapide:

var json_original = {one:'one', two:'two'}

var json_new = json_original;

console.log(json_original); //one, two
console.log(json_new); //one, two

json_original.one = 'two';
json_original.two = 'one';

console.log(json_original); //two, one
console.log(json_new); //two, one

Existe-t-il un moyen de créer une copie complète d'un objet JSON afin que la modification de la variable d'origine ne modifie pas la nouvelle variable?

javascriptobjectjavascript-objects
162
Prusprus

J'ai constaté que ce qui suit fonctionne si vous n'utilisez pas jQuery et que vous souhaitez uniquement cloner des objets simples (voir les commentaires).

JSON.parse(JSON.stringify(json_original));

Documentation

236
Andy

Votre seule option est en quelque sorte de cloner l'objet.

Voir cette question de stackoverflow pour savoir comment y parvenir.

Pour les objets JSON simples, le moyen le plus simple serait:

var newObject = JSON.parse(JSON.stringify(oldObject));

si vous utilisez jQuery, vous pouvez utiliser:

// Shallow copy
var newObject = jQuery.extend({}, oldObject);

// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);

MISE À JOUR 2017: Comme il s'agit d'une réponse répandue, je devrais mentionner qu'il existe désormais de meilleurs moyens d'y parvenir à l'aide de nouvelles versions de javascript:

Dans ES6 ou TypeScript (2.1+):

var shallowCopy = { ...oldObject };

var shallowCopyWithExtraProp = { ...oldObject, extraProp: "abc" };

Notez que si extraProp est également une propriété de oldObject, sa valeur ne sera pas utilisée car le extraProp : "abc" est spécifié plus tard dans l'expression, ce qui la remplace essentiellement. Bien entendu, oldObject ne sera pas modifié.

104
Moeri