在聊JavaScript（以下简称js）深度克隆之前，我们先来了解一下js中对象的组成。
在 js 一切实例皆是对象，具体分为 原始类型 和 合成类型 ：
原始类型 对象指的是 Undefined 、 Null 、Boolean 、Number 和 String ，按值传递。
合成类型 对象指的是 array 、 object 以及 function ，按地址传递，传递的时候是内存中的地址。

克隆或者拷贝分为2种： 浅度克隆 、 深度克隆 。
浅度克隆 ：基本类型为值传递，对象仍为引用传递。对拷贝后的数据进行修改会影响原数据的一种拷贝方式。
深度克隆 ：所有元素或属性均完全克隆，并于原引用类型完全独立，即，在后面修改对象的属性的时候，原对象不会被修改。对拷贝后的数据进行修改是不会影响原数据的一种拷贝方式。

js中的深浅拷贝一直是一个热门的话题，简单来说，拷贝就是通过一些方法产生与被拷贝数据（几乎）完全一样的数据。在js中，拷贝可以分为深拷贝（深度克隆）和浅拷贝两种。

按照一般的理解来说通过拷贝得到的数据无论如何被修改应该也不会影响原数据呀，比如我们日常生活中使用的复制粘贴，一般情况下，我们没见过谁修改一个复制得到的word文档导致原文档也发生了修改呀！这就得从js的内存空间说起。

js内存空间的补充：

js中的内存空间由常量池、栈和堆组成，其中堆用来存放引用类型的数据，像数组、对象这些都属于引用类型的数据。一个对象在内存空间中的存放形式为：将对象的名称和引用存放在栈空间，该引用指向堆空间中的该对象，数组同理。

而我们都知道通过赋值运算等方法产生一个拷贝对象，拿到的其实还是原对象，因为我们复制的仅仅是该对象的引用，修改新的对象，原对象的内容也会发送改变，因为原对象和新对象的引用一样，所以深浅拷贝问题就诞生了。

浅克隆（浅拷贝）

在数据类型为引用类型的时候，当你给这个变量赋值，其实是引用这个变量在内存中的地址。如下：

1.直接赋值

在数据类型为引用类型的时候，当你给这个变量赋值，其实是引用这个变量在内存中的地址。如下：

var obj = {name: 'ccc', age: 18}    // 定义一个变量为对象，引用类型

var cloneObj = obj      // 创建一个新变量，并赋值

console.log(cloneObj)   // {name: 'ccc', age: 18}  

console.log(cloneObj === obj)   // true

2.Object.assgin():

const arr1 = [1, 2, 3]
const arr2 = Object.assign(arr1)
arr2[0] = 5
console.log(arr1) // [5, 2, 3]
console.log(arr2) // [5, 2, 3]

3、Array.prototype.concat()（浅拷贝）

 let  arr=[1,2,3,4,{username:"kebi",age:18}];

 let  arr1=arr.concat()  // concat是连接数组，如果不传参，则表示复制原数组的数据到目标数组中

4、Array.prototype.slice()（浅拷贝）

let arr2=arr.slice(); //slice是截取数组或者字符串，不传参表示默认全部

浅克隆带来的问题：

拷贝的数据里不能有函数，处理不了，浅拷贝，拷贝的是引用，修改拷贝以后的数据会影响原数据，深拷贝（深度克隆），拷贝时生成新数据，修改不会影响原数据

var obj = {name: 'ccc', age: 18}    // 定义一个变量为对象，引用类型

var cloneObj = obj      // 创建一个新变量，并赋值

console.log(cloneObj)   // {name: 'ccc', age: 18}  

console.log(cloneObj === obj)   // true



obj.name = 'www'

console.log(cloneObj)   // { name: 'www', age: 18 }

我们可以发现，我们修改了obj变量的属性值的时候，cloneObj的属性值也跟着发生了变化。原因是他们虽然是两个变量，但是引用的变量是同一个变量。看下图分析：

深度克隆（深拷贝）

1.判断被拷贝对象的类型

2.根据类型生成空对象或空数组，其他基本数据类型直接返回即可

3.调用for in方法对被拷贝对象（数组）进行遍历，往新对象（数组）中添加数据，如果是基本数据类型，则直接将其添加到新数组（对象）中，否则深度克隆该数据，这样子进行递归即可。

深度克隆，就是解决浅度克隆带来的问题的。直接上代码：

function deepClone(o) {

    // 判断如果不是引用类型，直接返回数据即可

    if (typeof o === 'string' || typeof o === 'number' || typeof o === 'boolean' || typeof o === 'undefined') {

        return o

    } else if (Array.isArray(o)) { // 如果是数组，则定义一个新数组，完成复制后返回

        // 注意，这里判断数组不能用typeof，因为typeof Array 返回的是object

        console.log(typeof [])  // --> object

        var _arr = []

        o.forEach(item => { _arr.push(item) })

        return _arr

    } else if (typeof o === 'object') {

        var _o = {}

        for (let key in o) {

            _o[key] = deepClone(o[key])

        }

        return _o

    }

}



var arr = [1, 2, 3, 5]

var cloneArr = deepClone(arr)

console.log(cloneArr)   // --> [ 1, 2, 3, 5 ]

console.log(arr === cloneArr)   // --> false



var obj = { name: 'ccc', age: 18 }

var cloneObj = deepClone(obj)

console.log(cloneObj)   // --> { name: 'ccc', age: 18 }

console.log(obj === cloneObj)   // false

obj.name = 'www'

console.log(obj)    // --> { name: 'www', age: 18 }

console.log(cloneObj)   // --> { name: 'ccc', age: 18 }

obj和cloneObj分别指向自己所存的变量地址，互不影响，代码注释挺详细了，看下图:

注意：上图深度克隆代码只供参考了解，还有很多细节没有考虑，比如数组和对象的嵌套拷贝等等，具体使用请查看Lodash中的cloneDeep()方法。

Json.parse(Json.Stringfy())（深拷贝）

let arr3=JSON.parse(JSON.stringify(arr));

//先把原数组转换为json字符串，变为基本数据类型，完全生成一份新数据，然后把新数据转换为js原数组，就利用了这一点，实现了深拷贝