深拷贝与浅拷贝

   拷贝(copy)是指将一个目标数据复制一份，形成两个个体。在开发中，若将一个基本数据类型(数值，字符串型)的变量赋值给另一个变量，就可以得到两个值相同的变量，
改变其中一个变量的值，不会影响另一个变量的值。但是，如果操作的目标是引用数据类型（如数组、对象），则会出现两个变量指向同一个对象的情况，如果改变其中一个对象
的成员，另一个对象也会发生改变。

具体代码如下：

<script>
    const p1={name:'张三',age:18};
    let p2=p1
    p2.name='李四';
    console.log('p1',p1);
    console.log('p2',p2);
    console.log(p1===p2)
</script>

控制台输出结果：

 

 从运行结果可以看出，在变量p1赋值给p2后，更改p2的数据，p1的数据也会发生改变。这种情况下在Javascript中成为浅拷贝(shallow copy)。

     在实际开发中，浅拷贝可以节省内存开销。因为一个对象可以保存大量数据，其占用的内存会比基本数据类型高。如果没有浅拷贝机制，在将对象作为函数参数传递时，函数内部的实参就会创建对象的副本，多占用一份内存空间，尤其是进行函数嵌套调用或递归操作时，占用空间会越来越多。

    与浅拷贝相对应的就是深拷贝(deep copy)，即真正创建一个对象的副本。若要实现深拷贝的效果，可以编写代码复制对象里的数据到另一个对象

代码如下所示：

function deepCopy(obj) {
  const arr = {};
  for (let i in obj){
      arr[i]=(typeof obj[i]==='object')?deepCopy(obj[i]):obj[i];
  }
  return arr;
}
const arr1={name:'张三',subject:{name: ['HTML','JS','Vue']}};
const arr2=deepCopy(arr1);
arr2.subject.name[0]='Css';
console.log('arr1',arr1);
console.log('arr2',arr2);
console.log(arr1===arr2);   

结果：

从上述代码可以看出，arr1和arr2是两个不同的对象，在修改arr2的成员后不影响arr1的成员。