js深拷贝和浅拷贝的区别

js深拷贝和浅拷贝的区别

如何来区分深拷贝和浅拷贝，其实简单，例如:
就是我声明一个obj对象，如何让var a直接等于obj，然后有在obj新增个fun，此时的a也会随着新增个fun，相同a新增数据，obj也会改变，这就是浅拷贝，我直接把比obj地址赋值给我变量啊，当我obj随着改变a也随着改变。理解了浅拷贝，深拷贝也就不难理解了，深拷贝就是我只把obj里的数据拷贝过来，你后面obj怎么改变，我a都不会变。

var obj = {
	name : 'jack',
	age: '44'
}
var a = obj 
obj.fun = function(){console.log('rousi')}
console.log(a)
a.sex = 'man'
console.log(obj)

如果细心的人就发现，如果我用变量赋值，例如var a = 1, 然后var b = a ,a = 2 ，此时的b仍然等于1,这算不算深拷贝，虽然符合深拷贝的原理，但我们用深拷贝只针对比较为复杂的引用类型数据。为什么只针对引用类型数据，这就要了解基本类型和引用类型数据在栈中存储的方式
基本类型在栈中是以值方式存储的

然后var b = a ,a = 2 ，因为改变值，所以a = 2，b还是等于1

而引用类型是以栈提供的引用地址存储在栈中，而引用类型数据值是存在堆中的，这个地址指向堆中的值的
所以b = obj ,这里栈是直接把obj的地址赋值给b的，这也就为什么obj改变b也改变。

所以我们为什么要用深拷贝来拷贝引用数据类型了，接下来就来封装一个深拷贝函数吧，直接上代码。

 function deepCopy(data) {
            // 三元表达式判断data是不是数组，是数组就等于[],不是等于{}
            var newdata = Array.isArray(data) ? [] : {}
            if (data && typeof data === "object") {
                for (var k in data) {
                    // 判断data的k子元素是不是对象。如果是递归，如果不是，直接复制
                    if (data.hasOwnProperty(k)) {
                        if (data[k] && typeof data[k] === "object") {
                            newdata[k] = deepCopy(data[k]);
                        } else {
                            newdata[k] = data[k];
                        }
                    }
                }
            }
            return newdata
        }

接下来我再来试试代码吧，看看结果

其实深拷贝和浅拷贝不仅仅只是在面试中会问到，在我们日常工作敲代码也是非常有用的。就比如后台给你了一堆数据，在多人开发的时候，你不可能直接去操作数据，毕竟其他人也可能会用到数据，这时候深拷贝数据，吧数据拷贝过来，这样就可以安心的操作数据了。