วิธีที่มีประสิทธิภาพมากที่สุดในการโคลนวัตถุ JavaScript คืออะไร? ฉันเห็นว่าobj = eval(uneval(o));มีการใช้งาน แต่ไม่ได้มาตรฐานและรองรับโดย Firefoxเท่านั้น

ฉันทำสิ่งต่าง ๆ เช่นobj = JSON.parse(JSON.stringify(o));แต่ถามถึงประสิทธิภาพ

ฉันยังเห็นฟังก์ชั่นการคัดลอกซ้ำด้วยข้อบกพร่องต่าง ๆ
ฉันประหลาดใจที่ไม่มีวิธีแก้ปัญหาที่ยอมรับได้

การโคลนนิ่งลึกแบบเนทีฟ

มันเรียกว่า "การโคลนแบบมีโครงสร้าง" ทำงานทดลองในโหนด 11 และใหม่กว่าและหวังว่าจะได้รับในเบราว์เซอร์ ดูคำตอบนี้สำหรับรายละเอียดเพิ่มเติม

การโคลนอย่างรวดเร็วด้วยการสูญเสียข้อมูล - JSON.parse / stringify

หากคุณไม่ได้ใช้Dateของฟังก์ชั่นundefined, Infinity, regexps, Maps, ชุด Blobs, filelists, ImageDatas อาร์เรย์เบาบางประเภทอาร์เรย์หรือชนิดอื่น ๆ ที่ซับซ้อนภายในวัตถุของคุณเป็นหนึ่งซับง่ายมากที่จะโคลนลึกวัตถุคือ:

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

ดูคำตอบของ Corbanสำหรับการวัดประสิทธิภาพ

การโคลนที่เชื่อถือได้โดยใช้ห้องสมุด

เนื่องจากการโคลนวัตถุนั้นไม่สำคัญ (ประเภทที่ซับซ้อน, การอ้างอิงแบบวงกลม, ฟังก์ชั่นอื่น ๆ ), ไลบรารีที่สำคัญส่วนใหญ่จึงให้ฟังก์ชันการโคลนวัตถุ อย่าบูรณาการล้อ - หากคุณใช้ห้องสมุดอยู่แล้วให้ตรวจสอบว่ามีฟังก์ชันการโคลนวัตถุหรือไม่ ตัวอย่างเช่น,

• Lodash - cloneDeep; สามารถนำเข้าแยกต่างหากผ่านโมดูลlodash.clonedeepและอาจเป็นทางเลือกที่ดีที่สุดของคุณหากคุณยังไม่ได้ใช้ห้องสมุดที่มีฟังก์ชั่นการโคลนนิ่งลึก
• AngularJS - angular.copy
• jQuery - jQuery.extend(true, { }, oldObject); .clone()โคลนองค์ประกอบ DOM เท่านั้น

ES6

เพื่อความสมบูรณ์ทราบว่า ES6 มีสองกลไกสำเนาตื้นObject.assign()และไวยากรณ์การแพร่กระจาย ซึ่งคัดลอกค่าของคุณสมบัติของตัวเองที่นับได้ทั้งหมดจากวัตถุหนึ่งไปยังอีก ตัวอย่างเช่น:

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

ชำระเงินมาตรฐานนี้: http://jsben.ch/#/bWfk9

ในการทดสอบก่อนหน้าของฉันที่ฉันพบว่าความเร็วเป็นปัญหาหลัก

JSON.parse(JSON.stringify(obj))

เพื่อเป็นวิธีที่ช้าที่สุดในการโคลนวัตถุ (ช้ากว่าjQuery.extendด้วยการdeepตั้งค่าสถานะจริง 10-20%)

jQuery.extend ค่อนข้างเร็วเมื่อdeepตั้งค่าสถานะเป็นfalse(โคลนตื้น) มันเป็นตัวเลือกที่ดีเพราะมันมีตรรกะพิเศษบางอย่างสำหรับการตรวจสอบประเภทและไม่คัดลอกคุณสมบัติที่ไม่ได้กำหนด ฯลฯ แต่สิ่งนี้จะทำให้คุณช้าลงเล็กน้อย

ถ้าคุณรู้โครงสร้างของวัตถุที่คุณพยายามโคลนหรือหลีกเลี่ยงอาร์เรย์ที่ซ้อนกันลึกคุณสามารถเขียนfor (var i in obj)วนรอบอย่างง่าย ๆเพื่อโคลนวัตถุของคุณขณะตรวจสอบ hasOwnProperty และมันจะเร็วกว่า jQuery มาก

สุดท้ายถ้าคุณพยายามที่จะโคลนโครงสร้างวัตถุที่รู้จักกันในวงร้อนคุณสามารถได้รับประสิทธิภาพมากขึ้นโดยเพียงแค่ในขั้นตอนการโคลนกระบวนการและสร้างวัตถุด้วยตนเอง

เอ็นจินการติดตาม JavaScript จะดูดการปรับfor..inลูปให้เหมาะสมและการตรวจสอบ hasOwnProperty จะทำให้คุณช้าลงเช่นกัน โคลนด้วยตนเองเมื่อต้องมีความเร็วแน่นอน

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

ระวังการใช้JSON.parse(JSON.stringify(obj))วิธีการกับDateวัตถุ - JSON.stringify(new Date())คืนค่าการแสดงสตริงของวันที่ในรูปแบบ ISO ซึ่งJSON.parse() จะไม่แปลงกลับเป็นDateวัตถุ ดูคำตอบนี้สำหรับรายละเอียดเพิ่มเติม

นอกจากนี้โปรดทราบว่าอย่างน้อยใน Chrome 65 การโคลนนิ่งดั้งเดิมไม่ใช่วิธีที่จะไป ตาม JSPerf ละครโคลนพื้นเมืองโดยการสร้างฟังก์ชั่นใหม่เกือบ800xช้ากว่าการใช้ JSON.stringify ซึ่งเป็นไปอย่างรวดเร็วอย่างไม่น่าเชื่อทุกทางทั่วกระดาน

อัพเดทสำหรับ ES6

หากคุณกำลังใช้ Javascript ES6 ลองใช้วิธีเนทีฟนี้เพื่อคัดลอกหรือคัดลอกตื้น

Object.assign({}, obj);

สมมติว่าคุณมีตัวแปรเท่านั้นและไม่มีฟังก์ชั่นใด ๆ ในวัตถุของคุณคุณสามารถใช้:

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

การโคลนโครงสร้าง

มาตรฐาน HTML รวมถึงอัลกอริทึมการโคลนนิ่ง / การทำให้เป็นอนุกรมที่สามารถสร้างโคลนของวัตถุได้ มันยัง จำกัด เฉพาะบางประเภทในตัว แต่นอกเหนือจากบางประเภทที่รองรับโดย JSON มันยังรองรับวันที่ RegExps แผนที่ชุด Blobs, FileLists, ImageDatas, เบาบางอาร์เรย์อาร์เรย์ที่พิมพ์และอาจเพิ่มเติมในอนาคต . นอกจากนี้ยังเก็บรักษาการอ้างอิงภายในข้อมูลที่ถูกโคลนทำให้สามารถสนับสนุนโครงสร้างแบบวนซ้ำและแบบวนซ้ำซึ่งจะทำให้เกิดข้อผิดพลาดสำหรับ JSON

การสนับสนุนใน Node.js: ทดลอง🙂

v8โมดูลใน Node.js ปัจจุบัน ( ณ วันที่โหนด 11) exposes อนุกรม API โครงสร้างโดยตรงแต่การทำงานนี้จะยังคงระบุว่าเป็น "การทดลอง" และอาจมีการเปลี่ยนแปลงหรือการกำจัดในรุ่นอนาคต หากคุณกำลังใช้รุ่นที่เข้ากันได้การโคลนวัตถุนั้นง่ายพอ ๆ กับ:

const v8 = require('v8');

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

การสนับสนุนโดยตรงในเบราว์เซอร์: บางทีในที่สุด? 😐

เบราว์เซอร์ยังไม่ให้ติดต่อโดยตรงสำหรับขั้นตอนวิธีการโคลนโครงสร้าง แต่ทั่วโลกstructuredClone()ฟังก์ชั่นที่ได้รับการกล่าวถึงในWHATWG / html # 793 บน GitHub ตามที่เสนอในปัจจุบันการใช้เพื่อวัตถุประสงค์ส่วนใหญ่จะง่ายเหมือน:

const clone = structuredClone(original);

การใช้งานโคลนโครงสร้างของเบราว์เซอร์จะถูกเปิดเผยทางอ้อมเว้นแต่จะมีการส่ง

วิธีแก้ปัญหาแบบอะซิงโครนัส: ใช้งานได้ 😕

วิธีลดค่าใช้จ่ายในการสร้างโครงสร้างโคลนด้วย API ที่มีอยู่คือการโพสต์ข้อมูลผ่านพอร์ตหนึ่งในMessageChannels พอร์ตอื่น ๆ จะออกมาเป็นเหตุการณ์ที่มีโคลนโครงสร้างของที่แนบมาmessage .dataน่าเสียดายที่การฟังเหตุการณ์เหล่านี้ไม่จำเป็นต้องเป็นแบบอะซิงโครนัสและทางเลือกแบบซิงโครนัสนั้นใช้งานได้น้อยกว่า

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

ตัวอย่างการใช้:

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

วิธีแก้ปัญหาแบบซิงโครนัส: น่ากลัว! 🤢

ไม่มีตัวเลือกที่ดีสำหรับการสร้างโคลนที่มีโครงสร้างพร้อมกัน นี่คือแฮ็กทำไม่ได้สองสามอันแทน

history.pushState()และทั้งสร้างโคลนโครงสร้างของอาร์กิวเมนต์แรกของพวกเขาและกำหนดค่าที่จะhistory.replaceState() history.stateคุณสามารถใช้สิ่งนี้เพื่อสร้างโคลนโครงสร้างของวัตถุใด ๆ เช่นนี้

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

ตัวอย่างการใช้:

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

แม้ว่าจะเป็นแบบซิงโครนัสนี่อาจช้ามาก มันเกิดขึ้นทั้งหมดค่าใช้จ่ายที่เกี่ยวข้องกับการจัดการประวัติเบราว์เซอร์ การเรียกวิธีนี้ซ้ำ ๆ อาจทำให้ Chrome ไม่ตอบสนองชั่วคราว

คอนNotificationสตรัคสร้างโคลนโครงสร้างของข้อมูลที่เกี่ยวข้อง นอกจากนี้ยังพยายามแสดงการแจ้งเตือนของเบราว์เซอร์แก่ผู้ใช้ แต่สิ่งนี้จะล้มเหลวอย่างเงียบ ๆ เว้นแต่คุณได้ขออนุญาตการแจ้งเตือน ในกรณีที่คุณได้รับอนุญาตเพื่อวัตถุประสงค์อื่นเราจะปิดการแจ้งเตือนที่เราสร้างขึ้นทันที

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

ตัวอย่างการใช้:

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

หากไม่มีสิ่งก่อสร้างใด ๆ คุณสามารถลอง:

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

วิธีที่มีประสิทธิภาพในการโคลน (ไม่ใช่การโคลนลึก) วัตถุในโค้ดหนึ่งบรรทัด

Object.assignวิธีการเป็นส่วนหนึ่งของ ECMAScript ปี 2015 (ES6) มาตรฐานและไม่ตรงกับสิ่งที่คุณต้องการ

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

วิธีการ Object.assign () ใช้ในการคัดลอกค่าของคุณสมบัติของตัวเองที่แจกแจงทั้งหมดจากวัตถุต้นทางอย่างน้อยหนึ่งรายการไปยังวัตถุเป้าหมาย

อ่านเพิ่มเติม...

polyfillเพื่อสนับสนุนเบราว์เซอร์รุ่นเก่า:

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

รหัส:

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

ทดสอบ:

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

นี่คือสิ่งที่ฉันกำลังใช้:

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

คัดลอกอย่างลึกซึ้งตามประสิทธิภาพ: จัดอันดับจากดีที่สุดไปหาต่ำที่สุด

• การกำหนดใหม่ "=" (อาร์เรย์สตริง, อาร์เรย์ตัวเลข - เท่านั้น)
• Slice (อาร์เรย์สตริง, อาร์เรย์ตัวเลข - เท่านั้น)
• การต่อข้อมูล (สตริงอาร์เรย์, อาร์เรย์ตัวเลข - เท่านั้น)
• ฟังก์ชั่นที่กำหนดเอง: สำหรับวงวนหรือสำเนาซ้ำ
• jQuery's $ .extend
• JSON.parse (อาร์เรย์สตริง, อาร์เรย์ตัวเลข, อ็อบเจ็กต์อาร์เรย์ - เท่านั้น)
• Underscore.js 's _.clone (อาร์เรย์สตริงอาร์เรย์จำนวน - เท่านั้น)
• Lo-Dash's _.cloneDeep

คัดลอกอาร์เรย์ของสตริงหรือตัวเลขอย่างลึกซึ้ง (หนึ่งระดับ - ไม่มีตัวชี้อ้างอิง):

เมื่ออาร์เรย์มีตัวเลขและสตริง - ฟังก์ชันเช่น .slice (), .concat (), .splice (), ตัวดำเนินการกำหนดค่า "=", และฟังก์ชันโคลนของ Underscore.js จะทำการคัดลอกองค์ประกอบของอาร์เรย์อย่างละเอียด

ในกรณีที่การโอนสิทธิมีประสิทธิภาพที่เร็วที่สุด:

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

และ .slice () มีประสิทธิภาพที่ดีกว่า. catcat (), 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

คัดลอกอาเรย์ของวัตถุอย่างลึก (อย่างน้อยสองระดับ - พอยน์เตอร์อ้างอิง):

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

เขียนฟังก์ชั่นที่กำหนดเอง (มีประสิทธิภาพเร็วกว่า $ .extend () หรือ 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);

ใช้ฟังก์ชั่นยูทิลิตี้ของบุคคลที่สาม:

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

โดยที่ $ .extend ของ jQuery มีประสิทธิภาพที่ดีกว่า:

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

คัดลอกวัตถุใน JavaScript อย่างลึกซึ้ง (ฉันคิดว่าดีที่สุดและง่ายที่สุด)

1. การใช้ JSON.parse (JSON.stringify (object));

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. ใช้วิธีการที่สร้างขึ้น

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. ใช้ลิงก์_.cloneDeepลิงก์ของ Lo-Dash

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. การใช้วิธี 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 }  

แต่ผิดเมื่อ

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. การใช้ 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 }  

แต่ผิดเมื่อ

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 การเปรียบเทียบสมรรถนะสนามเด็กเล่น 1 ~ 3 http://jsben.ch/KVQLd

มีห้องสมุด (เรียกว่า "โคลน")ซึ่งทำได้ค่อนข้างดี มันมีการโคลนซ้ำ / คัดลอกวัตถุโดยพลการที่สมบูรณ์ที่สุดที่ฉันรู้ นอกจากนี้ยังรองรับการอ้างอิงแบบวงกลมซึ่งยังไม่ครอบคลุมโดยคำตอบอื่น ๆ

คุณสามารถค้นหาได้ในเวลา 23.00น. เช่นกัน มันสามารถใช้สำหรับเบราว์เซอร์เช่นเดียวกับ Node.js

นี่คือตัวอย่างวิธีการใช้งาน:

ติดตั้งด้วย

npm install clone

หรือแพคเกจกับเอนเดอร์

ender build clone [...]

คุณสามารถดาวน์โหลดซอร์สโค้ดด้วยตนเอง

จากนั้นคุณสามารถใช้มันในซอร์สโค้ดของคุณ

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

(ข้อจำกัดความรับผิดชอบ: ฉันเป็นผู้แต่งห้องสมุด)

Cloning วัตถุนั้นเป็นเรื่องที่น่ากังวลเสมอใน JS แต่มันเป็นเรื่องเกี่ยวกับ ES6 ก่อนหน้านี้ฉันทำรายการวิธีที่แตกต่างของการคัดลอกวัตถุใน JavaScript ด้านล่างจินตนาการว่าคุณมี Object ด้านล่างและต้องการสำเนาที่ลึก:

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

การคัดลอกวัตถุนี้มีวิธีไม่กี่วิธีโดยไม่ต้องเปลี่ยนจุดเริ่มต้น:

1) ES5 +, ใช้ฟังก์ชั่นง่ายๆในการทำสำเนาสำหรับคุณ:

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 + ใช้ JSON.parse และ 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) UnderscoreJs & Loadash:

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

หวังว่าความช่วยเหลือเหล่านี้ ...

ฉันรู้ว่านี่เป็นโพสต์เก่า แต่ฉันคิดว่านี่อาจเป็นประโยชน์กับคนต่อไปที่สะดุด

ตราบใดที่คุณไม่ได้กำหนดวัตถุให้กับสิ่งใดมันก็คงไม่มีการอ้างอิงในหน่วยความจำ ดังนั้นในการสร้างวัตถุที่คุณต้องการแบ่งปันระหว่างวัตถุอื่นคุณจะต้องสร้างโรงงานเช่น:

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

หากคุณกำลังใช้งานไลบรารีUnderscore.jsมีวิธีการโคลน

var newObject = _.clone(oldObject);

นี่คือเวอร์ชันของคำตอบของ ConroyP ด้านบนที่ใช้งานได้แม้ว่าตัวสร้างมีพารามิเตอร์ที่ต้องการ:

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

ฟังก์ชั่นนี้ยังมีอยู่ในห้องสมุดsimpleooของฉัน

แก้ไข:

นี่เป็นรุ่นที่แข็งแกร่งกว่านี้ (ขอบคุณ Justin McCandless ซึ่งตอนนี้รองรับการอ้างอิงแบบวนด้วย):

/**
 * 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();
    };
}

ต่อไปนี้สร้างสองอินสแตนซ์ของวัตถุเดียวกัน ฉันพบมันและกำลังใช้งานอยู่ในขณะนี้ มันง่ายและใช้งานง่าย

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

Crockford แนะนำ (และฉันชอบ) โดยใช้ฟังก์ชั่นนี้:

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

var newObject = object(oldObject);

มันสั้นทำงานได้ตามที่คาดหวังและคุณไม่ต้องการห้องสมุด

แก้ไข:

นี่คือ polyfill สำหรับObject.createคุณจึงสามารถใช้สิ่งนี้ได้

var newObject = Object.create(oldObject);

หมายเหตุ:hasOwnPropertyหากคุณใช้บางส่วนของคุณอาจมีปัญหากับบางคนที่ใช้ซ้ำ เพราะสร้างวัตถุใหม่ที่ว่างเปล่าที่สืบทอดcreate oldObjectแต่ก็ยังมีประโยชน์และใช้งานได้จริงสำหรับการโคลนวัตถุ

สำหรับตัวอย่างถ้า oldObject.a = 5;

newObject.a; // is 5

แต่:

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

Lodash มีเมธอด _.cloneDeep (value) ที่ดี :

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

ตื้นคัดลอกหนึ่งซับ ( ECMAScript รุ่นที่ 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

และคัดลอกหนึ่งซับ ( ECMAScript 6th edition , 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

เพียงเพราะฉันไม่เห็นAngularJSพูดถึงและคิดว่าผู้คนอาจต้องการทราบ ...

angular.copy ยังมีวิธีการคัดลอกวัตถุและอาร์เรย์ลึก

ดูเหมือนว่าจะไม่มีโอเปอเรเตอร์โคลนนิ่งในอุดมคติสำหรับวัตถุที่มีลักษณะคล้ายอาร์เรย์ ตามรหัสด้านล่างแสดงให้เห็นว่า jQuery cloner ของ John Resig เปลี่ยนอาร์เรย์ที่มีคุณสมบัติที่ไม่ใช่ตัวเลขเป็นวัตถุที่ไม่ใช่อาร์เรย์และ cloner JSON ของ RegDwight ลดคุณสมบัติที่ไม่ใช่ตัวเลข การทดสอบต่อไปนี้แสดงให้เห็นถึงจุดเหล่านี้ในหลายเบราว์เซอร์:

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)

ฉันมีสองคำตอบที่ดีขึ้นอยู่กับว่าวัตถุประสงค์ของคุณคือการโคลน "วัตถุ JavaScript เก่าธรรมดา" หรือไม่

สมมติว่าความตั้งใจของคุณคือการสร้างโคลนที่สมบูรณ์โดยไม่มีการอ้างอิงต้นแบบกลับไปยังวัตถุต้นฉบับ หากคุณไม่สนใจโคลนที่สมบูรณ์คุณสามารถใช้รูทีน Object.clone () จำนวนมากที่ให้ไว้ในคำตอบอื่น ๆ (รูปแบบของ Crockford)

สำหรับวัตถุ JavaScript เก่าธรรมดาวิธีที่ดีและแท้จริงในการโคลนวัตถุใน runtimes ที่ทันสมัยนั้นค่อนข้างง่าย:

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

โปรดทราบว่าวัตถุต้นฉบับจะต้องเป็นวัตถุ JSON บริสุทธิ์ นี่คือคุณสมบัติทั้งหมดที่ซ้อนกันของมันต้องเป็นสเกลาร์ (เช่นบูลีนสตริงอาร์เรย์วัตถุ ฯลฯ ) ฟังก์ชันหรือวัตถุพิเศษเช่น RegExp หรือ Date จะไม่ถูกโคลน

มันมีประสิทธิภาพหรือไม่ เฮ้ใช่ เราได้ลองวิธีการโคลนทุกชนิดและวิธีนี้ดีที่สุดแล้ว ฉันแน่ใจว่านินจาบางคนสามารถคิดวิธีการที่รวดเร็วขึ้น แต่ฉันสงสัยว่าเรากำลังพูดถึงกำไรเล็กน้อย

วิธีนี้เป็นวิธีที่ง่ายและใช้งานง่าย ห่อมันไว้ในฟังก์ชั่นอำนวยความสะดวกและถ้าคุณต้องการที่จะบีบเอากำไรออกมาให้ลองอีกครั้งในภายหลัง

ตอนนี้สำหรับวัตถุ JavaScript ที่ไม่ธรรมดาไม่มีคำตอบที่ง่ายจริงๆ ในความเป็นจริงมันไม่สามารถเกิดขึ้นได้เพราะธรรมชาติของฟังก์ชั่น JavaScript และสถานะวัตถุภายใน การโคลนโครงสร้าง JSON แบบลึกพร้อมกับฟังก์ชั่นด้านในคุณต้องสร้างฟังก์ชันเหล่านั้นและบริบทภายใน และจาวาสคริปต์ก็ไม่มีวิธีที่เป็นมาตรฐานในการทำเช่นนั้น

วิธีที่ถูกต้องในการทำเช่นนี้อีกครั้งคือวิธีการอำนวยความสะดวกที่คุณประกาศและนำมาใช้ใหม่ภายในรหัสของคุณ วิธีการอำนวยความสะดวกสามารถมอบให้กับความเข้าใจของวัตถุของคุณเองเพื่อให้คุณสามารถสร้างกราฟภายในวัตถุใหม่ได้อย่างถูกต้อง

เราเขียนขึ้นเอง แต่แนวทางทั่วไปที่ดีที่สุดที่ฉันเคยเห็นครอบคลุมอยู่ที่นี่:

http://davidwalsh.name/javascript-clone

นี่คือความคิดที่ถูกต้อง ผู้เขียน (David Walsh) ได้แสดงความคิดเห็นการโคลนของฟังก์ชั่นทั่วไป นี่คือสิ่งที่คุณอาจเลือกที่จะทำขึ้นอยู่กับกรณีการใช้งานของคุณ

แนวคิดหลักคือคุณต้องจัดการพิเศษในการสร้างอินสแตนซ์ของฟังก์ชั่นของคุณ (หรือคลาสต้นแบบเพื่อพูด) ในแต่ละประเภท ที่นี่เขามีตัวอย่างสองสามตัวอย่างสำหรับ RegExp และ Date

ไม่เพียง แต่เป็นรหัสสั้น ๆ นี้ แต่ก็ยังอ่านได้มาก มันง่ายต่อการขยาย

มันมีประสิทธิภาพไหม? เฮ้ใช่ เนื่องจากเป้าหมายคือการสร้างสำเนาโคลนที่แท้จริงจากนั้นคุณจะต้องเดินสมาชิกของกราฟวัตถุต้นทาง ด้วยวิธีการนี้คุณสามารถปรับแต่งสมาชิกลูกที่จะปฏิบัติและวิธีการจัดการประเภทที่กำหนดเองด้วยตนเอง

ดังนั้นคุณไป สองแนวทาง ทั้งสองมีประสิทธิภาพในมุมมองของฉัน

นี่ไม่ใช่วิธีการแก้ปัญหาที่มีประสิทธิภาพมากที่สุด กรณีทดสอบง่ายๆด้านล่าง ...

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

การทดสอบอาร์เรย์เป็นวง ...

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

ทดสอบฟังก์ชั่น ...

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

AngularJS

ถ้าคุณใช้มุมคุณก็ทำได้เช่นกัน

var newObject = angular.copy(oldObject);

ผมไม่เห็นด้วยกับคำตอบที่มีคะแนนโหวตมากที่สุดที่นี่ ซ้ำลึกโคลนเป็นได้เร็วขึ้นมากกว่าJSON.parse (JSON.stringify (obj))วิธีการที่กล่าวถึง

• Jsperfจัดอันดับเป็นอันดับหนึ่งที่นี่: https://jsperf.com/deep-copy-vs-json-stringify-json-parse/5
• Jsbenจากคำตอบข้างต้นได้รับการอัพเดตเพื่อแสดงให้เห็นว่าการโคลนนิ่งแบบวนซ้ำแบบซ้ำ ๆ นั้นเต้นไปตามที่คนอื่น ๆ พูดถึง: http://jsben.ch/13YKQ

และนี่คือฟังก์ชันสำหรับการอ้างอิงอย่างรวดเร็ว:

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

เมื่อคุณสามารถใช้ECMAScript 6หรือtranspilersได้เท่านั้น

คุณสมบัติ:

• จะไม่ทริกเกอร์ทะลวง / setter ในขณะที่คัดลอก
• รักษาทะเยอทะยาน / setter
• รักษาข้อมูลต้นแบบ
• ทำงานกับสไตล์การเขียนOO เชิงวัตถุและฟังก์ชัน

รหัส:

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

นี่คือวิธีการโคลนนิ่ง () ที่สามารถโคลนวัตถุ JavaScript ใด ๆ มันจัดการเกือบทุกกรณี:

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