深拷贝的方法和浅拷贝的方法，为什么要区分深拷贝和浅拷贝

浅拷贝

浅拷贝指的是只拷贝第一层的原始类型值，和第一层的引用类型地址，一般只用于拷贝简单数据类型。

浅拷贝方法

1. 扩展运算符

var arr = [1,2,3];
var obj = {name: '小明', age: 18};

var coppyArr = [...arr];
var coppyObj = {...obj};

console.log(arr,coppyArr);
console.log(obj,coppyObj);

2. 对象的浅拷贝方法

var obj = {name: '小明', age: 18};
var coppyObj = Object.assign(obj,{4});  // 第二个参数合并至第一个参数，会修改obj
console.log(obj,coppyObj);

3. 数组的浅拷贝方法

var arr = [1,2,3];
var coppyArr = arr.slice(0,3);  // (开始位置，结束位置)
console.log(arr,coppyArr);

var arr = [1,2,3];
var coppyArr = arr.concat([]);  // 传入需要合并的数组
console.log(arr,coppyArr);

4. 使用的lodash的_.clone()方法

// 需要先安装和引入lodash
// yarn add lodash  || npm i lodash

import _ from 'lodash';

var arr = [1,2,3];
var obj = {name: '小明', age: 18};

var coppyArr = _.clone(arr);
var coppyObj = _.clone(obj);

console.log(arr,coppyArr);
console.log(obj,coppyObj);

深拷贝

深拷贝（深克隆）指拷贝所有的属性值，以及属性地址指向的值的内存空间，一般用于复杂数据类型。

深拷贝方法

1. JSON.parse(JSON.stringify(obj))

// 这种方式只能深拷贝对象和数组,该方法不能解决属性为函数(undefined)

var obj = { 
    name: '小明', 
    age:18,
    interest:{ 
        sports:['basketball', 'football'],
        study: 'book'
        } 
    }
var coppyObj = JSON.parse(JSON.stringify(obj));
console.log(obj,coppyObj);

2. 递归

const deelpClone = (obj)=>{
    if(!(typeof obj === 'object' && typeof obj !== 'null')){
        throw new Error('传参错误！')
    }
    const res = Array.isArray(obj) ? [...obj] : {...obj}
    Object.keys(res).forEach(key=>{
        res[key] = (typeof res[key] === 'object' && typeof res[key] !== 'null') ? deelpClone(res[key]) : res[key]
    })

return res;
}

var obj = { 
    name: '小明', 
    age:18,
    interest:{ 
        sports:['basketball', 'football'],
        study: 'book'
        } 
    }
var coppyObj = deelpClone(obj);
console.log(obj,coppyObj);

3. 使用的lodash的_.cloneDeep()方法

var obj = { 
    name: '小明', 
    age:18,
    interest:{ 
        sports:['basketball', 'football'],
        study: 'book'
        } 
    }
var coppyObj = _.cloneDeep(obj);
console.log(obj,coppyObj);

为什么要区分深拷贝和浅拷贝

浅拷贝在修改更深层级的数据后，源数据也会被修改！！！

例1：

var obj = { 
    name: '小明', 
    age:18,
    interest:{ 
        sports:['basketball', 'football'],
        study: 'book'
        } 
    }
var coppyObj = {...obj}

coppyObj.age = 19
coppyObj.interest.study = 'game'

console.log(obj,coppyObj)  // 结果是 obj.interest.study 的数据也被修改了

浅拷贝只是拷贝了第一层的数据,往下的数据都是共用的，所以修改了更深层级的数据源数据也会被一起修改

例2：

var obj = { 
    name: '小明', 
    age:18,
    interest:{ 
        sports:['basketball', 'football'],
        study: 'book'
        } 
    }
var coppyObj = JSON.parse(JSON.stringify(obj));

coppyObj.age = 19
coppyObj.interest.study = 'game'

console.log(obj,coppyObj)  // 结果只修改了 coppyObj.interest.study

深拷贝是拷贝了所有的数据，所以数据能够单独修改数据的时候不会影响到原数据

PS

高抬贵手，左上角点点赞哦！有错误的地方烦请评论区指出，一起摸鱼一起努力！！！