深浅拷贝

1、js栈内存和堆内存的区别？

首先JavaScript中的变量分为基本类型和引用类型。基本类型就是保存在栈内存中的简单数据段，而引用类型指的是那些保存在堆内存中的对象。

（1）基本类型
  基本类型有Undefined、Null、Boolean、Number 和String。这些类型在内存中分别占有固定大小的空间，他们的值保存在栈空间，我们通过按值来访问的。   
（2）引用类型
  引用类型，值大小不固定，栈内存中存放地址指向堆内存中的对象。是按引用访问的。如下图所示：栈内存中存放的只是该对象的访问地址，在堆内存中为这个值分配空间。由于这种值的大小不固定，因此不能把它们保存到栈内存中。但内存地址大小的固定的，因此可以将内存地址保存在栈内存中。 这样，当查询引用类型的变量时， 先从栈中读取内存地址， 然后再通过地址找到堆中的值。对于这种，我们把它叫做按引用访问当我们看到一个变量类型是已知的，就分配在栈里面，比如INT,Double等。其他未知的类型，比如自定义的类型，因为系统不知道需要多大，所以程序自己申请，这样就分配在堆里面。基本类型大小固定，引用类型大小不固定，分开存放使得程序运行占用内存最小。
（3）栈内存：存放基本类型。 堆内存：存放引用类型（在栈内存中存一个基本类型值保存对象在堆内存中的地址，用于引用这个对象。）
（4）基本类型在当前执行环境结束时销毁，而引用类型不会随执行环境结束而销毁，只有当所有引用它的变量不存在时这个对象才被垃圾回收机制回收。

基本类型的拷贝

先开看一段非常经典的代码

var a = 1;
var b = a;
a = 200;
console.log(a);//200
console.log(b);//1

基本类型是按值传递，引用类型按引用传递，数值作为基本类型是保存在栈内存中，可以直接拿来用的，赋值时什么就是什么，不会受到传递元素的改变带来影响。

可以看到的是对于基本类型来说，我们将一个基本类型的值赋予 a 变量，接着将 a 的值赋予变量 b ；然后我们修改 b ；可以看到 b 被修改了，而 a 的值没有被修改，两个变量都使用的是独立的数据；

引用类型的拷贝

简单说，引用类型是生成一个指针保存在堆内存中，当给引用类型赋值时，我们的写的是在栈内存中，也就是说我们拿到的其实是一个指针。这个指针是指向了栈内存中这个引用类型的代码。

var obj1 = {
    a:  1,
    b:  2,
    c:  3
}
var obj2 = obj1;
obj2.a = 5;
console.log(obj1.a);  // 5
console.log(obj2.a);  // 5

可以看到的是，两个对象的值全部被修改了
对象是引用类型的值，对于引用类型来说，我们将 obj1 赋予 obj2 的时候，我们其实仅仅只是将 obj1 存储在栈堆中的的引用赋予了 obj2 ，而两个对象此时指向的是在堆内存中的同一个数据，所以当我们修改任意一个值的时候，修改的都是堆内存中的数据，而不是引用，所以只要修改了，同样引用的对象的值也自然而然的发生了改变

我们想要改变新的数组（对象）的时候，不改变原数组（对象），就需要用到深拷贝。

提到拷贝涉及到的两种拷贝类型：深拷贝和浅拷贝

浅拷贝

var a = {
    name:'mjj',
    age:20,
    hobby:'eat',
    friend:{
        name:'alex',
        age:38
    }
}
function shadowCopy(to,from){
    for(var key in from){
        to[key] = from[key]
    }
    return to;
}
var newObj = shadowCopy({},a);
newObj.age = 18;
newObj.friend.name = '阿黄';
/*
{
	age: 20,//没被改变
	friend: {
		name: "阿黄",//同时被改变，说明是同一个引用
		age: 38
	},
	hobby: "eat"
	name: "mjj
}
*/

我们发现，首先，浅拷贝不是直接赋值，浅拷贝新建了一个对象，然后将源对象的属性都一一复制过来,复制的是值，而不是引用。

我们知道，对象都是按地址引用进行访问的，浅拷贝的复制只复制了第一层的属性，并没有递归将所有的值复制过来，所以，操作拷贝数据，对原数据产生了影响，故而为浅拷贝。

我们想要改变新的数组（对象）的时候，不改变原数组（对象），就需要用到深拷贝。

arr=[100, [{a : 'hello'}, {b : "world"}], { c: "123456789" }];
    //判断修改的是不是'object'或者null,如果不是 object 或者 null 那么直接返回
    function deepClone(obj = {}) {
        if (typeof obj !== 'object' || obj == null) {
            return obj;
        }
        let result;
        //判断上面下来的obj是不是数组 用instanceof来检测 因为是数组应用类型 
 
 obj instanceof Array?result=[]:result={}
        for (var item in obj) {
            //查找一个对象是否有某个属性
            if (obj.hasOwnProperty(item)) {
                // 递归调用
                result[item] = deepClone(obj[item])
            }
        }
        return result;
    }
    let arr1=deepClone(arr);
    arr1[1][0].a='vue'
    arr1[0]=99
    console.log('原数组',arr)
    console.log('新数组',arr1)

深拷贝作用在引用类型上！例如：Object，Array
深拷贝不会拷贝引用类型的引用，而是将引用类型的值全部拷贝一份，形成一个新的引用类型，这样就不会发生引用错乱的问题，使得我们可以多次使用同样的数据，而不用担心数据之间会起冲突。

深拷贝的五种方法

1、使用JSON.stringify()以及JSON.parse()

let _tmp = JSON.stringify(obj);//将对象转换为json字符串形式

let result = JSON.parse(_tmp);//将转换而来的字符串转换为原生js对象

var obj1 = {
    a: 1,
    b: 2,
    c: 3
}
var objString = JSON.stringify(obj1);
var obj2 = JSON.parse(objString);
obj2.a = 5;
console.log(obj1.a);  // 1
console.log(obj2.a); // 5

可以看到没有发生引用问题，修改obj2的数据，并不会对obj1造成任何影响
但是使用JSON.stringify()以及JSON.parse()它是不可以拷贝 undefined ， function， RegExp 等等类型的

2、通过for in实现

function deepCopy1(obj) {
  let o = {}
  for(let key in obj) {
    o[key] = obj[key]
  }
  return o
}
 
let obj = {
  a:1,
  b: undefined,
  c:function() {},
}
console.log(deepCopy1(obj))

3、递归    （自身调用自身）

function deepClone1(obj) {
  //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝
  var objClone = Array.isArray(obj) ? [] : {};
  //进行深拷贝的不能为空，并且是对象或者是
  if (obj && typeof obj === "object") {
    for (key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (obj[key] && typeof obj[key] === "object") {
          objClone[key] = deepClone1(obj[key]);
        } else {
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone;

4.concat（数组的深拷贝）

使用concat合并数组，会返回一个新的数组。
对象是一个引用数据类型 普通的复制是一个浅拷贝

5、...扩展运算符

var a = {
    name: 'li',
    age: 24
}
var b = {...a}
b.name = 'wang';
console.log(a); // {name: 'li', age: 24}
console.log(b); // {name: 'wang', age: 24}