Apakah ini cara yang baik untuk mengkloning objek di ES6?

Googling untuk "objek klon javascript" membawa beberapa hasil yang sangat aneh, beberapa dari mereka sudah ketinggalan zaman dan ada yang terlalu kompleks, bukan semudah hanya:

let clone = {...original};

Apakah ada yang salah dengan ini?

Ini bagus untuk kloning dangkal . The objek spread adalah bagian standar dari ECMAScript 2018 .

Untuk kloning yang mendalam Anda akan membutuhkan solusi yang berbeda .

const clone = {...original} untuk mengkloning dangkal

const newobj = {...original, prop: newOne} untuk secara abadi menambahkan penyangga lain ke dokumen asli dan menyimpannya sebagai objek baru.

EDIT: Ketika jawaban ini diposting, {...obj}sintaksis tidak tersedia di sebagian besar browser. Saat ini, Anda harus baik-baik saja menggunakannya (kecuali Anda perlu mendukung IE 11).

Gunakan 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 }

Namun, ini tidak akan membuat klon yang dalam. Sampai sekarang belum ada cara kloning yang dalam.

EDIT: Seperti @Mike 'Pomax' Kamermans yang disebutkan dalam komentar, Anda dapat mengkloning objek sederhana (mis. Tidak ada prototipe, fungsi atau referensi melingkar) menggunakan JSON.parse(JSON.stringify(input))

Jika metode yang Anda gunakan tidak berfungsi dengan baik dengan objek yang melibatkan tipe data seperti Tanggal , coba ini

Impor _

import * as _ from 'lodash';

Objek klon yang dalam

myObjCopy = _.cloneDeep(myObj);

jika Anda tidak ingin menggunakan json.parse (json.stringify (objek)), Anda dapat membuat salinan nilai kunci secara rekursif:

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;
}

Tetapi cara terbaik adalah membuat kelas yang dapat mengembalikan klon sendiri

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) }
}

Mengikuti dari jawaban oleh @marcel saya menemukan beberapa fungsi masih hilang pada objek yang dikloning. misalnya

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 || {};
    }
  });
}

dimana pada MyObject saya bisa mengkloning methodA tetapi methodB tidak termasuk. Ini terjadi karena tidak ada

enumerable: true

yang berarti tidak muncul di

for(let key in item)

Sebaliknya saya beralih ke

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

yang akan menyertakan kunci yang tidak dapat dihitung.

Saya juga menemukan bahwa prototipe ( proto ) tidak dikloning. Untuk itu saya akhirnya menggunakan

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

PS: Frustasi saya tidak bisa menemukan fungsi bawaan untuk melakukan ini.

Anda bisa melakukannya seperti ini juga,

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.

Tapi Object.assign () tidak membuat klon yang dalam

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

Untuk memperbaikinya, kita harus menggunakan loop kloning yang memeriksa setiap nilai pengguna [kunci] dan, jika itu adalah objek, kemudian mereplikasi strukturnya juga. Itu disebut "kloning dalam".

Ada algoritma standar untuk kloning mendalam yang menangani kasus di atas dan kasus yang lebih kompleks, yang disebut algoritma kloning terstruktur . Agar tidak menemukan kembali roda, kita dapat menggunakan implementasi yang berfungsi dari perpustakaan JavaScript lodash metode ini disebut _.cloneDeep (obj) .

Semua metode di atas tidak menangani kloning objek yang dalam di mana ia bersarang ke level n. Saya tidak memeriksa kinerjanya dibandingkan yang lain tetapi pendek dan sederhana.

Contoh pertama di bawah ini menunjukkan objek kloning menggunakan Object.assignklon mana saja sampai tingkat pertama.

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

Menggunakan pendekatan di bawah ini objek klon dalam

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