深浅拷贝，都会进行复制，区别在于是否会互相影响，改一个，另一个也会发生改变。
浅拷贝：复制的只是原对象的引用，新旧对象的指针指向同一块内存空间
深拷贝：对原对象完全的复制，开辟了新的内存空间，引用指向另一块内存空间，新旧对象互不影响。
浅拷贝
实现方法：遍历对象，将对象的属性和方法放到一个新的对象中
var shallowCopy = function (obj) {
//只拷贝对象
if (typeof obj !== 'object') return
//根据对象类型判断新建数组还是对象
let newObj = obj instanceof Array ? [] : {}
//遍历对象
for (let key in obj) {
//判断是obj的属性才进行拷贝
if (obj.hasOwnProperty(key)) {
newObj[key] = obj[key]
}
}
return newObj
}
//测试
var obj = [1, 2, 3]
var newObj = shallowCopy(obj)
newObj[0] = 4
console.log(obj); //[ 1, 2, 3 ]
console.log(newObj);//[ 4, 2, 3 ]
//是不是觉得是深拷贝，感觉互不影响，来看下一个例子
var obj = [1, [2, 3], [4, 5]]
var newObj = shallowCopy(obj)
newObj[1][0] = 4
console.log(obj); //[ 1, [ 4, 3 ], [ 4, 5 ] ]
console.log(newObj);//[ 1, [ 4, 3 ], [ 4, 5 ] ]
//我们发现，第一层的值是深拷贝，但第二层就是浅拷贝了(与Array的slice和concat方法实现的浅拷贝相似)
使用Array的slice和concat方法实现的浅拷贝
var obj = [1, [2, 3], [4, 5]]
var newObj = obj.slice()
newObj[1][0] = 4
console.log(obj); //[ 1, [ 4, 3 ], [ 4, 5 ] ]
console.log(newObj); //[ 1, [ 4, 3 ], [ 4, 5 ] ]
//concat方法实现与其相似
使用展开运算符
var obj = {a : 1, obj : {
b : 2,
c : 3
} }
var newObj = {...obj}
newObj.obj.b = 6
console.log(obj); //{ a: 1, obj: { b: 6, c: 3 } }
console.log(newObj); //{ a: 1, obj: { b: 6, c: 3 } }
深拷贝
- 取巧方法(利用JSON.parse和JSON.stringify())
JOSN 对象中的 stringify 可以把一个 js 对象序列化为一个 JSON 字符串，parse 可以把 JSON 字符串反序列化为一个 js 对象
缺点：不能拷贝函数
var obj = [1, [2, 3], [4, 5]]
var newObj = JSON.parse(JSON.stringify(obj))
newObj[1][0] = 4
console.log(obj); //[ 1, [ 2, 3 ], [ 4, 5 ] ]
console.log(newObj); //[ 1, [ 4, 3 ], [ 4, 5 ] ]
- 与浅拷贝相似，只是判断obj的属性如果为对象则递归调用深拷贝函数
var deepCopy = function (obj) {
//只拷贝对象
if (typeof obj !== 'object') return
//根据对象类型判断新建数组还是对象
var newObj = obj instanceof Array ? [] : {}
//遍历对象
for (var key in obj) {
//判断是obj的属性如果为对象则递归调用深拷贝函数
if (obj.hasOwnProperty(key)) {
newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key]
}
}
return newObj
}
var obj = [1, [2, 3], [4, 5]]
var newObj = deepCopy(obj)
newObj[1][0] = 4
console.log(obj); //[ 1, [ 2, 3 ], [ 4, 5 ] ]
console.log(newObj);//[ 1, [ 4, 3 ], [ 4, 5 ] ]
- 利用jquery的extend方法实现深拷贝
语法：jQuery.extend( [deep ], target, object1 [, objectN ] )
深浅拷贝对应的参数为 [deep],值为true或false,默认为false，且不能显示显现出来，要写只能写true
true对应深拷贝
false对应浅拷贝
var obj = [1, [2, 3], [4, 5]]
let newObj = []
$.extend(true, newObj, obj) //深拷贝示例
newObj[1][0] = 4
console.log(obj);
console.log(newObj);
image.png
var obj = [1, [2, 3], [4, 5]]
let newObj = []
$.extend(newObj, obj) //浅拷贝示例
newObj[1][0] = 4
console.log(obj);
console.log(newObj);
image.png
