JavaScript深拷贝和浅拷贝

在JavaScript中操作数据的时候，基础数据类型还好，不管是我们怎么赋值修改都不会有什么问题，但是如果我们操作的是数组或者Object，那很容易出现修改了一个值就会把所有的都给变了，这就是浅拷贝。

var obj1 = {a: 10};
var obj2 = obj1;
obj2.a = 40;
console.log(obj1);// {a: 40}
console.log(obj2);// {a: 40}

 

var arr1 = [0];
var arr2 = arr1;
arr2[0] = 5;
console.log(arr1);
console.log(arr2);
复制代码

我们明明想只是修改对象或者数组中的另一个，为什么两个都改变了。这就涉及深拷贝和浅拷贝了。

浅拷贝：只复制指向某个对象的指针，而不复制对象本身，新旧对象共享一块内存； 深拷贝：复制并创建一个一摸一样的对象，不共享内存，修改新对象，旧对象保持不变。

这原理其实跟堆内存、栈内存、指针有关系，在这边就不讲了。

那怎么能深拷贝呢？方法很多，比如Object的assign、循环赋值新的一个对象、jQuery的extend方法等等，但是这些都复杂化了，虽然可以实现但本人不推荐。

如果是数组，那么我们用slice和concat函数，这两个函数都会返回一个新的数组，而参数只要不设置，返回的就是原本的数组。

var arr1 = [0];
var arr2 = arr1.slice(0);
arr2[0] = 5;
console.log(arr1);
console.log(arr2);

 

 

var arr1 = [0];
var arr2 = arr1.concat();
arr2[0] = 5;
console.log(arr1);
console.log(arr2);
复制代码

输出的都是原来数组的。在我认为，这两个方法是最简单的数组深拷贝方法,当然也可以循环赋值一个新的数组，跟下面对象一样。

如果是对象，那我推荐转成字符串然后再转回对象。

var obj1 = {a: 10};
var obj2 = JSON.parse(JSON.stringify(obj1));
obj2.a = 40;
console.log(obj1);
console.log(obj2);
复制代码

但是，如果对象里面是函数的话，这个方法是没办法把函数赋值的。

var obj1 = {a: 10, b:function () {
        alert(5);
    }};
var obj2 = JSON.parse(JSON.stringify(obj1));
obj2.a = 40;
console.log(obj1.b);
console.log(obj2.b);
复制代码

Obj2.b输出undefined，没办法拷贝函数。所以对象中如果有涉及函数，一般用循环赋值进行深拷贝。

var obj1 = {a: 10, b:function () {
        alert(5);
    }};
var obj2 = {}
for(var i in obj1) {
    obj2[i] = obj1[i];
};
console.log(obj1);
console.log(obj2.b);
复制代码

不仅函数可以拷贝，在修改任何一个对象的时候不会把另一个给修改了。

如果有什么指教请留言，或者有什么问题也请留言，我们会尽我们最大努力帮您解答。

欢迎关注Coding个人笔记 公众号

转载于:https://juejin.im/post/5c484054f265da61587775e5