浅拷贝和深拷贝的主要区别是深拷贝解决的是引用值的问题,如果要拷贝的是原始值,就可以直接使用浅拷贝;如果是引用值,浅拷贝只会拷贝引用值的地址,拷贝后和拷贝前使用的是同一块内存空间,缺点是你改我也改。
浅拷贝的实现
function clone(origin, target) {
var target = target || {};
for (var prop in origin) {
target[prop] = origin[prop];
}
return target
}
深拷贝的实现
深拷贝是用递归的方式调用浅拷贝,针对数组和对象
思路:
首先需要判断拷贝的是原始值还是引用值,如果是原始值,就按照原来的方法拷贝;如果是引用值,判断是数组还是对象,如果是数组,就新建一个数组,如果是对象,就新建一个对象。
function deepClone(origin, target) {
var target = target || {};
for (var prop in origin) {
// 如果是引用值,就分析是数组还是对象
// 如果是数组,就新建一个数组,如果是对象,就新建一个对象
if (typeof (origin[prop]) == 'object') {
target[prop] = (origin[prop].constructor === Array ? [] : {});
deepClone(origin[prop], target[prop])
} else {
// 原始值,按照原来的方法拷贝
target[prop] = origin[prop];
}
}
return target
}
其他方法:
1.可以通过 JSON.parse(JSON.stringify(object)) 来解决
2.可以使用lodash的深拷贝函数 _.cloneDeepWith(value, [customizer])
就不详细说明了,有兴趣可以自行了解哈~