使用jquery克隆对象_实现深、浅拷贝的简单实例

时间: 2018-04-03阅读: 1615标签: 拷贝

克隆JavaScript对象,首页想到的是obj = eval(uneval(obj)),但这是非标准的,只有Firefox支持。针对你对象中只有变量,而不存在任何函数,您可以这样实现:

jsON.parse(jsON.stringify(obj))


该方法是深拷贝最高效的方法,如果是浅拷贝,则推荐使用jquery提供的jQuery.extend方法,因为它包含了一些额外的类型验证逻辑,并且不会复制未定义的属性等。针对它的使用如下:

// 浅拷贝(只复制顶层的非 object 元素)
var newObject = jQuery.extend({}, oldObject);

// 深拷贝(只复制顶层的非 object 元素)
var newObject = jQuery.extend(true, {}, oldObject);


jquery克隆对象实例如下:

var obj1 = {
  'a': 's1',
  'b': [1,2,3,{'a':'s2'}],
  'c': {'a':'s3', 'b': [4,5,6]}
}
var obj2 = $.extend(true, {}, obj1);
obj2.a='s1s1';
obj2.b[0]=100;
obj2.c.b[0]=400;
console.log(obj1);
console.log(obj2);


obj2 内部元素的值改变之后,如果 obj1 的相应值保持不变,就说明复制成功。 

 ExtJS 也有类似的方法 Ext.apply,因此单独用 ExtJS 应该也能实现同样的功能。 后面在项目中原来使用了前端同学自己写的一个扩展 jQuery 的类库,而里边有些方法却没有实现,如live等。加上我们后台开发人员在项目中又使用了 jQuery,感觉显得很冗余。里边有个扩展的克隆对象的方法,如下:

/**
复制一个Object对像
* @param {Object} obj 要复制的Object对像
* @return {Object} 返回新对像
* @static
*/
clone: function (obj) {
    var objClone;
    if (obj instanceof Array) {
        objClone = [];
        for (var i = 0; i < obj.length; i++)
            objClone[i] = Js.clone(obj[i]);
        return objClone;
    } else if (obj instanceof Object) {
        if (obj.constructor == Object) {
            objClone = new obj.constructor();
        } else {
            objClone = new obj.constructor(obj.valueOf());
        }
        for (var key in obj) {
            if (objClone[key] != obj[key]) {
                if (typeof (obj[key]) == 'object') {
                    objClone[key] = Js.clone(obj[key]);
                } else {
                    objClone[key] = obj[key];
                }
            }
        }
        objClone.toString = obj.toString;
        objClone.valueOf = obj.valueOf;
        return objClone;
    }
    return obj;
}


于是又得后台开发人员将所有引用的地方换成了使用jQuery实现,将这个方法改成了jQuery扩展,如下:

$.extend({
    cloneObj: function (obj) {
        var objClone;
        if (obj instanceof Array) {
            objClone = [];
            for (var i = 0; i < obj.length; i++)
                objClone[i] = $.cloneObj(obj[i]);
            return objClone;
        } else if (obj instanceof Object) {
            if (obj.constructor == Object) {
                objClone = new obj.constructor();
            } else {
                objClone = new obj.constructor(obj.valueOf());
            }
            for (var key in obj) {
                if (objClone[key] != obj[key]) {
                    if (typeof (obj[key]) == 'object') {
                        objClone[key] = $.cloneObj(obj[key]);
                    } else {
                        objClone[key] = obj[key];
                    }
                }
            }
            objClone.toString = obj.toString;
            objClone.valueOf = obj.valueOf;
            return objClone;
        }
        return obj;
    }
});

我们在造轮子了,自己扩展jQuery类库想法是好的,但想维护好不是一个人所能完成的,毕竟很多时候还要忙其他的项目。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/584

js中深拷贝和浅拷贝的区别及原理

javascript的深拷贝和浅拷贝主要是针对像Object, Array这样的复杂对象的,简单理解为浅拷贝只复制一层对象的属性,而深拷贝则递归复制了所有层级。

js浅拷贝与深拷贝的区别和实现方式

如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力。

使用JSON.parse(JSON.stringify(object))实现深拷贝的局限及扩展

大部分情况我们都可以使用JSON.parse(JSON.stringify(object))来实现深拷贝,但该方法也有局限性,如下:会忽略 undefined,会忽略 symbol,不能序列化函数,不能解决循环引用的对象

JSON.stringify深拷贝的缺点

因为浅拷贝只会将对象的各个属性进行依次复制,并不会进行递归复制。在JavaScript中,对于Object和Array这类引用类型值,当从一个变量向另一个变量复制引用类型值时,这个值的副本其实是一个指针,两个变量指向同一个堆对象

JS中如何进行对象的深拷贝

在JS中,一般的=号传递的都是对象/数组的引用,并没有真正地拷贝一个对象,那如何进行对象的深度拷贝呢?对象的深拷贝与浅拷贝的区别如下:浅拷贝:仅仅复制对象的引用,而不是对象本身;深拷贝:把复制的对象所引用的全部对象都复制一遍。

JS对象复制(深拷贝、浅拷贝)

注意: 此方法仅在原对象包含可序列化值类型且没有任何循环引用时才有效。不可序列化值类型的一个例子是 Date 对象 - JSON.parse 只能将其解析为字符串而无法解析回其原始的 Date 对象 或者对象中属性值为function

实现深拷贝的多种方式

简单来说,深拷贝主要是将另一个对象的属性值拷贝过来之后,另一个对象的属性值并不受到影响,因为此时它自己在堆中开辟了自己的内存区域,不受外界干扰。

对象的浅拷贝与深拷贝

本文整理的为部分对象的浅拷贝与深拷贝,与基本数据类型的概念不一样。eg:就浅拷贝来说,如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的就是内存地址

js的浅拷贝 VS 深拷贝

我们常常会用到拷贝对象的功能,而拷贝有浅拷贝和深拷贝2种。这篇文章会着重讲2个方面:1: 浅拷贝和深拷贝的区别2: 浅拷贝和深拷贝的具体实现,拷贝我们常常用在把A对象的属性copy到B对象,这样B对象就拥有了A对象的属性。

JavaScript 中对象的深拷贝

在JavaScript中,对对象进行拷贝的场景比较常见。但是简单的复制语句只能对对象进行浅拷贝,即复制的是一份引用,而不是它所引用的对象。而更多的时候,我们希望对对象进行深拷贝,避免原始对象被无意修改。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!