js对象的深拷贝及其的几种方法

深拷贝和浅拷贝是javascript中一个比较复杂的问题,也是面试官最喜欢问的问题之一,通过这个为可以看出是否入门,深拷贝和浅拷贝也是初学者经常犯错一个点。

简单来说深拷贝是拷贝储存在内存堆中的对象,而浅拷贝是从内存栈中拷贝,这就涉及到数据存放位置了,总所周知,数据大体可以分为两种数据类型,一种是基本数据类型,数据结构不是很复杂,单独可以存在内存中就可以,而另一种是复杂数据类型,也叫引用数据类型,例如数组和对象,是放在内存堆中存储的,而基本数据类型是放在内存中的,不涉及深拷贝和浅拷贝,也可以说基本数据类型都是深拷贝

而引用类型数据存储比较复杂,例如var a=[1,3,4]  这句话的存储就是首先在内存栈开辟一个空间,但是内存栈当中不可以存储这种复杂数据类型,所以要把这种结构放到内存堆当中,内存堆相当于一个密码箱,而钥匙存在内存栈当中,这就构成了一个存储关系,浅拷贝var b=a简单来说就是把这份钥匙复制了一份,但内存堆当中的数据并没有复制,所以如果改变a相应b也会改变

而深拷贝则需要在内存堆中在生成一个密码箱,生成一把新钥匙(钥匙2),这样深拷贝的两种数值不会相互影响,也可以说没有任何关系了

方法:

1:jq使用,$.extend({},obj)

这两种比较基础,估计都会使用

2:clone(obj)

var clone = function (obj) { return JSON.parse(JSON.stringify(obj)); }

这种方法有种缺陷,这种方法会忽略值为function以及undefied的字段,而且对date类型的支持也不太友好。 

3:clone(obj)

var clone = function (obj) { 
    if(obj === null) return null 
    if(typeof obj !== 'object') return obj;
    if(obj.constructor===Date) return new Date(obj); 
    var newObj = new obj.constructor ();  //保持继承链
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {   //不遍历其原型链上的属性
            var val = obj[key];
            newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; // 使用arguments.callee解除与函数名的耦合
        }
    }  
    return newObj;  
}; 

这种方法也就使封装最好的深拷贝的方法,以下为解释:

1、用new obj.constructor ()构造函数新建一个空的对象,而不是使用{}或者[],这样可以保持原形链的继承;
2、用obj.hasOwnProperty(key)来判断属性是否来自原型链上,因为for..in..也会遍历其原型链上的可枚举属性。
3、上面的函数用到递归算法,在函数有名字,而且名字以后也不会变的情况下,这样定义没有问题。但问题是这个函数的执行与函数名 factorial 紧紧耦合在了一起。为了消除这种紧密耦合的现象,需要使用 arguments.callee

在JavaScript中,深拷贝浅拷贝是两种常用的对象拷贝方法浅拷贝是按位拷贝对象,创建一个新对象,并将原始对象的属性值精确拷贝到新对象中。如果属性是基本类型,拷贝的就是基本类型的值;如果属性是内存地址(引用类型),拷贝的就是内存地址。因此,如果其中一个对象改变了这个地址,就会影响到另一个对象。\[3\] 深拷贝是将原始对象及其所有嵌套对象的属性值都进行拷贝,创建一个全新的对象深拷贝会拷贝所有的属性,并拷贝属性指向的动态分配的内存。当对象和它所引用的对象一起拷贝时即发生深拷贝深拷贝相比于浅拷贝速度较慢并且花销较大。\[2\] 在JavaScript中,实现深拷贝方法有以下几种: 1. 通过递归的方式实现深拷贝,可以使用jQuery中的extend方法实现。这种方法会递归地遍历对象的所有属性,并进行拷贝。\[1\] 2. 使用JSON.parse()和JSON.stringify()方法实现深拷贝。首先将对象转换为JSON字符串,然后再将JSON字符串转换为新的对象。这种方法可以实现简单的深拷贝,但是对于包含函数、正则表达式等特殊类型的对象可能会出现问题。\[1\] 3. 使用第一种方法中的递归方式来实现深拷贝。这种方法需要自己编写递归函数来遍历对象的所有属性,并进行拷贝。\[1\] 总结起来,深拷贝是将原始对象及其所有嵌套对象的属性值都进行拷贝,创建一个全新的对象,而浅拷贝只是按位拷贝对象,创建一个新对象,并将原始对象的属性值精确拷贝到新对象中。在JavaScript中,可以通过递归方式、JSON.parse()和JSON.stringify()方法等来实现深拷贝。 #### 引用[.reference_title] - *1* [JavaScript深浅拷贝(三种方法)](https://blog.youkuaiyun.com/weixin_46022934/article/details/121415082)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [js实现浅拷贝深拷贝](https://blog.youkuaiyun.com/ab_er/article/details/126009166)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值