浅谈深拷贝与浅拷贝?深拷贝几种方法。

发布时间:2025-05-24 17:32:30 作者:益华网络 来源:undefined 浏览量(1) 点赞(1)
摘要:深拷贝和浅拷贝的区别? 如何区分深拷贝与浅拷贝,大白话来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食

深拷贝和浅拷贝的区别?

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

先看一个例子:

1
2
3
4
5
let a = [0, 1, 2, 3, 4],
b = a;
console.log(a === b); // true
a[0] = 9;
console.log(a, b);   // [9, 1, 2, 3, 4]

吆哈,明明b复制了a,为啥修改数组a,数组b也跟着变了??

基本数据类型和复杂(引用)数据类型?

基本数据类型:number, string, boolean, null, undefined, symbol

引用数据类型:Object类,有常规名值对的无须对象{a: 1}, 数组[1, 2, 3],函数等。

而这两类数据存储方式分别是这样的:

1. 基本类型–名值存储在栈内存中,例如let a=1;

当你b=a复制时,栈内存会新开辟一个内存,例如这样:

所以当你此时修改a=2,对b并不会造成影响,因为此时的b已自食其力,翅膀硬了,不受a的影响了。当然,let a=1, b=a; 虽然b不受a影响,但这也算不上深拷贝,因为深拷贝本身只针对较为复杂的object类型数据。

    2.引用数据类型–名存在栈内存中,值存在于堆内存中,但是栈内存会提供一个引用的地址指向堆内存中的值,我们以上面浅拷贝的例子画个图:

当b=a进行拷贝时,其实复制的是a的引用地址,而并非堆里面的值。

而当我们a[0]=1时进行数组修改时,由于a与b指向的是同一个地址,所以自然b也受了影响,这就是所谓的浅拷贝了。

那,要是在堆内存中也开辟一个新的内存专门为b存放值,就像基本类型那样,岂不就达到深拷贝的效果了。

实现简单的深拷贝方法?

先看几个简单例子?

1.slice() 方法

1
2
3
4
5
6
// 先看一个js中的方法slice() 方法可从已有的数组中返回选定的元素。
// 该方法并不会修改数组,而是返回一个子数组。arrayObject.slice(start,end)
let a1 = [1, 2, 3, 4],
b2 = a1.slice();
a1[0] = 2;
console.log(a1, b2);

如上图所述,slice()方法看似是一个深拷贝的方法了!在改造一下上述代码片段,我们再看 👇

1
2
3
4
5
let a1 = [1, 2, [5,6], 3, 4],
b2 = a1.slice();
a1[0] = 2;
a1[2][0] = 9;
console.log(a1, b2);

拷贝的不彻底,b对象的一级属性确实不受影响了,但是二级属性还是没能拷贝成功,仍然脱离不了a的控制,说明slice根本不是真正的深拷贝。

2.递归

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 简单深拷贝封装递归函数
function deepClone(obj) {
let objClone = Array.isArray(obj) ? [] : {};
if (obj && typeof obj === "object") {
for (key in obj) {
if (obj.hasOwnProperty(key)) { // 注:hasOwnProperty()方法
//判断obj子元素是否为对象,如果是,递归复制
console.log(obj[key])
if (obj[key] && typeof obj[key] === "object") {
objClone[key] = deepClone(obj[key]);
} else {
//如果不是,简单复制
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
let arr = [1, 2, [5, 6], 4],
b1 = deepClone(arr);
arr[2][0] = 9;
console.log(arr, b1);
// 跟之前想象的一样,现在b脱离了a的控制,不再受a影响了。这里再次强调,深拷贝,是拷贝对象各个层级的属性。

注:hasOwnProperty() 官方 MDN讲解方法会返回一个布尔值,指示对象自身属性中是否具有指定的属性(也就是,是否有指定的键)。

3. 除了递归,我们还可以借用JSON对象的parse和stringify。

1
2
3
4
5
6
7
8
9
10
function deepClone(obj){
let _obj = JSON.stringify(obj),
objClone = JSON.parse(_obj);
return objClone
}    
let a=[0,1,[2,3],4],
b=deepClone(a);
a[0]=1;
a[2][0]=1;
console.log(a,b);

4. 除了上面两种方法之外,我们还可以借用JQ的extend方法。

$.extend( [deep ], target, object1 [, objectN ] )

deep表示是否深拷贝,为true为深拷贝,为false,则为浅拷贝

target Object类型 目标对象,其他对象的成员属性将被附加到该对象上。

object1 objectN可选。 Object类型 第一个以及第N个被合并的对象。

1
2
3
4
5
let a=[0,1,[2,3],4],
b=$.extend(true,[],a);
a[0]=1;
a[2][0]=1;
console.log(a,b);

原文链接: https://blog.csdn.net/qq_43531694/article/details/102586168

二维码

扫一扫,关注我们

声明:本文由【益华网络】编辑上传发布,转载此文章须经作者同意,并请附上出处【益华网络】及本页链接。如内容、图片有任何版权问题,请联系我们进行处理。

感兴趣吗?

欢迎联系我们,我们愿意为您解答任何有关网站疑难问题!

您身边的【网站建设专家】

搜索千万次不如咨询1次

主营项目:网站建设,手机网站,响应式网站,SEO优化,小程序开发,公众号系统,软件开发等

立即咨询 15368564009
在线客服
嘿,我来帮您!