Apa cara paling efisien untuk mengkloning objek JavaScript? Saya pernah melihat obj = eval(uneval(o));sedang digunakan, tetapi itu tidak standar dan hanya didukung oleh Firefox .

Saya sudah melakukan hal-hal seperti obj = JSON.parse(JSON.stringify(o));tetapi mempertanyakan efisiensinya.

Saya juga melihat fungsi penyalinan rekursif dengan berbagai kekurangan.
Saya terkejut tidak ada solusi kanonik.

Kloning dalam asli

Ini disebut "kloning terstruktur", bekerja secara eksperimental di Node 11 dan yang lebih baru, dan semoga akan mendarat di browser. Lihat jawaban ini untuk lebih jelasnya.

Kloning cepat dengan kehilangan data - JSON.parse / strify

Jika Anda tidak menggunakan Dates, fungsi, undefined, Infinity, regexps, Maps, Set, gumpalan, FileLists, ImageDatas, Array jarang, Diketik Array atau jenis kompleks lainnya dalam objek Anda, satu kapal yang sangat sederhana untuk klon dalam sebuah objek 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'
  re: /.*/,  // lost
}
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()

Lihat jawaban Corban untuk tolok ukur.

Kloning yang andal menggunakan perpustakaan

Karena objek kloning tidak sepele (tipe kompleks, referensi melingkar, fungsi dll), sebagian besar perpustakaan utama menyediakan fungsi untuk mengkloning objek. Jangan menemukan kembali roda - jika Anda sudah menggunakan perpustakaan, periksa apakah ia memiliki fungsi kloning objek. Sebagai contoh,

• lodash - cloneDeep; dapat diimpor secara terpisah melalui modul lodash.clonedeep dan mungkin merupakan pilihan terbaik Anda jika Anda belum menggunakan perpustakaan yang menyediakan fungsi kloning yang mendalam
• AngularJS - angular.copy
• jQuery - jQuery.extend(true, { }, oldObject); .clone()hanya elemen klon DOM

ES6

Untuk kelengkapan, perhatikan bahwa ES6 menawarkan dua mekanisme penyalinan dangkal: Object.assign()dan sintaksis penyebaran . yang menyalin nilai dari semua properti yang dapat dihitung sendiri dari satu objek ke objek lain. Sebagai contoh:

var A1 = {a: "2"};
var A2 = Object.assign({}, A1);
var A3 = {...A1};  // Spread Syntax

Lihat patokan ini: http://jsben.ch/#/bWfk9

Dalam tes saya sebelumnya di mana kecepatan adalah masalah utama yang saya temukan

JSON.parse(JSON.stringify(obj))

menjadi cara paling lambat untuk mengkloning suatu objek (itu lebih lambat dari jQuery.extend dengan deepflag true 10-20%).

jQuery.extend cukup cepat ketika deepflag diatur ke false(clone dangkal). Ini adalah pilihan yang baik, karena mencakup beberapa logika tambahan untuk validasi tipe dan tidak menyalin properti yang tidak ditentukan, dll., Tetapi ini juga akan sedikit memperlambat Anda.

Jika Anda mengetahui struktur objek yang Anda coba klon atau dapat menghindari array bersarang yang mendalam, Anda dapat menulis for (var i in obj)loop sederhana untuk mengkloning objek Anda saat memeriksa hasOwnProperty dan itu akan jauh lebih cepat daripada jQuery.

Terakhir jika Anda mencoba untuk mengkloning struktur objek yang dikenal dalam loop panas, Anda bisa mendapatkan KINERJA BANYAK BANYAK LAGI dengan hanya menyelaraskan prosedur klon dan secara manual membangun objek.

Mesin jejak JavaScript menyedot optimalisasi for..inloop dan memeriksa hasOwnProperty akan memperlambat Anda juga. Mengkloning manual ketika kecepatan adalah keharusan mutlak.

var clonedObject = {
  knownProp: obj.knownProp,
  ..
}

Hati-hati menggunakan JSON.parse(JSON.stringify(obj))metode pada Dateobjek - JSON.stringify(new Date())mengembalikan representasi string tanggal dalam format ISO, yang JSON.parse() tidak dikonversi kembali ke Dateobjek. Lihat jawaban ini untuk lebih jelasnya .

Selain itu, harap perhatikan bahwa, setidaknya di Chrome 65, kloning asli bukan cara yang tepat. Menurut JSPerf, melakukan kloning asli dengan membuat fungsi baru hampir 800x lebih lambat daripada menggunakan JSON.stringify yang sangat cepat sepanjang jalan di seluruh papan.

Perbarui untuk ES6

Jika Anda menggunakan Javascript ES6, coba metode asli ini untuk kloning atau salinan dangkal.

Object.assign({}, obj);

Dengan asumsi bahwa Anda hanya memiliki variabel dan tidak ada fungsi di objek Anda, Anda bisa menggunakan:

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

Kloning Terstruktur

Standar HTML mencakup algoritma kloning / serialisasi terstruktur internal yang dapat membuat klon objek dalam. Ini masih terbatas pada tipe bawaan tertentu, tetapi selain beberapa jenis yang didukung oleh JSON, ini juga mendukung Tanggal, RegExps, Peta, Set, Blob, FileLists, ImageDatas, Array yang jarang, Array yang Diketik, dan mungkin lebih banyak di masa depan . Itu juga mempertahankan referensi dalam data kloning, memungkinkannya untuk mendukung struktur siklus dan rekursif yang akan menyebabkan kesalahan untuk JSON.

Dukungan di Node.js: Eksperimental 🙂

The v8modul Node.js saat ini (per Node 11) memperlihatkan serialisasi API terstruktur secara langsung , tetapi fungsi ini masih ditandai sebagai "eksperimental", dan tunduk pada perubahan atau penghapusan dalam versi masa depan. Jika Anda menggunakan versi yang kompatibel, kloning objek semudah:

const v8 = require('v8');

const structuredClone = obj => {
  return v8.deserialize(v8.serialize(obj));
};

Dukungan Langsung di Peramban: Mungkin Akhirnya? 😐

Browser saat ini tidak menyediakan antarmuka langsung untuk algoritma kloning terstruktur, tetapi structuredClone()fungsi global telah dibahas dalam whatwg / html # 793 di GitHub . Seperti yang diusulkan saat ini, menggunakannya untuk sebagian besar tujuan akan sesederhana:

const clone = structuredClone(original);

Kecuali jika ini dikirimkan, implementasi klon terstruktur browser hanya diekspos secara tidak langsung.

Pemecahan Masalah Asinkron: Dapat Digunakan. 😕

Cara overhead yang lebih rendah untuk membuat klon terstruktur dengan API yang ada adalah memposting data melalui satu port dari MessageChannels . Port lain akan memancarkan messageacara dengan klon terstruktur dari terlampir .data. Sayangnya, mendengarkan acara-acara ini selalu asinkron, dan alternatif sinkron kurang praktis.

class StructuredCloner {
  constructor() {
    this.pendingClones_ = new Map();
    this.nextKey_ = 0;

    const channel = new MessageChannel();
    this.inPort_ = channel.port1;
    this.outPort_ = channel.port2;

    this.outPort_.onmessage = ({data: {key, value}}) => {
      const resolve = this.pendingClones_.get(key);
      resolve(value);
      this.pendingClones_.delete(key);
    };
    this.outPort_.start();
  }

  cloneAsync(value) {
    return new Promise(resolve => {
      const key = this.nextKey_++;
      this.pendingClones_.set(key, resolve);
      this.inPort_.postMessage({key, value});
    });
  }
}

const structuredCloneAsync = window.structuredCloneAsync =
    StructuredCloner.prototype.cloneAsync.bind(new StructuredCloner);

Contoh Penggunaan:

const main = async () => {
  const original = { date: new Date(), number: Math.random() };
  original.self = original;

  const clone = await structuredCloneAsync(original);

  // They're different objects:
  console.assert(original !== clone);
  console.assert(original.date !== clone.date);

  // They're cyclical:
  console.assert(original.self === original);
  console.assert(clone.self === clone);

  // They contain equivalent values:
  console.assert(original.number === clone.number);
  console.assert(Number(original.date) === Number(clone.date));

  console.log("Assertions complete.");
};

main();

Solusi Sinkron: Mengerikan! 🤢

Tidak ada opsi yang baik untuk membuat klon terstruktur secara serempak. Berikut adalah beberapa peretasan yang tidak praktis.

history.pushState()dan history.replaceState()keduanya membuat klon terstruktur dari argumen pertama mereka, dan menetapkan nilai itu history.state. Anda dapat menggunakan ini untuk membuat klon terstruktur dari objek apa pun seperti ini:

const structuredClone = obj => {
  const oldState = history.state;
  history.replaceState(obj, null);
  const clonedObj = history.state;
  history.replaceState(oldState, null);
  return clonedObj;
};

Contoh Penggunaan:

'use strict';

const main = () => {
  const original = { date: new Date(), number: Math.random() };
  original.self = original;

  const clone = structuredClone(original);
  
  // They're different objects:
  console.assert(original !== clone);
  console.assert(original.date !== clone.date);

  // They're cyclical:
  console.assert(original.self === original);
  console.assert(clone.self === clone);

  // They contain equivalent values:
  console.assert(original.number === clone.number);
  console.assert(Number(original.date) === Number(clone.date));
  
  console.log("Assertions complete.");
};

const structuredClone = obj => {
  const oldState = history.state;
  history.replaceState(obj, null);
  const clonedObj = history.state;
  history.replaceState(oldState, null);
  return clonedObj;
};

main();

Meskipun sinkron, ini bisa sangat lambat. Itu menimbulkan semua overhead yang terkait dengan memanipulasi riwayat browser. Memanggil metode ini berulang kali dapat menyebabkan Chrome menjadi tidak responsif sementara.

The Notificationkonstruktor menciptakan klon terstruktur data yang terkait. Itu juga mencoba untuk menampilkan pemberitahuan browser kepada pengguna, tetapi ini akan gagal secara diam-diam kecuali Anda telah meminta izin pemberitahuan. Jika Anda memiliki izin untuk tujuan lain, kami akan segera menutup pemberitahuan yang kami buat.

const structuredClone = obj => {
  const n = new Notification('', {data: obj, silent: true});
  n.onshow = n.close.bind(n);
  return n.data;
};

Contoh Penggunaan:

'use strict';

const main = () => {
  const original = { date: new Date(), number: Math.random() };
  original.self = original;

  const clone = structuredClone(original);
  
  // They're different objects:
  console.assert(original !== clone);
  console.assert(original.date !== clone.date);

  // They're cyclical:
  console.assert(original.self === original);
  console.assert(clone.self === clone);

  // They contain equivalent values:
  console.assert(original.number === clone.number);
  console.assert(Number(original.date) === Number(clone.date));
  
  console.log("Assertions complete.");
};

const structuredClone = obj => {
  const n = new Notification('', {data: obj, silent: true});
  n.close();
  return n.data;
};

main();

Jika tidak ada yang builtin, Anda dapat mencoba:

function clone(obj) {
    if (obj === null || typeof (obj) !== 'object' || 'isActiveClone' in obj)
        return obj;

    if (obj instanceof Date)
        var temp = new obj.constructor(); //or new Date(obj);
    else
        var temp = obj.constructor();

    for (var key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
            obj['isActiveClone'] = null;
            temp[key] = clone(obj[key]);
            delete obj['isActiveClone'];
        }
    }
    return temp;
}

Cara efisien untuk mengkloning (bukan deep-clone) suatu objek dalam satu baris kode

Sebuah Object.assign metode 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;
    }
  });
}

Kode:

// extends 'from' object with members from 'to'. If 'to' is null, a deep clone of 'from' is returned
function extend(from, to)
{
    if (from == null || typeof from != "object") return from;
    if (from.constructor != Object && from.constructor != Array) return from;
    if (from.constructor == Date || from.constructor == RegExp || from.constructor == Function ||
        from.constructor == String || from.constructor == Number || from.constructor == Boolean)
        return new from.constructor(from);

    to = to || new from.constructor();

    for (var name in from)
    {
        to[name] = typeof to[name] == "undefined" ? extend(from[name], null) : to[name];
    }

    return to;
}

Uji:

var obj =
{
    date: new Date(),
    func: function(q) { return 1 + q; },
    num: 123,
    text: "asdasd",
    array: [1, "asd"],
    regex: new RegExp(/aaa/i),
    subobj:
    {
        num: 234,
        text: "asdsaD"
    }
}

var clone = extend(obj);

Inilah yang saya gunakan:

function cloneObject(obj) {
    var clone = {};
    for(var i in obj) {
        if(typeof(obj[i])=="object" && obj[i] != null)
            clone[i] = cloneObject(obj[i]);
        else
            clone[i] = obj[i];
    }
    return clone;
}

Salinan mendalam menurut kinerja: Diurutkan dari yang terbaik hingga yang terburuk

• Penugasan kembali "=" (array string, array angka - hanya)
• Slice (array string, array angka - hanya)
• Penggabungan (array string, array angka - hanya)
• Fungsi kustom: untuk loop atau salinan rekursif
• $ .extend jQuery
• JSON.parse (array string, array angka, array objek - hanya)
• Underscore.js 's _.clone (array string, angka array - saja)
• Lo-Dash _.cloneDeep

Menyalin sederetan string atau angka (satu tingkat - tanpa petunjuk referensi):

Ketika array berisi angka dan string - fungsi seperti .slice (), .concat (), .splice (), operator penugasan "=", dan fungsi klon Underscore.js; akan membuat salinan yang dalam dari elemen-elemen array.

Di mana penugasan kembali memiliki kinerja tercepat:

var arr1 = ['a', 'b', 'c'];
var arr2 = arr1;
arr1 = ['a', 'b', 'c'];

Dan .slice () memiliki kinerja yang lebih baik daripada .concat (), http://jsperf.com/duplicate-array-slice-vs-concat/3

var arr1 = ['a', 'b', 'c'];  // Becomes arr1 = ['a', 'b', 'c']
var arr2a = arr1.slice(0);   // Becomes arr2a = ['a', 'b', 'c'] - deep copy
var arr2b = arr1.concat();   // Becomes arr2b = ['a', 'b', 'c'] - deep copy

Menyalin dalam-dalam array objek (dua level atau lebih - pointer referensi):

var arr1 = [{object:'a'}, {object:'b'}];

Tulis fungsi khusus (memiliki kinerja lebih cepat dari $ .extend () atau JSON.parse):

function copy(o) {
   var out, v, key;
   out = Array.isArray(o) ? [] : {};
   for (key in o) {
       v = o[key];
       out[key] = (typeof v === "object" && v !== null) ? copy(v) : v;
   }
   return out;
}

copy(arr1);

Gunakan fungsi utilitas pihak ketiga:

$.extend(true, [], arr1); // Jquery Extend
JSON.parse(arr1);
_.cloneDeep(arr1); // Lo-dash

Di mana $ .extend jQuery memiliki kinerja yang lebih baik:

• http://jsperf.com/js-deep-copy/2
• http://jsperf.com/jquery-extend-vs-json-parse/2

var clone = function() {
    var newObj = (this instanceof Array) ? [] : {};
    for (var i in this) {
        if (this[i] && typeof this[i] == "object") {
            newObj[i] = this[i].clone();
        }
        else
        {
            newObj[i] = this[i];
        }
    }
    return newObj;
}; 

Object.defineProperty( Object.prototype, "clone", {value: clone, enumerable: false});

Menyalin objek dalam JavaScript (saya pikir yang terbaik dan paling sederhana)

1. Menggunakan JSON.parse (JSON.stringify (objek));

var obj = { 
  a: 1,
  b: { 
    c: 2
  }
}
var newObj = JSON.parse(JSON.stringify(obj));
obj.b.c = 20;
console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 2 } } 

2.Menggunakan metode yang dibuat

function cloneObject(obj) {
    var clone = {};
    for(var i in obj) {
        if(obj[i] != null &&  typeof(obj[i])=="object")
            clone[i] = cloneObject(obj[i]);
        else
            clone[i] = obj[i];
    }
    return clone;
}

var obj = { 
  a: 1,
  b: { 
    c: 2
  }
}
var newObj = cloneObject(obj);
obj.b.c = 20;

console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 2 } } 

3. Menggunakan Lo-Dash _.cloneDeep Link lodash

var obj = { 
  a: 1,
  b: { 
    c: 2
  }
}

var newObj = _.cloneDeep(obj);
obj.b.c = 20;
console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 2 } } 

4. Menggunakan metode Object.assign ()

var obj = { 
  a: 1,
  b: 2
}

var newObj = _.clone(obj);
obj.b = 20;
console.log(obj); // { a: 1, b: 20 }
console.log(newObj); // { a: 1, b: 2 }  

TAPI SALAH SAAT

var obj = { 
  a: 1,
  b: { 
    c: 2
  }
}

var newObj = Object.assign({}, obj);
obj.b.c = 20;
console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 20 } } --> WRONG
// Note: Properties on the prototype chain and non-enumerable properties cannot be copied.

5.Menggunakan tautan Underscore.js _.clone Underscore.js

var obj = { 
  a: 1,
  b: 2
}

var newObj = _.clone(obj);
obj.b = 20;
console.log(obj); // { a: 1, b: 20 }
console.log(newObj); // { a: 1, b: 2 }  

TAPI SALAH SAAT

var obj = { 
  a: 1,
  b: { 
    c: 2
  }
}

var newObj = _.cloneDeep(obj);
obj.b.c = 20;
console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 20 } } --> WRONG
// (Create a shallow-copied clone of the provided plain object. Any nested objects or arrays will be copied by reference, not duplicated.)

JSBEN.CH Play Benchmarking Performance 1 ~ 3 http://jsben.ch/KVQLd

Ada perpustakaan (disebut "clone") , yang melakukan ini dengan cukup baik. Ini memberikan kloning / penyalinan rekursif paling lengkap dari objek arbitrer yang saya tahu. Ini juga mendukung referensi melingkar, yang belum tercakup oleh jawaban lain, belum.

Anda dapat menemukannya di npm , juga. Ini dapat digunakan untuk browser dan juga Node.js.

Berikut adalah contoh cara menggunakannya:

Instal dengan

npm install clone

atau bungkus dengan Ender .

ender build clone [...]

Anda juga dapat mengunduh kode sumber secara manual.

Kemudian Anda dapat menggunakannya dalam kode sumber Anda.

var clone = require('clone');

var a = { foo: { bar: 'baz' } };  // inital value of a
var b = clone(a);                 // clone a -> b
a.foo.bar = 'foo';                // change a

console.log(a);                   // { foo: { bar: 'foo' } }
console.log(b);                   // { foo: { bar: 'baz' } }

(Penafian: Saya penulis perpustakaan.)

Cloning sebuah Object selalu menjadi perhatian di JS, tetapi itu semua tentang sebelum ES6, saya mendaftar berbagai cara menyalin objek dalam JavaScript di bawah ini, bayangkan Anda memiliki Object di bawah ini dan ingin memiliki salinan yang dalam tentang itu:

var obj = {a:1, b:2, c:3, d:4};

Ada beberapa cara untuk menyalin objek ini, tanpa mengubah asal:

1) ES5 +, Menggunakan fungsi sederhana untuk melakukan penyalinan untuk Anda:

function deepCopyObj(obj) {
    if (null == obj || "object" != typeof obj) return obj;
    if (obj instanceof Date) {
        var copy = new Date();
        copy.setTime(obj.getTime());
        return copy;
    }
    if (obj instanceof Array) {
        var copy = [];
        for (var i = 0, len = obj.length; i < len; i++) {
            copy[i] = cloneSO(obj[i]);
        }
        return copy;
    }
    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 this object.");
}

2) ES5 +, menggunakan JSON.parse dan JSON.stringify.

var  deepCopyObj = JSON.parse(JSON.stringify(obj));

3) AngularJs:

var  deepCopyObj = angular.copy(obj);

4) jQuery:

var deepCopyObj = jQuery.extend(true, {}, obj);

5) Garis BawahJs & Loadash:

var deepCopyObj = _.cloneDeep(obj); //latest version UndescoreJs makes shallow copy

Semoga bantuan ini ...

Saya tahu ini adalah posting lama, tapi saya pikir ini mungkin bisa membantu orang berikutnya yang tersandung.

Selama Anda tidak menetapkan objek untuk apa pun itu tidak memiliki referensi dalam memori. Jadi untuk membuat objek yang ingin Anda bagikan di antara objek lain, Anda harus membuat pabrik seperti:

var a = function(){
    return {
        father:'zacharias'
    };
},
b = a(),
c = a();
c.father = 'johndoe';
alert(b.father);

Jika Anda menggunakannya, perpustakaan Underscore.js memiliki metode klon .

var newObject = _.clone(oldObject);

Berikut versi jawaban ConroyP di atas yang berfungsi bahkan jika konstruktor memiliki parameter yang diperlukan:

//If Object.create isn't already defined, we just do the simple shim,
//without the second argument, since that's all we need here
var object_create = Object.create;
if (typeof object_create !== 'function') {
    object_create = function(o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}

function deepCopy(obj) {
    if(obj == null || typeof(obj) !== 'object'){
        return obj;
    }
    //make sure the returned object has the same prototype as the original
    var ret = object_create(obj.constructor.prototype);
    for(var key in obj){
        ret[key] = deepCopy(obj[key]);
    }
    return ret;
}

Fungsi ini juga tersedia di perpustakaan simpleoo saya .

Edit:

Ini versi yang lebih kuat (terima kasih kepada Justin McCandless, ini sekarang mendukung referensi siklik juga):

/**
 * Deep copy an object (make copies of all its object properties, sub-properties, etc.)
 * An improved version of http://keithdevens.com/weblog/archive/2007/Jun/07/javascript.clone
 * that doesn't break if the constructor has required parameters
 * 
 * It also borrows some code from http://stackoverflow.com/a/11621004/560114
 */ 
function deepCopy(src, /* INTERNAL */ _visited, _copiesVisited) {
    if(src === null || typeof(src) !== 'object'){
        return src;
    }

    //Honor native/custom clone methods
    if(typeof src.clone == 'function'){
        return src.clone(true);
    }

    //Special cases:
    //Date
    if(src instanceof Date){
        return new Date(src.getTime());
    }
    //RegExp
    if(src instanceof RegExp){
        return new RegExp(src);
    }
    //DOM Element
    if(src.nodeType && typeof src.cloneNode == 'function'){
        return src.cloneNode(true);
    }

    // Initialize the visited objects arrays if needed.
    // This is used to detect cyclic references.
    if (_visited === undefined){
        _visited = [];
        _copiesVisited = [];
    }

    // Check if this object has already been visited
    var i, len = _visited.length;
    for (i = 0; i < len; i++) {
        // If so, get the copy we already made
        if (src === _visited[i]) {
            return _copiesVisited[i];
        }
    }

    //Array
    if (Object.prototype.toString.call(src) == '[object Array]') {
        //[].slice() by itself would soft clone
        var ret = src.slice();

        //add it to the visited array
        _visited.push(src);
        _copiesVisited.push(ret);

        var i = ret.length;
        while (i--) {
            ret[i] = deepCopy(ret[i], _visited, _copiesVisited);
        }
        return ret;
    }

    //If we've reached here, we have a regular object

    //make sure the returned object has the same prototype as the original
    var proto = (Object.getPrototypeOf ? Object.getPrototypeOf(src): src.__proto__);
    if (!proto) {
        proto = src.constructor.prototype; //this line would probably only be reached by very old browsers 
    }
    var dest = object_create(proto);

    //add this object to the visited array
    _visited.push(src);
    _copiesVisited.push(dest);

    for (var key in src) {
        //Note: this does NOT preserve ES5 property attributes like 'writable', 'enumerable', etc.
        //For an example of how this could be modified to do so, see the singleMixin() function
        dest[key] = deepCopy(src[key], _visited, _copiesVisited);
    }
    return dest;
}

//If Object.create isn't already defined, we just do the simple shim,
//without the second argument, since that's all we need here
var object_create = Object.create;
if (typeof object_create !== 'function') {
    object_create = function(o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}

Berikut ini membuat dua instance dari objek yang sama. Saya menemukannya dan saya menggunakannya saat ini. Ini sederhana dan mudah digunakan.

var objToCreate = JSON.parse(JSON.stringify(cloneThis));

Crockford menyarankan (dan saya lebih suka) menggunakan fungsi ini:

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

var newObject = object(oldObject);

Ini singkat, berfungsi seperti yang diharapkan dan Anda tidak perlu perpustakaan.

EDIT:

Ini untuk polyfill Object.create, jadi Anda juga bisa menggunakan ini.

var newObject = Object.create(oldObject);

CATATAN: Jika Anda menggunakan beberapa dari ini, Anda mungkin memiliki masalah dengan beberapa iterasi yang digunakan hasOwnProperty. Karena, createbuat objek kosong baru yang mewarisi oldObject. Tetapi masih bermanfaat dan praktis untuk objek kloning.

Contohnya jika oldObject.a = 5;

newObject.a; // is 5

tapi:

oldObject.hasOwnProperty(a); // is true
newObject.hasOwnProperty(a); // is false

Lodash memiliki metode _.cloneDeep (nilai) yang bagus:

var objects = [{ 'a': 1 }, { 'b': 2 }];

var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

function clone(obj)
 { var clone = {};
   clone.prototype = obj.prototype;
   for (property in obj) clone[property] = obj[property];
   return clone;
 }

Salinan satu baris dangkal ( ECMAScript edisi ke-5 ):

var origin = { foo : {} };
var copy = Object.keys(origin).reduce(function(c,k){c[k]=origin[k];return c;},{});

console.log(origin, copy);
console.log(origin == copy); // false
console.log(origin.foo == copy.foo); // true

Dan salin dangkal satu-liner ( ECMAScript edisi 6 , 2015):

var origin = { foo : {} };
var copy = Object.assign({}, origin);

console.log(origin, copy);
console.log(origin == copy); // false
console.log(origin.foo == copy.foo); // true

Hanya karena saya tidak melihat AngularJS disebutkan dan berpikir bahwa orang mungkin ingin tahu ...

angular.copy juga menyediakan metode menyalin objek dan array.

Tampaknya belum ada operator deep clone yang ideal untuk objek mirip array. Seperti yang diilustrasikan oleh kode di bawah ini, cloner jQuery John Resig mengubah array dengan properti non-numerik menjadi objek yang bukan array, dan klon JSON RegDwight menjatuhkan properti non-numerik. Tes berikut menggambarkan poin-poin ini pada beberapa browser:

function jQueryClone(obj) {
   return jQuery.extend(true, {}, obj)
}

function JSONClone(obj) {
   return JSON.parse(JSON.stringify(obj))
}

var arrayLikeObj = [[1, "a", "b"], [2, "b", "a"]];
arrayLikeObj.names = ["m", "n", "o"];
var JSONCopy = JSONClone(arrayLikeObj);
var jQueryCopy = jQueryClone(arrayLikeObj);

alert("Is arrayLikeObj an array instance?" + (arrayLikeObj instanceof Array) +
      "\nIs the jQueryClone an array instance? " + (jQueryCopy instanceof Array) +
      "\nWhat are the arrayLikeObj names? " + arrayLikeObj.names +
      "\nAnd what are the JSONClone names? " + JSONCopy.names)

Saya punya dua jawaban yang baik tergantung pada apakah tujuan Anda adalah untuk mengkloning "objek JavaScript lama biasa" atau tidak.

Mari kita juga berasumsi bahwa niat Anda adalah untuk membuat klon lengkap tanpa referensi prototipe kembali ke objek sumber. Jika Anda tidak tertarik pada klon lengkap, maka Anda dapat menggunakan banyak rutin Object.clone () yang disediakan di beberapa jawaban lain (pola Crockford).

Untuk objek JavaScript lama biasa, cara yang baik dan benar untuk mengkloning objek dalam runtimes modern cukup sederhana:

var clone = JSON.parse(JSON.stringify(obj));

Perhatikan bahwa objek sumber harus objek JSON murni. Dengan kata lain, semua properti bersarangnya harus skalar (seperti boolean, string, array, objek, dll). Fungsi atau objek khusus seperti RegExp atau Date tidak akan dikloning.

Apakah efisien? Heck ya. Kami telah mencoba semua jenis metode kloning dan ini bekerja paling baik. Saya yakin beberapa ninja bisa menyulap metode yang lebih cepat. Tapi saya curiga kita berbicara tentang keuntungan marjinal.

Pendekatan ini sederhana dan mudah diimplementasikan. Bungkus menjadi fungsi kenyamanan dan jika Anda benar-benar perlu memeras keuntungan, lakukan di lain waktu.

Sekarang, untuk objek JavaScript yang tidak jelas, tidak ada jawaban yang sangat sederhana. Bahkan, tidak mungkin ada karena sifat dinamis fungsi JavaScript dan keadaan objek batin. Kloning mendalam struktur JSON dengan fungsi di dalamnya mengharuskan Anda membuat ulang fungsi-fungsi itu dan konteks dalamnya. Dan JavaScript sama sekali tidak memiliki cara standar untuk melakukan itu.

Cara yang benar untuk melakukan ini, sekali lagi, adalah melalui metode kenyamanan yang Anda nyatakan dan gunakan kembali dalam kode Anda. Metode kenyamanan dapat diberkahi dengan beberapa pemahaman tentang objek Anda sendiri sehingga Anda dapat memastikan untuk membuat kembali grafik dengan benar dalam objek baru.

Kami menulis sendiri, tetapi pendekatan umum terbaik yang pernah saya lihat dibahas di sini:

http://davidwalsh.name/javascript-clone

Ini ide yang tepat. Penulis (David Walsh) telah berkomentar kloning fungsi umum. Ini adalah sesuatu yang mungkin Anda pilih untuk dilakukan, tergantung pada kasus penggunaan Anda.

Gagasan utamanya adalah bahwa Anda perlu menangani instantiasi fungsi Anda secara khusus (atau kelas prototipal), berdasarkan tipe per. Di sini, dia memberikan beberapa contoh untuk RegExp dan Tanggal.

Tidak hanya kode ini singkat, tetapi juga sangat mudah dibaca. Cukup mudah untuk diperpanjang.

Apakah ini efisien? Heck ya. Mengingat tujuannya adalah untuk menghasilkan tiruan salinan-dalam yang benar, maka Anda harus memandu anggota-anggota dari grafik objek sumber. Dengan pendekatan ini, Anda dapat mengubah anggota anak mana yang harus dirawat dan cara menangani jenis kustom secara manual.

Jadi begitulah. Dua pendekatan. Keduanya efisien menurut saya.

Ini biasanya bukan solusi yang paling efisien, tetapi ia melakukan apa yang saya butuhkan. Kotak uji sederhana di bawah ...

function clone(obj, clones) {
    // Makes a deep copy of 'obj'. Handles cyclic structures by
    // tracking cloned obj's in the 'clones' parameter. Functions 
    // are included, but not cloned. Functions members are cloned.
    var new_obj,
        already_cloned,
        t = typeof obj,
        i = 0,
        l,
        pair; 

    clones = clones || [];

    if (obj === null) {
        return obj;
    }

    if (t === "object" || t === "function") {

        // check to see if we've already cloned obj
        for (i = 0, l = clones.length; i < l; i++) {
            pair = clones[i];
            if (pair[0] === obj) {
                already_cloned = pair[1];
                break;
            }
        }

        if (already_cloned) {
            return already_cloned; 
        } else {
            if (t === "object") { // create new object
                new_obj = new obj.constructor();
            } else { // Just use functions as is
                new_obj = obj;
            }

            clones.push([obj, new_obj]); // keep track of objects we've cloned

            for (key in obj) { // clone object members
                if (obj.hasOwnProperty(key)) {
                    new_obj[key] = clone(obj[key], clones);
                }
            }
        }
    }
    return new_obj || obj;
}

Tes susunan siklik ...

a = []
a.push("b", "c", a)
aa = clone(a)
aa === a //=> false
aa[2] === a //=> false
aa[2] === a[2] //=> false
aa[2] === aa //=> true

Tes fungsi ...

f = new Function
f.a = a
ff = clone(f)
ff === f //=> true
ff.a === a //=> false

AngularJS

Nah, jika Anda menggunakan sudut Anda bisa melakukan ini juga

var newObject = angular.copy(oldObject);

Saya tidak setuju dengan jawaban dengan suara terbesar di sini . Sebuah Rekursif Jauh Clone adalah jauh lebih cepat daripada JSON.parse (JSON.stringify (obj)) pendekatan disebutkan.

• Jsperf peringkat itu nomor satu di sini: https://jsperf.com/deep-copy-vs-json-stringify-json-parse/5
• Jsben dari jawaban di atas diperbarui untuk menunjukkan bahwa klon dalam rekursif mengalahkan semua yang lain yang disebutkan: http://jsben.ch/13YKQ

Dan inilah fungsi untuk referensi cepat:

function cloneDeep (o) {
  let newO
  let i

  if (typeof o !== 'object') return o

  if (!o) return o

  if (Object.prototype.toString.apply(o) === '[object Array]') {
    newO = []
    for (i = 0; i < o.length; i += 1) {
      newO[i] = cloneDeep(o[i])
    }
    return newO
  }

  newO = {}
  for (i in o) {
    if (o.hasOwnProperty(i)) {
      newO[i] = cloneDeep(o[i])
    }
  }
  return newO
}

// obj target object, vals source object
var setVals = function (obj, vals) {
    if (obj && vals) {
        for (var x in vals) {
            if (vals.hasOwnProperty(x)) {
                if (obj[x] && typeof vals[x] === 'object') {
                    obj[x] = setVals(obj[x], vals[x]);
                } else {
                    obj[x] = vals[x];
                }
            }
        }
    }
    return obj;
};

Hanya ketika Anda bisa menggunakan ECMAScript 6 atau transpiler .

Fitur:

• Tidak akan memicu pengambil / penyetel saat menyalin.
• Mempertahankan pengambil / penyetel.
• Mempertahankan informasi prototipe.
• Bekerja dengan gaya penulisan OO objek-literal dan fungsional .

Kode:

function clone(target, source){

    for(let key in source){

        // Use getOwnPropertyDescriptor instead of source[key] to prevent from trigering setter/getter.
        let descriptor = Object.getOwnPropertyDescriptor(source, key);
        if(descriptor.value instanceof String){
            target[key] = new String(descriptor.value);
        }
        else if(descriptor.value instanceof Array){
            target[key] = clone([], descriptor.value);
        }
        else if(descriptor.value instanceof Object){
            let prototype = Reflect.getPrototypeOf(descriptor.value);
            let cloneObject = clone({}, descriptor.value);
            Reflect.setPrototypeOf(cloneObject, prototype);
            target[key] = cloneObject;
        }
        else {
            Object.defineProperty(target, key, descriptor);
        }
    }
    let prototype = Reflect.getPrototypeOf(source);
    Reflect.setPrototypeOf(target, prototype);
    return target;
}

Berikut adalah metode clone () komprehensif yang dapat mengkloning objek JavaScript apa pun. Ini menangani hampir semua kasus:

function clone(src, deep) {

    var toString = Object.prototype.toString;
    if (!src && typeof src != "object") {
        // Any non-object (Boolean, String, Number), null, undefined, NaN
        return src;
    }

    // Honor native/custom clone methods
    if (src.clone && toString.call(src.clone) == "[object Function]") {
        return src.clone(deep);
    }

    // DOM elements
    if (src.nodeType && toString.call(src.cloneNode) == "[object Function]") {
        return src.cloneNode(deep);
    }

    // Date
    if (toString.call(src) == "[object Date]") {
        return new Date(src.getTime());
    }

    // RegExp
    if (toString.call(src) == "[object RegExp]") {
        return new RegExp(src);
    }

    // Function
    if (toString.call(src) == "[object Function]") {

        //Wrap in another method to make sure == is not true;
        //Note: Huge performance issue due to closures, comment this :)
        return (function(){
            src.apply(this, arguments);
        });
    }

    var ret, index;
    //Array
    if (toString.call(src) == "[object Array]") {
        //[].slice(0) would soft clone
        ret = src.slice();
        if (deep) {
            index = ret.length;
            while (index--) {
                ret[index] = clone(ret[index], true);
            }
        }
    }
    //Object
    else {
        ret = src.constructor ? new src.constructor() : {};
        for (var prop in src) {
            ret[prop] = deep
                ? clone(src[prop], true)
                : src[prop];
        }
    }
    return ret;
};