Est-ce un bon moyen de cloner un objet dans ES6?

La recherche sur Google de "javascript clone object" apporte des résultats vraiment étranges, certains d'entre eux sont désespérément obsolètes et certains sont tout simplement trop complexes, n'est-ce pas aussi simple que:

let clone = {...original};

Y a-t-il quelque chose de mal à cela?

C'est bon pour le clonage superficiel . La diffusion d'objets fait partie intégrante d'ECMAScript 2018 .

Pour le clonage profond, vous aurez besoin d'une solution différente .

const clone = {...original} cloner peu profond

const newobj = {...original, prop: newOne} pour ajouter immuablement un autre accessoire à l'original et le stocker en tant que nouvel objet.

EDIT: Lorsque cette réponse a été publiée, {...obj} syntaxe n'était pas disponible dans la plupart des navigateurs. De nos jours, vous devriez bien l'utiliser (à moins que vous n'ayez besoin de prendre en charge IE 11).

Utilisez Object.assign.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

var obj = { a: 1 };
var copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }

Cependant, cela ne fera pas un clone profond. Il n'existe pas encore de méthode native de clonage profond.

EDIT: Comme @Mike 'Pomax' Kamermans l'a mentionné dans les commentaires, vous pouvez cloner en profondeur des objets simples (c'est-à-dire pas de prototypes, de fonctions ou de références circulaires) en utilisant JSON.parse(JSON.stringify(input))

Si les méthodes que vous avez utilisées ne fonctionnent pas correctement avec des objets impliquant des types de données tels que Date , essayez ceci

Importer _

import * as _ from 'lodash';

Objet clone profond

myObjCopy = _.cloneDeep(myObj);

si vous ne souhaitez pas utiliser json.parse (json.stringify (object)), vous pouvez créer des copies clé-valeur de manière récursive:

function copy(item){
  let result = null;
  if(!item) return result;
  if(Array.isArray(item)){
    result = [];
    item.forEach(element=>{
      result.push(copy(element));
    });
  }
  else if(item instanceof Object && !(item instanceof Function)){ 
    result = {};
    for(let key in item){
      if(key){
        result[key] = copy(item[key]);
      }
    }
  }
  return result || item;
}

Mais le meilleur moyen est de créer une classe qui peut renvoyer un clone d'elle-même

class MyClass{
    data = null;
    constructor(values){ this.data = values }
    toString(){ console.log("MyClass: "+this.data.toString(;) }
    remove(id){ this.data = data.filter(d=>d.id!==id) }
    clone(){ return new MyClass(this.data) }
}

Suite à la réponse de @marcel, j'ai trouvé que certaines fonctions manquaient toujours sur l'objet cloné. par exemple

function MyObject() {
  var methodAValue = null,
      methodBValue = null

  Object.defineProperty(this, "methodA", {
    get: function() { return methodAValue; },
    set: function(value) {
      methodAValue = value || {};
    },
    enumerable: true
  });

  Object.defineProperty(this, "methodB", {
    get: function() { return methodAValue; },
    set: function(value) {
      methodAValue = value || {};
    }
  });
}

où sur MyObject je pourrais cloner methodA mais methodB a été exclu. Cela s'est produit parce qu'il manque

enumerable: true

ce qui signifiait qu'il n'apparaissait pas dans

for(let key in item)

Au lieu de cela, je suis passé à

Object.getOwnPropertyNames(item).forEach((key) => {
    ....
  });

qui comprendra des clés non énumérables.

J'ai également constaté que le prototype ( proto ) n'était pas cloné. Pour cela, j'ai fini par utiliser

if (obj.__proto__) {
  copy.__proto__ = Object.assign(Object.create(Object.getPrototypeOf(obj)), obj);
}

PS: Frustrant que je n'ai pas pu trouver une fonction intégrée pour faire cela.

Vous pouvez aussi le faire comme ça,

let copiedData = JSON.parse(JSON.stringify(data));

We can do that with two way:
1- First create a new object and replicate the structure of the existing one by iterating 
 over its properties and copying them on the primitive level.

let user = {
     name: "John",
     age: 30
    };

    let clone = {}; // the new empty object

    // let's copy all user properties into it
    for (let key in user) {
      clone[key] = user[key];
    }

    // now clone is a fully independant clone
    clone.name = "Pete"; // changed the data in it

    alert( user.name ); // still John in the original object

2- Second we can use the method Object.assign for that 
    let user = { name: "John" };
    let permissions1 = { canView: true };
    let permissions2 = { canEdit: true };

    // copies all properties from permissions1 and permissions2 into user
    Object.assign(user, permissions1, permissions2);

  -Another example

    let user = {
      name: "John",
      age: 30
    };

    let clone = Object.assign({}, user);
It copies all properties of user into the empty object and returns it. Actually, the same as the loop, but shorter.

Mais Object.assign () ne crée pas de clone profond

let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
};

let clone = Object.assign({}, user);

alert( user.sizes === clone.sizes ); // true, same object

// user and clone share sizes
user.sizes.width++;       // change a property from one place
alert(clone.sizes.width); // 51, see the result from the other one

Pour résoudre ce problème, nous devrions utiliser la boucle de clonage qui examine chaque valeur de l'utilisateur [clé] et, s'il s'agit d'un objet, répliquer également sa structure. Cela s'appelle un «clonage en profondeur».

Il existe un algorithme standard pour le clonage profond qui gère le cas ci-dessus et les cas plus complexes, appelé algorithme de clonage structuré . Afin de ne pas réinventer la roue, nous pouvons utiliser une implémentation fonctionnelle de celle-ci à partir de la bibliothèque JavaScript lodash, la méthode s'appelle _.cloneDeep (obj) .

Toutes les méthodes ci-dessus ne gèrent pas le clonage en profondeur des objets où il est imbriqué à n niveaux. Je n'ai pas vérifié ses performances par rapport aux autres mais c'est court et simple.

Le premier exemple ci-dessous montre le clonage d'objets en utilisant Object.assignquels clones jusqu'au premier niveau.

var person = {
    name:'saksham',
    age:22,
    skills: {
        lang:'javascript',
        experience:5
    }
}

newPerson = Object.assign({},person);
newPerson.skills.lang = 'angular';
console.log(newPerson.skills.lang); //logs Angular

Utilisation de l'objet de clones profonds d'approche ci-dessous

var person = {
    name:'saksham',
    age:22,
    skills: {
        lang:'javascript',
        experience:5
    }
}

anotherNewPerson = JSON.parse(JSON.stringify(person));
anotherNewPerson.skills.lang = 'angular';
console.log(person.skills.lang); //logs javascript