javascript和jquery的克隆

原创 2016年08月30日 23:02:28

1、javascript 的浅拷贝和深拷贝

1.js的浅拷贝(浅克隆);
    例子:
         var test = { a:"1",b:"2"};
         var test2 = test   // 即完成拷贝;
         test2.a = 10;
         console.log(test2.a)  // 10;
         console.log(test.a)   // 10;
        // 说明: 因为数组和对象都是复杂数据类型,所以上述方法不是简单的传值,而是传址; 这样一旦改变test2中属性的属性值,那么test中的值也会相应的改变,这肯定不是我们所想要的结果,所以深拷贝就自然而然出现了。 
2.js的深拷贝(深克隆)  
    // 下面是封装的一个深拷贝的函数;
    function deepClone(data){
        // 1.声明一个变量来存储拷贝的数据;
            var o ;
        // 2.根据判断的数据类型来定义声明的变量的数据类型;
            if(data instanceof Array){
                o = [];
            }else if(typeof(data)==="object"){
                o = {};
            }else{
                return data; 
            }
        // 3.根据判断的结果来进行拷贝;
            if(data instanceof Array){
                for(var i =0; i< data.length; i++){
                    o.push(deepClone(data[i]))  // 重复调用上述方法,以防止数组里面嵌套的还有数组
                }
                return 0 ;
            }else if(typeof(data)==="object"){
                for(var key in data){
                    o[i] = deepClone(data[key]); //重复调用上述方法,以防止对象里面嵌套的还有对象;
                } 
                return o; 
            }   
    }
3.js的深拷贝(深克隆)的另一种写法:
    function clone(Obj) {
        var buf; 
        if (Obj instanceof Array) {
            buf = []; // 创建一个空的数组
            var i = Obj.length;
            while (i--) {
                buf[i] = clone(Obj[i]);
            }
            return buf;
        } else if (Obj instanceof Object){
            buf = {}; // 创建一个空对象
            for (var k in Obj) { // 为这个对象添加新的属性
                buf[k] = clone(Obj[k]);
            }
                return buf;
        }else{
            return Obj;
        }
    }

2、jquery的浅拷贝和深拷贝;

1.jquery的浅拷贝(浅克隆),此方法只会拷贝最顶层的非object对象;
    var obj1 = {a:"123",b:"456"};
    var obj2 = $.extend({},obj1);  // 完成复制
2.jquery的深拷贝(深克隆),一层一层往下复制直到最底层;
    例:
        var obj3 = {
            a:"111",
            b:[1,2,3,{c:"s1"}],
            c:{d:"s3",e:[4,5,6]}
        };
        var obj4 = $.extend(true,{},obj3);
        obj4.a = "sss";
        obj4.b[0] = 100;
        obj4.c.e.[0] = 400;
    console.log(obj3);  
    console.log(obj4)   
// 说明: obj4内部属性的值改变之后,如果obj3中的相应值保持不变,就说明复制成功。

3、json实现拷贝(克隆)

1.json实现克隆,先通过json.stringify一下,然后在json.parse一下,就能实现深拷贝,需要注意的是json格式的拷贝的数据类型只支持基本数据类型;
    例:
    var obj = {"a":"123", "b":function(){console.log("cc")}}
    var obj1 = JSON.stringify(obj);
    console.log(JSON.parse(obj1)) // "{"a":"123"}" ;
// 说明: 在json.stringify()方法中会把不是基本数据类型的数据都会过滤掉。因此,function函数就不存在了。   

javascript克隆实例

  • 2011年03月04日 23:34
  • 3KB
  • 下载

jQuery克隆和替换节点

jQuery克隆和替换节点

Javascript克隆

  • 2012年02月08日 16:39
  • 824B
  • 下载

jQuery HTML结构的处理 3.删除和克隆结构

删除结构也有两种方法:一是使用 empty()删除匹配元素包含的所有子节点。例如,在下面示例中将删除 div 元素内所有子节点和文本,返回“”两个空标签。 注意:这里也会删除文本。也是 盒子 盒子 ...

jQuery 克隆对象的简单示例

简单例子  代码如下 复制代码 // 浅层复制(只复制顶层的非 object 元素)  var newObject = jQuery.extend({}, oldOb...
  • luyaran
  • luyaran
  • 2016年11月14日 16:02
  • 1908

jQuery_克隆和替换节点

•clone():克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为. •clone(true):复制元素的同时也复制元素中的的事件 •replac...

JQuery UI Datepicker在克隆操作的冲突问题

页面上使用jquery的克隆操作克隆出来N个input,input的形式为: 这时候查看源码,会给它一个默认的ID,当克隆操作后,datepicker控件会给新的input另外的ID,形...
  • Donthan
  • Donthan
  • 2012年09月05日 11:40
  • 3283

jquery动态添加删除div--事件绑定,对象克隆

我想做一个可以动态添加删除div的功能。中间遇到一个问题,最后在phpchina问答区版主的热心帮助下解答了(答案在最后)        使用到的jquery方法和思想就是:事件的绑定和销毁(unbi...

jQuery -> 克隆DOM元素

jQuery总clone的用法,顺便讲解了end的用法
  • FeeLang
  • FeeLang
  • 2014年05月22日 12:04
  • 10901
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript和jquery的克隆
举报原因:
原因补充:

(最多只允许输入30个字)