JavaScript 中的对象深度复制(Object Deep Clone)

 

JavaScript中并没有直接提供对象复制(Object Clone)的方法。

JavaScript中的赋值,其实并不是复制对象,而是类似`c/c++`中的引用(或指针)，因此下面的代码中改变对象b中的元素的时候，也就改变了对象a中的元素。

a = {k1:1, k2:2, k3:3};
b = a;
b.k2 = 4;

 

如果只想改变b而保持a不变，就需要对对象a进行复制。

用jQuery进行对象复制

在可以使用jQuery的情况下，jQuery自带的extend方法可以用来实现对象的复制。

a = {k1:1, k2:2, k3:3};
b = {};
$.extend(b,a);

 

自定义clone()方法来实现对象复制

1.下面的方法，是给Object的原型(prototype)添加深度复制方法(deep clone)。

 

Object.prototype.clone = function() {
    // Handle null or undefined or function
    if (null == this || "object" != typeof this)
        return this;
    // Handle the 3 simple types, Number and String and Boolean
    if(this instanceof Number || this instanceof String || this instanceof Boolean)
        return this.valueOf();
    // Handle Date
    if (this instanceof Date) {
        var copy = new Date();
        copy.setTime(this.getTime());
        return copy;
    }
    // Handle Array or Object
    if (this instanceof Object || this instanceof Array) {
        var copy = (this instanceof Array)?[]:{};
        for (var attr in this) {
            if (this.hasOwnProperty(attr))
                copy[attr] = this[attr]?this[attr].clone():this[attr];
        }
        return copy;
    }
    throw new Error("Unable to clone obj! Its type isn't supported.");
}

 

所有对象可以直接使用`.clone()`

var a=[1,2,true,null,"fdsfdsa",[1,"fdsa",{"a":1,"b":["fd",3,{"b":"3","c":""},new Date()],"c":new Date(),"d":false,"e":null}]];
var b=a.clone();

2.使用额外的工具函数实现，适用于大部分对象的深度复制(Deep Clone)。

 

function clone(obj) {
    // Handle the 3 simple types, and null or undefined or function
    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 or Object
    if (obj instanceof Array | obj instanceof Object) {
        var copy = (obj instanceof Array)?[]:{};
        for (var attr in obj) {
            if (obj.hasOwnProperty(attr))
              copy[attr] = clone(obj[attr]);
        }
        return copy;
    }
    throw new Error("Unable to clone obj! Its type isn't supported.");
}

 

用法类似:

var a=[1,2,true,null,"fdsfdsa",[1,"fdsa",{"a":1,"b":["fd",3,{"b":"3","c":""},new Date()],"c":new Date(),"d":false,"e":null}]];
var b=clone(a);

 

测试

用上面两种方法都可以得到同样的结果。
至于用哪个怎么用，取决于你的喜好/习惯了 :)     就本人来说,我更倾向于使用原型的方法啦,方便嘛,啊哈哈哈~
你想测试结果的话，直接复制代码运行:

var a=[1,2,true,null,"fdsfdsa",[1,"fdsa",{"a":1,"b":["fd",3,undefined,{"b":"3","c":""},new Date()],"c":new Date(),"d":false,"e":null,"f":function(){return 2;}}],function(){}];
console.log("a=",a);
console.log("b=a.clone();");
b=a.clone();
console.log("JSON.stringify(a)==JSON.stringify(b) = ",JSON.stringify(a)==JSON.stringify(b));
console.log("JSON.stringify(a)===JSON.stringify(b) = ",JSON.stringify(a)===JSON.stringify(b));
console.log("JSON.stringify(a) = ",JSON.stringify(a));
console.log("JSON.stringify(b) = ",JSON.stringify(b));
console.log("a[2]=123,b[2]=55555");
a[2]=123,b[2]=55555;
console.log("a=",a,"\t\t","b=",b);

console.log("b=clone(a);");
b=clone(a);
console.log("JSON.stringify(a)==JSON.stringify(b) = ",JSON.stringify(a)==JSON.stringify(b));
console.log("JSON.stringify(a)===JSON.stringify(b) = ",JSON.stringify(a)===JSON.stringify(b));
console.log("JSON.stringify(a) = ",JSON.stringify(a));
console.log("JSON.stringify(b) = ",JSON.stringify(b));
console.log("a[2]=1234,b[2]=33333");
a[2]=1234,b[2]=33333;
console.log("a=",a,"\t\t","b=",b);

 

可以看到, 输出结果 `a` 和 `b` 是相等的，但是 改变 `a` 的元素的值, 并不会影响到 `b` 的元素。

访问Github，get更多技能:https://github.com/lzpong/H5_JS_Tools。