Si vous n'utilisez pas Dates, les fonctions, undefined, regExp ou Infinity au sein de votre objet, un simple liner est JSON.parse(JSON.stringify(object)):

const a = {
  string: 'string',
  number: 123,
  bool: false,
  nul: null,
  date: new Date(),  // stringified
  undef: undefined,  // lost
  inf: Infinity,  // forced to 'null'
}
console.log(a);
console.log(typeof a.date);  // Date object
const clone = JSON.parse(JSON.stringify(a));
console.log(clone);
console.log(typeof clone.date);  // result of .toISOString()

Cela fonctionne pour toutes sortes d'objets contenant des objets, des tableaux, des chaînes, des booléens et des nombres.

Voir également cet article sur l'algorithme de clonage structuré des navigateurs utilisé lors de la publication de messages vers et depuis un travailleur. Il contient également une fonction de clonage en profondeur.

Avec jQuery, vous pouvez copier superficiellement avec extend :

var copiedObject = jQuery.extend({}, originalObject)

les modifications ultérieures de la copiedObjectn'affecteront pas la originalObjectet vice versa.

Ou pour faire une copie complète :

var copiedObject = jQuery.extend(true, {}, originalObject)

Dans ECMAScript 6, il existe une méthode Object.assign , qui copie les valeurs de toutes les propriétés propres énumérables d'un objet à un autre. Par exemple:

var x = {myProp: "value"};
var y = Object.assign({}, x); 

Mais sachez que les objets imbriqués sont toujours copiés comme référence.

Par MDN :

• Si vous voulez une copie superficielle, utilisez Object.assign({}, a)
• Pour une copie "en profondeur", utilisez JSON.parse(JSON.stringify(a))

Il n'y a pas besoin de bibliothèques externes mais vous devez d'abord vérifier la compatibilité du navigateur .

Il existe de nombreuses réponses, mais aucune ne mentionne Object.create d'ECMAScript 5, qui ne vous donne certes pas une copie exacte, mais définit la source comme le prototype du nouvel objet.

Ainsi, ce n'est pas une réponse exacte à la question, mais c'est une solution monoligne et donc élégante. Et cela fonctionne mieux pour 2 cas:

1. Où un tel héritage est utile (duh!)
2. Où l'objet source ne sera pas modifié, rendant ainsi la relation entre les 2 objets non problématique.

Exemple:

var foo = { a : 1 };
var bar = Object.create(foo);
foo.a; // 1
bar.a; // 1
foo.a = 2;
bar.a; // 2 - prototype changed
bar.a = 3;
foo.a; // Still 2, since setting bar.a makes it an "own" property

Pourquoi est-ce que je considère cette solution comme supérieure? C'est natif, donc pas de boucle, pas de récursivité. Cependant, les anciens navigateurs auront besoin d'un polyfill.

Une façon élégante de cloner un objet Javascript dans une ligne de code

Une Object.assignméthode fait partie de la norme ECMAScript 2015 (ES6) et fait exactement ce dont vous avez besoin.

var clone = Object.assign({}, obj);

La méthode Object.assign () est utilisée pour copier les valeurs de toutes les propriétés propres énumérables d'un ou plusieurs objets source vers un objet cible.

Lire la suite...

Le polyfill pour supporter les anciens navigateurs:

if (!Object.assign) {
  Object.defineProperty(Object, 'assign', {
    enumerable: false,
    configurable: true,
    writable: true,
    value: function(target) {
      'use strict';
      if (target === undefined || target === null) {
        throw new TypeError('Cannot convert first argument to object');
      }

      var to = Object(target);
      for (var i = 1; i < arguments.length; i++) {
        var nextSource = arguments[i];
        if (nextSource === undefined || nextSource === null) {
          continue;
        }
        nextSource = Object(nextSource);

        var keysArray = Object.keys(nextSource);
        for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
          var nextKey = keysArray[nextIndex];
          var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
          if (desc !== undefined && desc.enumerable) {
            to[nextKey] = nextSource[nextKey];
          }
        }
      }
      return to;
    }
  });
}

Il existe plusieurs problèmes avec la plupart des solutions sur Internet. J'ai donc décidé de faire un suivi, qui comprend, pourquoi la réponse acceptée ne devrait pas être acceptée.

situation de départ

Je veux copier en profondeur un Javascript Objectavec tous ses enfants et leurs enfants et ainsi de suite. Mais puisque je ne suis pas une sorte de développeur normale, mon Objecta la normale properties , circular structureset même nested objects.

Créons donc un circular structureet un nested objectpremier.

function Circ() {
    this.me = this;
}

function Nested(y) {
    this.y = y;
}

Rassemblons tout dans un Objectnom a.

var a = {
    x: 'a',
    circ: new Circ(),
    nested: new Nested('a')
};

Ensuite, nous voulons copier adans une variable nommée bet la muter.

var b = a;

b.x = 'b';
b.nested.y = 'b';

Vous savez ce qui s'est passé ici parce que sinon vous n'atterririez même pas sur cette grande question.

console.log(a, b);

a --> Object {
    x: "b",
    circ: Circ {
        me: Circ { ... }
    },
    nested: Nested {
        y: "b"
    }
}

b --> Object {
    x: "b",
    circ: Circ {
        me: Circ { ... }
    },
    nested: Nested {
        y: "b"
    }
}

Maintenant, trouvons une solution.

JSON

La première tentative que j'ai essayée a été d'utiliser JSON.

var b = JSON.parse( JSON.stringify( a ) );

b.x = 'b';
b.nested.y = 'b';

Ne perdez pas trop de temps dessus, vous en aurez TypeError: Converting circular structure to JSON.

Copie récursive (la "réponse" acceptée)

Jetons un œil à la réponse acceptée.

function cloneSO(obj) {
    // Handle the 3 simple types, and null or undefined
    if (null == obj || "object" != typeof obj) return obj;

    // Handle Date
    if (obj instanceof Date) {
        var copy = new Date();
        copy.setTime(obj.getTime());
        return copy;
    }

    // Handle Array
    if (obj instanceof Array) {
        var copy = [];
        for (var i = 0, len = obj.length; i < len; i++) {
            copy[i] = cloneSO(obj[i]);
        }
        return copy;
    }

    // Handle Object
    if (obj instanceof Object) {
        var copy = {};
        for (var attr in obj) {
            if (obj.hasOwnProperty(attr)) copy[attr] = cloneSO(obj[attr]);
        }
        return copy;
    }

    throw new Error("Unable to copy obj! Its type isn't supported.");
}

Ça a l'air bien, hein? C'est une copie récursive de l'objet et gère également d'autres types Date, mais ce n'était pas une exigence.

var b = cloneSO(a);

b.x = 'b';
b.nested.y = 'b';

Récursivité et circular structuresne fonctionne pas bien ensemble ...RangeError: Maximum call stack size exceeded

solution native

Après avoir discuté avec mon collègue, mon patron nous a demandé ce qui s'était passé et il a trouvé une solution simple après quelques recherches sur Google. Ça s'appelle Object.create.

var b = Object.create(a);

b.x = 'b';
b.nested.y = 'b';

Cette solution a été ajoutée à Javascript il y a quelque temps et gère même circular structure.

console.log(a, b);

a --> Object {
    x: "a",
    circ: Circ {
        me: Circ { ... }
    },
    nested: Nested {
        y: "b"
    }
}

b --> Object {
    x: "b",
    circ: Circ {
        me: Circ { ... }
    },
    nested: Nested {
        y: "b"
    }
}

... et vous voyez, cela ne fonctionnait pas avec la structure imbriquée à l'intérieur.

polyfill pour la solution native

Il y a un polyfill pour Object.createl'ancien navigateur, tout comme IE 8. C'est quelque chose comme recommandé par Mozilla, et bien sûr, ce n'est pas parfait et entraîne le même problème que la solution native .

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

var b = clonePF(a);

b.x = 'b';
b.nested.y = 'b';

J'ai mis en Fdehors du champ d'application afin que nous puissions voir ce qui instanceofnous dit.

console.log(a, b);

a --> Object {
    x: "a",
    circ: Circ {
        me: Circ { ... }
    },
    nested: Nested {
        y: "b"
    }
}

b --> F {
    x: "b",
    circ: Circ {
        me: Circ { ... }
    },
    nested: Nested {
        y: "b"
    }
}

console.log(typeof a, typeof b);

a --> object
b --> object

console.log(a instanceof Object, b instanceof Object);

a --> true
b --> true

console.log(a instanceof F, b instanceof F);

a --> false
b --> true

Même problème que la solution native , mais une sortie un peu moins bonne.

la meilleure solution (mais pas parfaite)

En fouillant, j'ai trouvé une question similaire ( en Javascript, lors de l'exécution d'une copie complète , comment puis-je éviter un cycle, car une propriété est "this"? ) À celle-ci, mais avec une bien meilleure solution.

function cloneDR(o) {
    const gdcc = "__getDeepCircularCopy__";
    if (o !== Object(o)) {
        return o; // primitive value
    }

    var set = gdcc in o,
        cache = o[gdcc],
        result;
    if (set && typeof cache == "function") {
        return cache();
    }
    // else
    o[gdcc] = function() { return result; }; // overwrite
    if (o instanceof Array) {
        result = [];
        for (var i=0; i<o.length; i++) {
            result[i] = cloneDR(o[i]);
        }
    } else {
        result = {};
        for (var prop in o)
            if (prop != gdcc)
                result[prop] = cloneDR(o[prop]);
            else if (set)
                result[prop] = cloneDR(cache);
    }
    if (set) {
        o[gdcc] = cache; // reset
    } else {
        delete o[gdcc]; // unset again
    }
    return result;
}

var b = cloneDR(a);

b.x = 'b';
b.nested.y = 'b';

Et regardons la sortie ...

console.log(a, b);

a --> Object {
    x: "a",
    circ: Object {
        me: Object { ... }
    },
    nested: Object {
        y: "a"
    }
}

b --> Object {
    x: "b",
    circ: Object {
        me: Object { ... }
    },
    nested: Object {
        y: "b"
    }
}

console.log(typeof a, typeof b);

a --> object
b --> object

console.log(a instanceof Object, b instanceof Object);

a --> true
b --> true

console.log(a instanceof F, b instanceof F);

a --> false
b --> false

Les exigences sont identiques, mais il y a encore quelques petits problèmes, y compris la modification instancedu nestedet circdu Object.

La structure des arbres qui partagent une feuille ne sera pas copiée, ils deviendront deux feuilles indépendantes:

        [Object]                     [Object]
         /    \                       /    \
        /      \                     /      \
      |/_      _\|                 |/_      _\|  
  [Object]    [Object]   ===>  [Object]    [Object]
       \        /                 |           |
        \      /                  |           |
        _\|  |/_                 \|/         \|/
        [Object]               [Object]    [Object]

conclusion

La dernière solution utilisant la récursivité et un cache n'est peut-être pas la meilleure, mais c'est une véritable copie en profondeur de l'objet. Il gère simple properties, circular structureset nested object, mais il gâchera leur instance lors du clonage.

jsfiddle

Si vous êtes d'accord avec une copie superficielle, la bibliothèque underscore.js a une méthode de clonage .

y = _.clone(x);

ou vous pouvez l'étendre comme

copiedObject = _.extend({},originalObject);

OK, imaginez que vous avez cet objet ci-dessous et que vous souhaitez le cloner:

let obj = {a:1, b:2, c:3}; //ES6

ou

var obj = {a:1, b:2, c:3}; //ES5

la réponse est depeneds principalement sur laquelle EcmaScript vous utilisez, dans ES6+, vous pouvez simplement utiliser Object.assignpour faire le clone:

let cloned = Object.assign({}, obj); //new {a:1, b:2, c:3};

ou en utilisant un opérateur de diffusion comme celui-ci:

let cloned = {...obj}; //new {a:1, b:2, c:3};

Mais si vous utilisez ES5, vous pouvez utiliser quelques méthodes, mais JSON.stringifyassurez-vous de ne pas utiliser pour un gros morceau de données à copier, mais cela pourrait être une ligne pratique dans de nombreux cas, quelque chose comme ceci:

let cloned = JSON.parse(JSON.stringify(obj)); 
//new {a:1, b:2, c:3};, can be handy, but avoid using on big chunk of data over and over

Une solution particulièrement inélégante consiste à utiliser le codage JSON pour créer des copies complètes d'objets qui n'ont pas de méthodes membres. La méthodologie consiste à encoder JSON votre objet cible, puis en le décodant, vous obtenez la copie que vous recherchez. Vous pouvez décoder autant de fois que vous le souhaitez pour faire autant de copies que vous le souhaitez.

Bien sûr, les fonctions n'appartiennent pas à JSON, donc cela ne fonctionne que pour les objets sans méthodes membres.

Cette méthodologie était parfaite pour mon cas d'utilisation, car je stocke des objets JSON dans un magasin de valeurs-clés, et lorsqu'ils sont exposés en tant qu'objets dans une API JavaScript, chaque objet contient en fait une copie de l'état d'origine de l'objet afin que nous peut calculer le delta après que l'appelant a muté l'objet exposé.

var object1 = {key:"value"};
var object2 = object1;

object2 = JSON.stringify(object1);
object2 = JSON.parse(object2);

object2.key = "a change";
console.log(object1);// returns value

Vous pouvez simplement utiliser une propriété spread pour copier un objet sans références. Mais attention (voir commentaires), la «copie» est juste au niveau objet / tableau le plus bas. Les propriétés imbriquées sont toujours des références!

Clone complet:

let x = {a: 'value1'}
let x2 = {...x}

// => mutate without references:

x2.a = 'value2'
console.log(x.a)    // => 'value1'

Clone avec références au deuxième niveau:

const y = {a: {b: 'value3'}}
const y2 = {...y}

// => nested object is still a references:

y2.a.b = 'value4'
console.log(y.a.b)    // => 'value4'

JavaScript ne prend pas en charge nativement les clones profonds. Utilisez une fonction utilitaire. Par exemple Ramda:

http://ramdajs.com/docs/#clone

Pour ceux qui utilisent AngularJS, il existe également une méthode directe pour le clonage ou l'extension des objets dans cette bibliothèque.

var destination = angular.copy(source);

ou

angular.copy(source, destination);

Plus dans la documentation angular.copy ...

Voici une fonction que vous pouvez utiliser.

function clone(obj) {
    if(obj == null || typeof(obj) != 'object')
        return obj;    
    var temp = new obj.constructor(); 
    for(var key in obj)
        temp[key] = clone(obj[key]);    
    return temp;
}

La réponse d'A. Levy est presque complète, voici ma petite contribution: il y a un moyen de gérer les références récursives , voir cette ligne

if(this[attr]==this) copy[attr] = copy;

Si l'objet est un élément DOM XML, nous devons utiliser cloneNode à la place

if(this.cloneNode) return this.cloneNode(true);

Inspiré par l'étude approfondie d'A.Levy et l'approche de prototypage de Calvin, je propose cette solution:

Object.prototype.clone = function() {
  if(this.cloneNode) return this.cloneNode(true);
  var copy = this instanceof Array ? [] : {};
  for(var attr in this) {
    if(typeof this[attr] == "function" || this[attr]==null || !this[attr].clone)
      copy[attr] = this[attr];
    else if(this[attr]==this) copy[attr] = copy;
    else copy[attr] = this[attr].clone();
  }
  return copy;
}

Date.prototype.clone = function() {
  var copy = new Date();
  copy.setTime(this.getTime());
  return copy;
}

Number.prototype.clone = 
Boolean.prototype.clone =
String.prototype.clone = function() {
  return this;
}

Voir aussi la note d'Andy Burke dans les réponses.

De cet article: Comment copier des tableaux et des objets en Javascript par Brian Huisman:

Object.prototype.clone = function() {
  var newObj = (this instanceof Array) ? [] : {};
  for (var 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;
};

Dans ES-6, vous pouvez simplement utiliser Object.assign (...). Ex:

let obj = {person: 'Thor Odinson'};
let clone = Object.assign({}, obj);

Une bonne référence est ici: https://googlechrome.github.io/samples/object-assign-es6/

Dans ECMAScript 2018

let objClone = { ...obj };

N'oubliez pas que les objets imbriqués sont toujours copiés comme référence.

Utilisation de Lodash:

var y = _.clone(x, true);

Intéressé par le clonage d'objets simples:

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

Source: Comment copier un objet JavaScript dans une nouvelle variable NON par référence?

Vous pouvez cloner un objet et supprimer toute référence de l'ancien à l'aide d'une seule ligne de code. Faites simplement:

var obj1 = { text: 'moo1' };
var obj2 = Object.create(obj1); // Creates a new clone without references

obj2.text = 'moo2'; // Only updates obj2's text property

console.log(obj1, obj2); // Outputs: obj1: {text:'moo1'}, obj2: {text:'moo2'}

Pour les navigateurs / moteurs qui ne prennent actuellement pas en charge Object.create, vous pouvez utiliser ce polyfill:

// Polyfill Object.create if it does not exist
if (!Object.create) {
    Object.create = function (o) {
        var F = function () {};
        F.prototype = o;
        return new F();
    };
}

Nouvelle réponse à une vieille question! Si vous avez le plaisir d'utiliser ECMAScript 2016 (ES6) avec Spread Syntax , c'est facile.

keepMeTheSame = {first: "Me!", second: "You!"};
cloned = {...keepMeTheSame}

Cela fournit une méthode propre pour une copie superficielle d'un objet. Faire une copie profonde, ce qui signifie créer une nouvelle copie de chaque valeur dans chaque objet imbriqué récursivement, nécessite l'une des solutions les plus lourdes ci-dessus.

JavaScript continue d'évoluer.