js浅拷贝与深拷贝

简介: js浅拷贝与深拷贝

一、赋值

很多时候,我们会弄混浅拷贝与赋值。我们先来看看赋值是如何实现的

当我们把一个对象赋值给一个新的变量时,赋的是该对象在栈中的地址值,而不是堆中的数据,也就是两个对象指向的是同一个存储空间,无论哪个发生改变,其实都是改变的存储空间的内容,因此两个对象是联动的。
let person = {
    name:'爱就一个字',
    hobby:['学习',['看电影','shopping'],'跑步']
}
let person1 = person
person1.name = '小明'
person1.hobby[0] = '玩耍'
console.log(person);
console.log(person1);

在这里插入图片描述
在这里插入图片描述
如上结果,改了name和hobby,原来的数据都会发生改变。

二、浅拷贝

创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的就是内存地址,所以如果其中一个对象改变了这个地址,就会影响到另一个对象。

let person = {
    name:'爱就一个字',
    hobby:['学习',['看电影','shopping'],'跑步']
}
function shallowCopy (obj) {
    let target = {}
    for(let i in obj) {
        if(obj.hasOwnProperty(i)) {
            target[i] = obj[i]
        }
    }
    return target
}
let person1 = shallowCopy(person)
// 调用shallowCopy()并且把person传进去了,返回一个target对象,这个target对象是原来person对象的精确拷贝
person1.name = '小明'
person1.hobby[0] = '玩耍'
console.log(person);
console.log(person1);

在这里插入图片描述
如上结果,name是基本数据类型,改了person1的name,person的name并没有受到影响,它本身的值不变;而hobby是引用数据类型,改了person1的hobby,person的hobby也会受到影响,它原来的值也被改变了,因为它们指向的是同一个地址。

小结:
浅拷贝就是重新在堆中创建内存,拷贝前后对象的基本数据类型互不影响,但拷贝前后对象的引用类型因共享同一块内存,会相互影响。

三、深拷贝

深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。

let person = {
    name:'爱就一个字',
    hobby:['学习',['看电影','shopping'],'跑步']
}
function deepClone (obj) {
    let cloneObj = {}
    if(typeof obj !== 'object') return obj
    for(let i in obj) {
        if(obj.hasOwnProperty(i)) {
            cloneObj[i] = deepClone(obj[i])
        }
    }
    return cloneObj
}
let person1 = deepClone(person)
person1.name = '小明'
person1.hobby[0] = '玩耍'
console.log(person);
console.log(person1);

在这里插入图片描述
如上结果,改了person1的name,person的name并没有受到影响,它本身的值不变;改了person1的hobby,person的hobby也没有受到影响,它原来的值也不变。

四、总结

在这里插入图片描述

相关文章
|
3月前
|
JSON 前端开发 JavaScript
JavaScript拷贝大作战:浅拷贝vs深拷贝
JavaScript拷贝大作战:浅拷贝vs深拷贝
56 0
|
1月前
|
JSON JavaScript 数据格式
深拷贝和浅拷贝(js的问题)
深拷贝和浅拷贝(js的问题)
14 0
|
5天前
|
JavaScript 前端开发
JS中浅拷贝和深拷贝的区别,浅拷贝的危害
JS中浅拷贝和深拷贝的区别,浅拷贝的危害
11 0
|
25天前
|
JavaScript
js浅拷贝与深拷贝的区别?
js浅拷贝与深拷贝的区别?
|
26天前
|
JavaScript 前端开发 安全
js中浅拷贝和深拷贝的区别
js中浅拷贝和深拷贝的区别
|
1月前
|
JavaScript 前端开发
js中浅拷贝和深拷贝的区别
js中浅拷贝和深拷贝的区别
26 1
|
2月前
|
JavaScript 前端开发 API
javascript中的浅拷贝和深拷贝
javascript中的浅拷贝和深拷贝
|
4月前
|
JSON 前端开发 JavaScript
【面试题】JavaScript 深拷贝和浅拷贝 高级
【面试题】JavaScript 深拷贝和浅拷贝 高级
|
6月前
|
存储 JSON JavaScript
JavaScript深拷贝与浅拷贝
JavaScript深拷贝与浅拷贝
24 0
|
7月前
|
存储 JavaScript 前端开发
带你读《现代Javascript高级教程》十七、JavaScript深拷贝与浅拷贝(1)
带你读《现代Javascript高级教程》十七、JavaScript深拷贝与浅拷贝(1)