深拷贝与浅拷贝的区别
浅拷贝拷贝引用类型时拷贝的是地址,深拷贝拷贝引用类型拷贝的是具体的数据值。
当直接把obj赋值给obj2时,修改obj2的引用类型的值,obj的引用类型的值也会受到影响。
let obj = {
name:'老虎',
age:'18',
hobby:['吃肉','睡觉']
}
//浅拷贝
let obj2 = obj
obj2.hobby[0] = '喝水'
console.log(obj)
console.log(obj2)
通过深拷贝方式将obj赋值给obj2时,修改obj2的引用类型的值,obj的引用类型的值不会受到影响。
let obj = {
name:'老虎',
age:'18',
hobby:['吃肉','睡觉']
}
//深拷贝
let obj2 = JSON.parse(JSON.stringify(obj))
obj2.hobby[0] = '喝水'
console.log(obj)
console.log(obj2)
深拷贝和浅拷贝常用的方式总结
1.浅拷贝常用方式
(1) 直接赋值
let obj = {
name:'老虎',
age:'18',
hobby:['吃肉','睡觉']
}
let obj2 = obj
(2)Object.assign(目标对象,源对象)
let obj = {
name:'老虎',
age:'18',
hobby:['吃肉','睡觉']
}
let obj2 = {} //创建一个空对象
Object.assign(obj2,obj) // 将obj的值复制给obj2
2.深拷贝常用方式
(1)通过JSON转换完成深拷贝
let obj = {
name:'老虎',
age:'18',
hobby:['吃肉','睡觉']
}
let obj2 = JSON.parse(JSON.stringify(obj)) //JSON转换实现深拷贝
(2)通过lodash库完成深拷贝
<script src="./lodash.js"></script> <!-- 引入lodash库 -->
<script>
let obj = {
name:'老虎',
age:'18',
hobby:['吃肉','睡觉']
}
let obj2 = _.cloneDeep(obj) //使用lodash库的方法 cloneDeep
</script>
tips:使用lodash的深拷贝方式一定要引入lodash.js文件
(3)通过递归完成深拷贝
function deepClone(obj2,obj){ //obj2为要赋值的新对象 obj为原对象
for(let key in obj){ //对象遍历 遍历obj 来 赋值给 obj2
//如果原对象的key 为 数组 那么就递归赋值
if(obj[key] instanceof Array){
obj2[key] = []
deepClone(obj2[key],obj[key])
}else if(obj[key] instanceof Object){
//如果原对象的key 为 对象 那么就递归赋值
obj2[key] = {}
deepClone(obj2[key],obj[key])
}else{
//正常情况下 直接赋值
obj2[key] = obj[key]
}
}
}
let obj = {
name:'老虎',
age:'18',
hobby:['吃肉','睡觉']
}
let obj2 = {}
deepClone(obj2,obj) //调用函数