Jika Anda tidak menggunakan Dates, fungsi, tidak terdefinisi, regExp atau Infinity dalam objek Anda, liner yang sangat sederhana adalah 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()

Ini berfungsi untuk semua jenis objek yang berisi objek, array, string, boolean, dan angka.

Lihat juga artikel ini tentang algoritma klon terstruktur dari browser yang digunakan saat memposting pesan ke dan dari pekerja. Ini juga berisi fungsi untuk kloning dalam.

Dengan jQuery, Anda dapat menyalin dangkal dengan memperluas :

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

perubahan selanjutnya pada copiedObjecttidak akan mempengaruhi originalObject, dan sebaliknya.

Atau untuk membuat salinan yang dalam :

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

Dalam ECMAScript 6 ada metode Object.assign , yang menyalin nilai dari semua properti yang dapat dihitung sendiri dari satu objek ke objek lainnya. Sebagai contoh:

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

Namun perlu diperhatikan bahwa objek bersarang masih disalin sebagai referensi.

Per MDN :

• Jika Anda ingin salinan dangkal, gunakan Object.assign({}, a)
• Untuk salinan "dalam", gunakan JSON.parse(JSON.stringify(a))

Tidak perlu untuk perpustakaan eksternal tetapi Anda harus memeriksa kompatibilitas browser terlebih dahulu .

Ada banyak jawaban, tetapi tidak ada yang menyebutkan Object.create dari ECMAScript 5, yang memang tidak memberi Anda salinan persis, tetapi menetapkan sumber sebagai prototipe objek baru.

Jadi, ini bukan jawaban yang tepat untuk pertanyaan itu, tetapi ini adalah solusi satu-baris dan dengan demikian elegan. Dan ini bekerja paling baik untuk 2 kasus:

1. Di mana warisan seperti itu berguna (ya!)
2. Di mana objek sumber tidak akan dimodifikasi, sehingga membuat hubungan antara 2 objek tidak menjadi masalah.

Contoh:

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

Mengapa saya menganggap solusi ini lebih unggul? Ini asli, sehingga tidak ada perulangan, tidak ada rekursi. Namun, browser lama akan membutuhkan polyfill.

Cara elegan untuk mengkloning objek Javascript dalam satu baris kode

Sebuah Object.assignmetode adalah bagian dari 2015 standar ECMAScript (ES6) dan melakukan apa yang Anda butuhkan.

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

Metode Object.assign () digunakan untuk menyalin nilai-nilai semua properti enumerable sendiri dari satu atau lebih objek sumber ke objek target.

Baca lebih banyak...

The polyfill untuk mendukung browser lama:

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

Ada beberapa masalah dengan sebagian besar solusi di internet. Jadi saya memutuskan untuk membuat tindak lanjut, yang mencakup, mengapa jawaban yang diterima tidak boleh diterima.

situasi mulai

Saya ingin menyalin dalam- dalam Javascript Objectdengan semua anak-anak dan anak-anak mereka dan sebagainya. Tapi karena saya bukan jenis pengembang normal, saya Objectpunya yang normal properties , circular structuresdan bahkan nested objects.

Jadi mari kita buat circular structuredan yang nested objectpertama.

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

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

Mari kita kumpulkan semuanya dalam sebuah Objectnama a.

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

Selanjutnya, kami ingin menyalin ake variabel bernama bdan memutasikannya.

var b = a;

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

Anda tahu apa yang terjadi di sini karena jika tidak Anda bahkan tidak akan mendarat pada pertanyaan besar ini.

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

Sekarang mari kita cari solusinya.

JSON

Upaya pertama yang saya coba gunakan JSON.

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

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

Jangan buang terlalu banyak waktu untuk itu, Anda akan mendapatkannya TypeError: Converting circular structure to JSON.

Salinan rekursif ("jawaban" yang diterima)

Mari kita lihat jawaban yang diterima.

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.");
}

Terlihat bagus, heh? Ini adalah salinan objek berulang dan menangani tipe lain juga, seperti Date, tapi itu bukan keharusan.

var b = cloneSO(a);

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

Rekursi dan circular structurestidak bekerja dengan baik bersama ...RangeError: Maximum call stack size exceeded

solusi asli

Setelah berdebat dengan rekan kerja saya, bos saya bertanya kepada kami apa yang terjadi, dan dia menemukan solusi sederhana setelah beberapa googling. Itu disebut Object.create.

var b = Object.create(a);

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

Solusi ini ditambahkan ke Javascript beberapa waktu lalu dan bahkan menangani 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"
    }
}

... dan Anda lihat, itu tidak berfungsi dengan struktur bersarang di dalam.

polyfill untuk solusi asli

Ada polyfill Object.createdi browser lama seperti IE 8. Ini sesuatu seperti yang direkomendasikan oleh Mozilla, dan tentu saja, itu tidak sempurna dan menghasilkan masalah yang sama dengan solusi asli .

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

var b = clonePF(a);

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

Saya telah menempatkan di Fluar ruang lingkup sehingga kita dapat melihat apa yang instanceofmemberitahu kita.

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

Masalah yang sama dengan solusi asli , tetapi output sedikit lebih buruk.

solusi yang lebih baik (tetapi tidak sempurna)

Ketika menggali sekitar, saya menemukan pertanyaan serupa ( dalam Javascript, ketika melakukan salinan yang dalam, bagaimana saya menghindari siklus, karena properti menjadi "ini"? ) Untuk yang ini, tetapi dengan solusi yang jauh lebih baik.

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

Dan mari kita lihat outputnya ...

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

Persyaratannya cocok, tetapi masih ada beberapa masalah yang lebih kecil, termasuk mengubah instancedari nesteddan circke Object.

Struktur pohon yang berbagi daun tidak akan disalin, mereka akan menjadi dua daun independen:

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

kesimpulan

Solusi terakhir menggunakan rekursi dan cache, mungkin tidak menjadi yang terbaik, tapi itu nyata deep-salinan objek. Menangani sederhana properties, circular structuresdan nested object, tetapi itu akan mengacaukan contoh mereka saat kloning.

jsfiddle

Jika Anda setuju dengan salinan yang dangkal, perpustakaan underscore.js memiliki metode klon .

y = _.clone(x);

atau Anda dapat memperpanjang seperti

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

OK, bayangkan Anda memiliki objek di bawah ini dan Anda ingin mengkloningnya:

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

atau

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

jawabannya adalah terutama depeneds yang ECMAScript Anda gunakan, dalam ES6+, Anda hanya dapat menggunakan Object.assignuntuk melakukan clone:

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

atau menggunakan operator spread seperti ini:

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

Tetapi jika Anda menggunakan ES5, Anda dapat menggunakan beberapa metode, tetapi JSON.stringify, pastikan Anda tidak menggunakan sebagian besar data untuk menyalin, tetapi ini bisa menjadi satu cara yang praktis dalam banyak kasus, seperti ini:

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

Salah satu solusi yang tidak berlaku adalah dengan menggunakan pengkodean JSON untuk membuat salinan dalam objek yang tidak memiliki metode anggota. Metodologinya adalah untuk menyandikan JSON objek target Anda, kemudian dengan mendekodekannya, Anda mendapatkan salinan yang Anda cari. Anda dapat memecahkan kode sebanyak yang Anda inginkan untuk membuat salinan sebanyak yang Anda butuhkan.

Tentu saja, fungsi bukan milik JSON, jadi ini hanya berfungsi untuk objek tanpa metode anggota.

Metodologi ini sangat cocok untuk kasus penggunaan saya, karena saya menyimpan gumpalan JSON di penyimpanan nilai kunci, dan ketika mereka diekspos sebagai objek dalam JavaScript API, setiap objek sebenarnya berisi salinan keadaan asli objek sehingga kami dapat menghitung delta setelah penelepon memutasi objek yang terbuka.

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

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

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

Anda cukup menggunakan properti sebaran untuk menyalin objek tanpa referensi. Tapi hati-hati (lihat komentar), 'copy' hanya pada level objek / array terendah. Properti bersarang masih referensi!

Klon lengkap:

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

// => mutate without references:

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

Klon dengan referensi di tingkat kedua:

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 sebenarnya tidak mendukung klon dalam secara asli. Gunakan fungsi utilitas. Misalnya Ramda:

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

Bagi mereka yang menggunakan AngularJS, ada juga metode langsung untuk kloning atau memperluas objek di perpustakaan ini.

var destination = angular.copy(source);

atau

angular.copy(source, destination);

Lebih banyak di dokumentasi angular.copy ...

Ini adalah fungsi yang bisa Anda gunakan.

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

Jawaban A.Levy hampir selesai, inilah kontribusi kecil saya: ada cara bagaimana menangani referensi rekursif , lihat baris ini

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

Jika objeknya adalah elemen XML DOM, kita harus menggunakan cloneNode sebagai gantinya

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

Terinspirasi oleh studi lengkap A.Levy dan pendekatan prototyping Calvin, saya menawarkan solusi ini:

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

Lihat juga catatan Andy Burke dalam jawabannya.

Dari artikel ini: Cara menyalin array dan objek dalam Javascript oleh 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;
};

Di ES-6 Anda cukup menggunakan Object.assign (...). Ex:

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

Referensi yang baik ada di sini: https://googlechrome.github.io/samples/object-assign-es6/

Dalam ECMAScript 2018

let objClone = { ...obj };

Sadarilah bahwa objek bersarang masih disalin sebagai referensi.

Menggunakan Lodash:

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

Tertarik dalam mengkloning objek sederhana:

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

Sumber: Bagaimana cara menyalin objek JavaScript ke variabel baru BUKAN dengan referensi?

Anda dapat mengkloning suatu objek dan menghapus referensi apa pun dari yang sebelumnya menggunakan satu baris kode. Cukup lakukan:

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

Untuk browser / mesin yang saat ini tidak mendukung Object.create Anda dapat menggunakan polyfill ini:

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

Jawaban baru untuk pertanyaan lama! Jika Anda merasa senang menggunakan ECMAScript 2016 (ES6) dengan Spread Syntax , mudah.

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

Ini memberikan metode bersih untuk salinan objek yang dangkal. Membuat salinan yang dalam, artinya membuat salinan baru dari setiap nilai di setiap objek bersarang secara rekursif, membutuhkan solusi yang lebih berat di atas.

JavaScript terus berkembang.