在实际开发中遇到过太多次深拷贝浅拷贝的问题。总结一下~
这是之前写过的一篇文章，解决浅拷贝深拷贝的问题只说了一种方法，今天来补充一下。
介绍深拷贝和浅拷贝都在上一篇文章里介绍过了，在上一篇文章里只写了一个针对于数组的一种深拷贝，今天总结一下 js中对象和数组的深浅拷贝。具体的场景已经在上一篇文章里说明了。
这里废话一下上一篇文章中出现的问题：一个表格数据，可以点击编辑弹出表单数据，修改数据后点击取消或者关闭表单时，表格的数据会变空，解决的思路就是当我点击表单显示的时候，定义一个中间变量存储当前表单的数据。点击取消按钮或者关闭表单时，把之前定义的这个中间变量重新赋值给当前的表单数据。就可以解决啦~
当然这个问题还是由于对象或者数组的深浅拷贝的问题。所以今天来总结一下对象和数组的深拷贝和浅拷贝的常用方法。
首先来介绍一下对象的浅拷贝
1.最传统的浅拷贝
var gogo = {
name: '小明',
}
var out = {}
out = gogo
console.log(gogo) //{name: "小明"}
console.log(out) //{name: "小明"}
out.name = '小花花'
console.log(gogo) //{name: "小花花"}
console.log(out) //{name: "小花花"}
当我改变out的值的时候gogo里也改变了~
2.Object.assign()
这个方法是es6的新方法，用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。目标对象就是Object.assign()，括号里的第一个参数。
注意，Object.assign可以用来处理数组，但是会把数组视为对象。
说完了对象的浅拷贝说一下深拷贝
1.转换成json再转换成对象实现对象的完全深拷贝（此方法适用于数组的深拷贝，也是比较简单快速的深拷贝方法）
var out= {
name: '小花花',
sex: 'man',
old: '18'
}
var gogo= JSON.parse(JSON.stringify(out))
这种方式目前是最受推崇的完全深拷贝写法。
但是这样容易造成数据丢失，因为如果对象中含有Date, function, undefined, Infinity, RegExp, Map, Set, Blob, FileList, ImageData, sparse Array, Typed Array等复杂对象的话，转化成json再转回来后这些数据都丢失了。。。
2.扩展运算符
var out= {
name: '小花花',
sex: 'man',
old: '18'
}
var { ...gogo} = out
console.log(gogo) //{name: "小花花", sex: "man", old: "18"}
console.log(out) //{name: "小花花", sex: "man", old: "18"}
out.name = '大花花花花花'
console.log(gogo) //{name: "小花花", sex: "man", old: "18"}
console.log(out) // { name: "大花花花花花", sex: "man", old: "18" }
介绍完对象的深浅拷贝之后接下来说一下数组
- concat() slice() 实现一维数组的深拷贝，多维数组不行。
var array1 = ['a',1,true,{name:'lei',age:18}];
//concat() slice() 实现浅拷贝
var array2 = array1.concat()
//修改拷贝后的数据
array2[0] = 'b'; //array1[0]是原始数据类型 所以是直接赋值的
array2[3].name = 'zhang'; //array1[3]是对象数据类型 所以拷贝的是对象的引用，其实还是和原数组使用同一对象
console.log(array1); // ['a',1,true,{name:'zhang',age:18}]
2.递归（目前有点难度所以以后再补充） 深拷贝
3.针对于多维数组的jq方法 深拷贝
jQuery.extend()
