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

更新日期: 2018-04-03阅读: 3k标签: 拷贝

克隆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类库想法是好的,但想维护好不是一个人所能完成的,毕竟很多时候还要忙其他的项目。


链接: https://fly63.com/article/detial/584

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

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

使用JSON.parse(),JSON.stringify()实现对对象的深拷贝

JSON.parse(),JSON.stringify()实现对对象的深拷贝以及兼容性问题,根据不包含引用对象的普通数组深拷贝得到启发,不拷贝引用对象,拷贝一个字符串会新辟一个新的存储地址,这样就切断了引用对象的指针联系。

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

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

javascript实现数组或对象的深拷贝

可以看出来,改变原数组arr,并没有对新数组copyArr产生影响;改变新数组copyArr也没有对原数组arr产生影响;同样:改变原数组arr,并没有对新数组copyArr产生影响;改变新数组copyArr也没有对原数组arr产生影响;

关于内存拷贝(浅拷贝)和js链表的小知识点

记录一个做leetcode看答案学到的小知识。。。浅拷贝实现一些特殊的功能的一些应用场景,比如:我们有一个需求如下

js的浅拷贝 VS 深拷贝

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

理解JS中的深拷贝与浅拷贝

了解深拷贝也不仅仅是为了应付面试题,在实际开发中也是非常有用的。例如后台返回了一堆数据,你需要对这堆数据做操作,但多人开发情况下,你是没办法明确这堆数据是否有其它功能也需要使用,直接修改可能会造成隐性问题

Js实现深浅复制

JavaScript中有两种数据类型,基本数据类型如undefined、null、boolean、number、string,另一类是Object。简单数据类型只存储在内存中的栈区,复制的时候是值传递给新的索引。而复杂数据类型由栈区和堆区共同储存

14个JS数组拷贝技巧

数组拷贝经常被误解,但这并不是因为拷贝过程本身,而是因为缺乏对 JS 如何处理数组及其元素的理解。JS 中的数组是可变的,这说明在创建数组之后还可以修改数组的内容。这意味着要拷贝一个数组,咱们不能简单地将旧数组分配给一个新变量

JS变量存储与深拷贝和浅拷贝

string、number、null、undefined、boolean、symbol(ES6新增) 变量值存放在栈内存中,可直接访问和修改变量的值 基本数据类型不存在拷贝,好比如说你无法修改数值1的值

点击更多...

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