js中的深拷贝和浅拷贝

最新推荐文章于 2023-09-08 22:00:00 发布

weixin_33830216

最新推荐文章于 2023-09-08 22:00:00 发布

阅读量219

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cb032e2e51d456e896349bf

本文深入探讨了深拷贝与浅拷贝的概念，解释了它们在处理复杂对象如数组和对象时的区别。通过具体示例展示了浅拷贝如何仅复制一层对象属性，而深拷贝则递归复制所有层级，确保复制后的对象与原对象完全隔离，不受彼此影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

深拷贝和浅拷贝只针对object,Array这样复杂对象的。

简单来说，浅复制只复制一层对象的属性，而深复制则递归复制了所有层级

深浅拷贝的主要区别就是：复制的是引用（地址）还是复制的是实例。

浅拷贝含义：

对于仅仅是复制了引用（地址），换句话说，复制了之后，原来的变量和新的变量指向同一个东西，彼此之间的操作会相互影响。

深拷贝含义：

而如果是在堆中重新分配内存，拥有不同的地址，但是值是一样的，复制后的对象与原来对象完全隔离，互不影响。

01 浅拷贝

有时候我们只是想要备份数组，但是只是简单让它赋给一个变量，改变其中一个，另一个就紧跟着改变，但很多时候，这不是我们想要的。

example:

var arr = [ 1,2,3,"4" ];

var arr2 = arr;

arr2[1] = "test";

console.log(arr); //[ 1,"test",2,3,"4" ];

console.log(arr2); //[ 1,"test",2,3,"4" ];

02 深拷贝

（1）数组

对于数组我们可以使用slice()和concat()方法来解决上面的问题

slice

var arr = ['a', 'b', 'c'];
var arrCopy = arr.slice(0);
arrCopy[0] = 'test'
console.log(arr); // ["a", "b", "c"]
console.log(arrCopy); // ["test", "b", "c"]复制代码

concat

var arr = ['a', 'b', 'c'];
var arrCopy = arr.concat();
arrCopy[0] = 'test'
console.log(arr); // ["a", "b", "c"]
console.log(arrCopy); // ["test", "b", "c"]复制代码

知识点补充：

arrayObj.slice(start, [end]) 该方法返回一个 Array 对象，其中包含了 arrayObj 的指定部分。不会改变原数组
arrayObj.concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

(2) 对象

对象的深拷贝实现原理：定义一个新的对象，遍历源对象的属性并赋给新对象的属性

var obj = {
   name:'Hanna Ding',
   age: 22
}

var obj2 = new Object();
obj2.name = obj.name;
obj2.age = obj.age

obj.name = 'xiaoDing';
console.log(obj); //Object {name: "xiaoDing", age: 22}
console.log(obj2); //Object {name: "Hanna Ding", age: 22}复制代码

我们就可以封装一个方法 deepCopy来实现对象的深拷贝，代码如下

var obj = {
    name: 'Hanna',
    age: 22
}
var deepCopy = function (source) {
    var result = {};            
    for(var key in source) {                
        if(typeof source[key] === 'object') {
            result[key] = deepCopy(source[key])
        } else {
            result[key] = source[key]
        }
    }            
    return result;
}

var objCopy = deepCopy(obj)
obj.name = 'ding';
console.log(obj);//Object {name: "ding", age: 22}
console.log(objCopy);//Object {name: "Hanna", age: 22}复制代码