首先理解什么是浅拷贝和深拷贝:
浅拷贝:
- 浅拷贝只会复制对象的第一层属性,而不会递归地复制嵌套的对象。
- 浅拷贝仅复制对象的引用,新对象和原始对象仍然共享相同的引用,因此对新对象的修改可能会影响到原始对象。
- 浅拷贝方法包括
Object.assign()
、扩展运算符...
等。
代码解释:
const obj = {uname:'pink',age:18,family:{baby:'一'}}const o = {...obj};o.age = 20;console.log(obj.age);//18console.log(o.age);//20
这是浅拷贝 只会复制对象的第一次层属性 因此会看到两个对象的age值不一样
再看对象嵌套多层对象时的输出:
const obj = {uname:'pink',age:18,family:{baby:'一'}}const o = {};Object.assign(o,obj);o.age = 20;o.family.baby = '二';console.log(obj.age);//18console.log(o.age);//20console.log(obj.family.baby);//二console.log(o.family.baby);//二
这里我们可以看到 浅拷贝在我们只有一层属性的时候 修改不会对源对象造成影响,但是当源对象中有多层对象的时候 对于o.family.baby
的赋值操作,由于o
和obj
对象都引用了相同的family
对象,所以修改o.family.baby
实际上也会影响到obj.family.baby
。这是因为浅拷贝只复制对象的引用,所以当引用指向的对象发生改变时,所有引用该对象的变量都会受到影响。当执行Object.assign(o, obj)
时,o
对象获得了obj
对象的属性和值。所以,o.age
的赋值操作并不会影响到obj.age
,因为这只是修改了o
对象的属性值,并没有改变原始的obj
对象。
常用方法:
-
拷贝对象:
Object.assgin()
/展开运算符{...obj}拷贝对象 -
拷贝数组:
Array.prototype.concat()
或者[...arr]
直接赋值获得前拷贝有什么区别?
-
直接赋值的方法,只要是对象,都会影响,因为是直接拷贝对象栈的地址
-
浅拷贝如果是一层对象,不相互影响,如果出现多层对象拷贝还是回相互影响
浅拷贝怎么理解?
-
拷贝对象之后,里面的属性值是简单数据类型直接拷贝值
-
如果属性值是引用数据类型则拷贝的是地址
深拷贝:
深拷贝:拷贝的是对象,不是地址
常用的方法:
-
通过递归实现深拷贝
-
lodash/cloneDeep
语法:_.cloneDeep(要被克隆的对象); const o = _.cloneDeep(obj);
-
通过
常用使用JSON.stringify()
实现JSON
方法: -
-
这里的const o = JSON.parse(JSON.stringify(obj));console.log(o);输出的值为:const obj = {uanme:'pink',age:18,hobby:['乒乓球','足球'],family:{baby:'小pink'}}//把对象转换成JSON字符串// console.log(JSON.stringify(obj));/*{"uanme":"pink","age":18,"hobby":["乒乓球","足球"],"family":{"baby":"小pink"}}*/const o = JSON.parse(JSON.stringify(obj));console.log(o);o.family.baby = '123';console.log(o);console.log(obj);
- 这里的baby的值改变下因为下面的 o.family.baby = '123'; 对它进行了改变
- 当我们输出那个值的时候会发现和上面的一模一样:
- 而当我们输出obj的值的时候会发现它的baby的值并没有改变:
-
这就是深拷贝 当拷贝的对象发生变化时 源对象不会发生变化