深拷贝与浅拷贝

深拷贝与浅拷贝

什么是深拷贝，什么是浅拷贝

深拷贝：复制变量值，对于引用数据，则递归至基本类型后，再复制。
浅拷贝：会将对象的每个属性进行依次复制，但是当对象的属性值是引用类型时，实质复制的是其引用，当引用指向的值改变时也会跟着变化。
通俗的说，深拷贝就是将其他人的数据，经过操作后使得完全属于自己的，不受他人的影响。浅拷贝就是将他人的数据拿过来共用，还是受到他人变更的影响，只是给数据另外起了一个名字而已。

深拷贝方式

方法一：递归方法

const deepCopy= (obj) => {     
    let objArray = Array.isArray(obj) ? [] : {};
     if (obj && typeof obj === "object") {
       for (const key in obj) {
         if (obj.hasOwnProperty(key)) {
           if (obj[key] && typeof obj[key] === "object") {
             objArray[key] = deepCopy(obj[key]);
           } else {
             objArray[key] = obj[key];
           }
         }
       }
     }
     return objArray;
   }
   const obj = {name:'zhou',age:18,hobby:{exercise:"playing-baketball",food:'banana'}}
   const newObj= deepCopy(obj )

方式二：转成JSON字符串，再转成对象 （推荐）

let obj = {name:'zhou',age:18,hobby:{exercise:"playing-baketball",food:'banana'}}
let newObj = JSON.parse(JSON.stringify(obj ))

方式三：.lodash工具库

import { cloneDeep } from 'lodash'
const obj = {name:'zhou',age:18,hobby:{exercise:"playing-baketball",food:'banana'}}
const newObj= cloneDeep(obj )

（诸位还其方法，可以写在下方评论中）

浅拷贝方式

直接将变量赋值给另一个变量即可

Object.assign() 和展开运算符（…）拷贝

结论：Object.assign() 和展开运算符（…），当复制对象内属性值是简单类型时，是深拷贝，当是复杂类型时，是浅拷贝
测试1：

let obj = {name:'zhou',age:18,hobby:{exercise:"playing-baketball",food:'banana'}}
let obj1 = Object.assign({},obj)
//处理--1
obj.name = 'jian'
obj.age = 19
console.log(obj1)//{name:'zhou',age:18,hobby:{exercise:"playing-baketball",foot:'banana'}}

//处理--2
obj.hobby.food = 'apple'
console.log(obj2){name:'zhou',age:18,hobby:{exercise:"playing-baketball",foot:'apple'}}

测试2：

//对象
let obj5 = {a:'1',b:12,c:{f:11,g:'12'},d:['180',34]}
let obj6 = {...obj5}
//处理--1
obj5.a = '45'
console.log(obj6)//{a:'1',b:12,c:{f:11,g:'12'},d:['180',34]}
//处理--2
obj5.c.f = 45
obj5.d[1] = 45
console.log(obj6)//{a:'1',b:12,c:{f:45,g:'12'},d:['180',45]}

//数组
//处理--3
let a = [1,2,{e:12,d:'34'}]
let c = [..a]
a[0] = 9
console.log(c)//[1,2,{e:12,d:'34'}]
//处理--4
a[2].e= 45
console.log(c) //[1,2,{e:45,d:'34'}]

从上测试可以看出，Object.assign() 和展开运算符（…）拷贝，当第二层级(以上)的属性值为对象或其他引用类型，那对于这个对象而言其实是浅拷贝的，使用Object.assagin()和展开运算符（…）拷贝并不能进行深拷贝。

注：其他es6的Api方法和Array.prototype.slice()、 Array.prototype.concat()类似

知识点补充

JS的基本数据类型
基本数据类型：String，Boolean，Number，Undefined，Null；
引用数据类型：Object(Array，Date，RegExp，Function)；