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函数就不存在了。   
版权声明:本文为博主原创文章,未经博主允许不得转载。

JS深度克隆代码实现

js深度克隆js对象组成说对象的深度克隆之前,要先明白JS 中对象的组成。 以一句话说js中一切皆对象具体数据类型分为两种: - 原始数据类型 - 引用数据类型 原始数据类型:其中存储的...
  • github_33261002
  • github_33261002
  • 2016年10月05日 13:41
  • 912

jQuery 克隆对象的简单示例

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

jquery克隆对象

场景是这样的,需要在如下一个对象里面取出“内网OPENAPI”这几个字符:         内网OPENAPI     17 解决方案有两个,一个是用正则表达式去取,还有一个思路把a...
  • ldy2822
  • ldy2822
  • 2017年08月18日 17:06
  • 169

jQuery -> 克隆DOM元素

jQuery总clone的用法,顺便讲解了end的用法
  • FeeLang
  • FeeLang
  • 2014年05月22日 12:04
  • 11231

jQuery_克隆和替换节点

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

jquery之设置元素内容(克隆元素,使用clone()方法)

jquery之设置元素内容(克隆元素,使用clone()方法)
  • fhd001
  • fhd001
  • 2011年04月08日 20:17
  • 3797

jQuery和javascript的区别

jQuery与javascript
  • u010158267
  • u010158267
  • 2014年10月29日 21:01
  • 1523

JavaScript、Ajax与jQuery的关系

简单总结: 1、JS是一门前端语言。 2、Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新。 3、jQuery是一个框架,它对JS进行...
  • jediael_lu
  • jediael_lu
  • 2014年07月31日 10:15
  • 30324

jquery 克隆clone()使用实例

WEB项目中脚本的位置是十分重要的,尤其在用户体验方面。  开发过程中可能需要动态创建hmtl控件,如使用提交服务器方法来实现实在是体验差,当前页面数据保存也是个麻烦事,jquery提供了clone(...
  • zinger198208
  • zinger198208
  • 2012年11月05日 17:11
  • 1783

JQ点击按钮动态克隆一行表格以及删除表格

用之前需要引用  /*  * 克隆表格行  */ function addrow(){ var tr = $("#tabtr");                            ...
  • u014149394
  • u014149394
  • 2015年04月15日 10:26
  • 1764
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript和jquery的克隆
举报原因:
原因补充:

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