html网站建设流程图深圳微信公众平台开发网站开发

首先理解什么是浅拷贝和深拷贝：

浅拷贝：

• 浅拷贝只会复制对象的第一层属性，而不会递归地复制嵌套的对象。
• 浅拷贝仅复制对象的引用，新对象和原始对象仍然共享相同的引用，因此对新对象的修改可能会影响到原始对象。
• 浅拷贝方法包括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对象。

常用方法：

1. 拷贝对象：Object.assgin()/展开运算符{...obj}拷贝对象

2. 拷贝数组：Array.prototype.concat()或者[...arr]

直接赋值获得前拷贝有什么区别？

• 直接赋值的方法，只要是对象，都会影响，因为是直接拷贝对象栈的地址

• 浅拷贝如果是一层对象，不相互影响，如果出现多层对象拷贝还是回相互影响

浅拷贝怎么理解？

• 拷贝对象之后，里面的属性值是简单数据类型直接拷贝值

• 如果属性值是引用数据类型则拷贝的是地址

深拷贝：

深拷贝：拷贝的是对象，不是地址

常用的方法：

1. 通过递归实现深拷贝

2. lodash/cloneDeep

   语法：_.cloneDeep(要被克隆的对象);
   const o = _.cloneDeep(obj);

3. 通过JSON.stringify()实现

   常用使用JSON方法：

4. 1. 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);

      这里的const o = JSON.parse(JSON.stringify(obj));console.log(o);输出的值为：
      1. 这里的baby的值改变下因为下面的 o.family.baby = '123'; 对它进行了改变
      2. 当我们输出那个值的时候会发现和上面的一模一样：
         1. 
      3. 而当我们输出obj的值的时候会发现它的baby的值并没有改变：
         1. 

这就是深拷贝 当拷贝的对象发生变化时  源对象不会发生变化