VUE中的赋值（深/浅拷贝）

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

今天在工作的时候，一个新来的同事，在使用子组件中的tree组件中，要把原先的数据修改过后传入后端，问题在于，想要对两个对象（从后端传过来的值可以公用）分别赋值。虽然她对象的赋值有先后顺序，但是对象的值还是一样。今天我想要分享一下关于复制的一些知识点：

分类：在前端的复制语句中，有直接赋值（也就是等号赋值），浅拷贝还有深度拷贝。

分类展示：

一、直接赋值

直接赋值对象其实是引用原先对象在堆中的地址，而不是堆中的数据，当新newPeople受到改变时会使原数据（people）一起改变。 实现方式：A = B

//定义一个people对象，用newPeople去接收他，重新赋值他的name为张三
   let people = {
       name : "用户1",
       age : "18"
   }
   let newPeople = people
   newPeople.name = "张三"
   console.log(people)//打印得到{name:"张三",age:18}
   console.log(newPeople)//打印得到{name:"张三",age:18}

二、浅拷贝

浅拷贝他会在堆中重新创建内存，拷贝前后对象的基本数据类型互不影响，但拷贝前后的对象引用类型因共享同一块内存，所以他们之间会相互影响。 实现方式：Object.assign()

let people = {
    name : '用户1',
    list : [ 1, [ 2, 3 ] , 4],
};
let newPeople=Object.assign({}, people);
newPeople.name = "张三";
newPeople.list[1] = [ 3, 2 ] ;
// 这是个浅拷贝的方法，这里改变了对象的引用类型
console.log('people',people)      // { name: '用户1', list: [ 1, [ 3, 2 ], 4 ] }
console.log('newPeople',newPeople)// { name: '张三' , list: [ 1, [ 3, 2 ], 4 ] }
}

三、深拷贝

从堆内存中开辟了一个新区域存放对象，堆对象中的子对象进行递归拷贝，拷贝前后的两个对象互不影响，互不干扰。 实现方式：JSON.parse(JSON.stringify())//不能拷贝函数和正则

let people = {
    name : '用户1',
    list : [ 1, [ 2, 3 ] , 4],
};
let newPeople=JSON.parse(JSON.stringify(people))
newPeople.name = "张三";
newPeople.list[1] = [ 3, 2 ] ;
console.log(people)   // { name: '用户1', list: [ 1, [ 2, 3 ], 4 ] }
console.log(newPeople)// { name: '张三', list: [ 1, [ 3, 2 ], 4 ] }