在工作中会遇到各式各样的与深拷贝浅拷贝相关的问题，其实造成这类问题的根本原因是javascript中，不同的数据类型的传值方式不一致，首先我们先说一下js中都有哪些数据类型：
1.javascript的数据类型及传值方式
- 简单数据类型
简单数据类型也就是值类型，简单数据类型有：Undefined, Null,Boolean,Number,String.
传值方式：变量的交换等于在一个新的作用域创建一个新的空间，新空间与之前的空间互不相关和影响。 - 复杂数据类型
复杂数据类型也叫引用类型，常见的复杂数据类型有：Object、Array、Function。
传值方式：变量的交换，并不会创建一个新的空间，而是让对象或方法和之前的对象或方法，同时指向一个原有空间（即一个地址）。就如同原来一个人有家门的钥匙，之后这个人结婚了，就配了一把钥匙给自己的妻子，这时候，两个人共同有家的钥匙，但是家还是一个家。
2.浅拷贝
什么是浅拷贝呢？我们来直接看代码吧！
var obj = {a: 10, b: 20, c: 30}
var obj2 = obj
obj2.b = 50
console.log(obj) //{a: 10, b: 50, c: 30}
console.log(obj2) //{a: 10, b: 50, c: 30}
复制一份obj为obj2,修改了obj2.b的值，由于这两个对象所指向同一个地址，所以造成obj.b的值也跟着改变了，这就叫做浅拷贝。
3.深拷贝
我们希望改变复制过来的新值不对旧数据进行修改，这就是深拷贝，那么我们要怎么做才可以深拷贝呢
方法1.Object.assign()
var obj = {a: 10, b: 20, c: 30}
var obj2 = Object.assign({}, obj) //第一个参数要为{}
obj2.b = 50
console.log(obj) //{a: 10, b: 20, c: 30}
console.log(obj2) // {a: 10, b: 50, c: 30}
这个方法看起来不错，使用起来也比较方便，但是这个方法的坑不小！只适用于一层的深度拷贝，对于多级的拷贝就歇菜了~例如
var obj = {a: 10, b: {aa: 'aa', bb: 'bb'}, c: 30}
var obj2 = Object.assign({}, obj)
obj2.b.aa = 50
console.log(obj) //{a: 10, b: {aa: 50, bb: 'bb'}, c: 30} 改变了
console.log(obj2) // {a: 10, b: {aa: 50, bb: 'bb'}, c: 30}
方法2.JSON.parse(JSON.stringify())
var obj = {a: 10, b: {aa: 'aa', bb: 'bb'}, c: 30}
var obj2 = JSON.parse(JSON.stringify(obj))
obj2.b.aa = 50
console.log(obj) //{a: 10, b: {aa: 'aa', bb: 'bb'}, c: 30} 没有变没有变
console.log(obj2) // {a: 10, b: {aa: 50, bb: 'bb'}, c: 30}
嗯嗯，这个方法解决了方法1存在的问题，但是不是就是完美的方法了呢？答案是一个非常肯定的NO!!!!!!,那么这个方法存在什么样的问题呢？首先它会抛弃对象的constructor。也就是深拷贝之后，不管这个对象原来的构造函数是什么，在深拷贝之后都会变成Object。
这种方法能正确处理的对象只有 Number, String, Boolean, Array, 扁平对象，即那些能够被 json 直接表示的数据结构。也就是说，只有可以转成JSON格式的对象才可以这样用，像function没办法转成JSON。
var obj = {a: 10, b: function(){}, c: 30}
var obj2 = JSON.parse(JSON.stringify(obj))
console.log(obj.b) //function(){}
console.log(obj2.b) //undefine
方法3.slice()或concat()
var arr = ['a', 'b', 'c', 'd']
var arr2 = arr.slice(0)
arr2.push('haha')
console.log(arr) // ["a", "b", "c", "d"]
console.log(arr2) // ["a", "b", "c", "d", "haha"]
对数组进行深度克隆可以使用slice()/concat()方法，由上面的例子可以看到这个方法针对一层的深度拷贝是可以的，但是对多级的拷贝的效果如何呢？
var arr = ['a', 'b', ['aa', 'bb'], 'd']
var arr2 = arr.slice(0)
//var arr2 = arr.concat()
arr2[2].push('haha')
console.log(arr) // ["a", "b",['aa', 'bb','haha'], "d"] 改变了
console.log(arr2) // ["a", "b",['aa', 'bb','haha'], "d"]
由上面例子可以看出slice()/concat()方法对多级的拷贝也是没有效果的。
方法4.自定义方法
上面的方法或多或少都有这一些问题，为了使用更加方便，我们可以自定义一个方法deepcope进行深度克隆。
function deepcope(data) {
var temp;
if(data instanceof Array) { //克隆的是数组
temp = []
for(var i = 0, l = data.length; i < l; i++){
temp.push(deepcope(data[i]))
}
} else if (data instanceof Object) { //克隆的是对象
temp = {}
for(var key in data){
temp[key] = deepcope(data[key])
}
} else { //克隆的既不是数组也不是对象则返回原数据
temp = data
}
return temp
}
方法写好了现在我们来试试这个方法的效果如何，首先先尝试一个数组的深度克隆：
//一层克隆
var arr = ['a', 'b', 'c']
var arr2 = deepcope(arr)
arr2[2]='change'
console.log(arr2) //['a', 'b', 'change']
console.log(arr) //['a', 'b', 'c']
//多层克隆
var arr = ['a', 'b', [['aaa','bbb'], 'bb'], 'd']
var arr2 = deepcope(arr)
arr2[2][0][0]='change'
console.log(arr2) //['a', 'b', [['change','bbb'], 'bb'], 'd']
console.log(arr) //['a', 'b', [['aaa','bbb'], 'bb'], 'd']
我们自己写的方法可以完美的进行数组一层以及多层拷贝，那么针对对象的拷贝效果如何呢？我们再次尝试一下：
//一层克隆
var obj = {a:'a', b:'b', c:'c'}
var obj2 = deepcope(obj)
obj2.b = 'change'
console.log(obj2) //{a:'a', b:'change', c:'c'}
console.log(obj) //{a:'a', b:'b', c:'c'}
//多层克隆
var obj = {a:'a', b:{aa:'aa', bb:{aaa:'aaa'}}, c:'c'}
var obj2 = deepcope(obj)
obj2.b.bb.aaa = 'change'
console.log(obj2) //{a:'a', b:{aa:'aa', bb:{aaa:'change'}}, c:'c'}
console.log(obj) //{a:'a', b:{aa:'aa', bb:{aaa:'aaa'}}, c:'c'}
不错！ deepcope方法也可以将对象进行深度拷贝。那么对象和数组的混合效果如何？
var obj = {a:'a', b:[{aa:'aa', bb: ['aaa', 'bbb']},'bb'], c:'c'}
var obj2 = deepcope(obj)
obj2.b[0].bb[0] = 'change'
console.log(obj2) // {a:'a', b:[{aa:'aa', bb: ['change', 'bbb']},'bb'], c:'c'}
console.log(obj) // {a:'a', b:[{aa:'aa', bb: ['aaa', 'bbb']},'bb'], c:'c'}
嗯！由以上示例我们可以得出结论：我们自定义的deepcope方法可以对数组以及对象进行深度克隆！
网友评论