javascript複製物件




在JavaScript中深度克隆對象的最有效方法是什麼? (20)

克隆JavaScript對象的最有效方法是什麼? 我見過obj = eval(uneval(o)); 正在使用,但這是非標準的,只有Firefox支持

我做過像obj = JSON.parse(JSON.stringify(o)); 但質疑效率。

我也看到了具有各種缺陷的遞歸複製功能。
我很驚訝沒有規範的解決方案。


注意:這是對另一個答案的回复,而不是對此問題的正確回答。 如果您希望快速克隆對象,請在回答此問題時遵循Corban的建議 。

我想要注意jQuery中的.clone()方法只能克隆DOM元素。 為了克隆JavaScript對象,您可以:

// Shallow copy
var newObject = jQuery.extend({}, oldObject);

// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);

可以在jQuery文檔中找到更多信息。

我還要注意,深層副本實際上比上面顯示的更加智能 - 它可以避免許多陷阱(例如,嘗試深度擴展DOM元素)。 它經常在jQuery核心和插件中使用,效果很好。


在一行代碼中克隆(而不是深度克隆)對象的有效方法

Object.assign方法是ECMAScript 2015(ES6)標準的一部分,可以完全滿足您的需求。

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

Object.assign()方法用於將所有可枚舉的自有屬性的值從一個或多個源對象複製到目標對象。

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

AngularJS

好吧,如果你使用角度,你也可以做到這一點

var newObject = angular.copy(oldObject);

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

希望這些幫助......


按性能深度複製:從最佳到最差排名

  • 重新分配“=”(字符串數組,數字數組 - 僅)
  • 切片(字符串數組,數字數組 - 僅)
  • 連接(字符串數組,數字數組 - 僅)
  • 自定義函數:for循環或遞歸複製
  • jQuery的$ .extend
  • JSON.parse(字符串數組,數字數組,對像數組 - 僅)
  • Underscore.js的_.clone(字符串數組,僅數字數組)
  • Lo-Dash的_.cloneDeep

深層複製一個字符串或數字數組(一個級別 - 沒有引用指針):

當數組包含數字和字符串時 - 函數如.slice(),. concat(),. splice(),賦值運算符“=”和Underscore.js的克隆函數; 將製作數組元素的深層副本。

重新分配的地方表現最快:

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

並且.slice()的性能優於.concat(), http://jsperf.com/duplicate-array-slice-vs-concat/3 //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

jQuery的$ .extend具有更好的性能:


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

如果您正在使用它, Underscore.js庫有一個clone方法。

var newObject = _.clone(oldObject);

如果沒有內置的,你可以嘗試:

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

有一個庫(稱為“克隆”) ,這樣做很好。 它提供了我所知道的最完整的遞歸克隆/複製任意對象。 它還支持循環引用,但尚未涵蓋其他答案。

你也可以在npm找到它 。 它可以用於瀏覽器以及Node.js.

以下是如何使用它的示例:

安裝它

npm install clone

或者用Ender打包。

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

(免責聲明:我是圖書館的作者。)


查看此基準: http://jsben.ch/#/bWfk9http://jsben.ch/#/bWfk9

在我之前的測試中,速度是我發現的一個主要問題

JSON.parse(JSON.stringify(obj))

成為深度克隆對象的最快方法(它將jQuery.extend與深度標誌設置為10-20%)。

當深度標誌設置為false(淺層克隆)時,jQuery.extend非常快。 這是一個很好的選擇,因為它包含一些額外的類型驗證邏輯,不會復制未定義的屬性等,但這也會讓你慢下來。

如果您知道要嘗試克隆的對象的結構,或者可以避免深層嵌套數組,則可以在檢查hasOwnProperty時編寫一個簡單的for (var i in obj)循環來克隆對象,它將比jQuery快得多。

最後,如果您嘗試在熱循環中克隆已知對象結構,只需嵌入克隆過程並手動構建對象,即可獲得更多性能。

JavaScript跟踪引擎在優化for..in循環時很for..in並且檢查hasOwnProperty也會減慢你的速度。 當速度是絕對必須時手動克隆。

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

注意在DateJSON.stringify(new Date())上使用JSON.parse(JSON.stringify(obj))方法 - JSON.stringify(new Date())返回ISO格式的日期的字符串表示形式, JSON.parse() 轉換回到Date對象。 有關詳細信息,請參閱此答案

此外,請注意,至少在Chrome 65中,本機克隆是不可取的。 根據這個JSPerf ,通過創建一個新函數來執行本機克隆比使用JSON.stringify慢了近800倍,而JSON.stringify在整個過程中都非常快。


碼:

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

Lodash有一個很好的lodash.com/docs#cloneDeep方法:

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

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

以下內容創建同一對象的兩個實例。我發現它並且正在使用它。它簡單易用。

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

對於想要使用該JSON.parse(JSON.stringify(obj))版本但不丟失Date對象的人,可以使用method第二個參數parse將字符串轉換回Date:

function clone(obj) {
  var regExp = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/;
  return JSON.parse(JSON.stringify(x), function(k, v) {
    if (typeof v === 'string' && regExp.test(v))
      return new Date(v);
    return v;
  });
}

對於類似數組的對象,似乎還沒有理想的深度克隆運算符。如下面的代碼所示,John Resig的jQuery克隆器將具有非數字屬性的數組轉換為非數組的對象,RegDwight的JSON克隆器刪除非數字屬性。以下測試在多個瀏覽器上說明了這些要點:

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)

淺拷貝單行(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第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

這是一個可以克隆任何JavaScript對象的綜合clone()方法。它幾乎處理所有情況:

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

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

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




clone