前端对于深拷贝和浅拷贝的应用和思考

浅拷贝

浅拷贝 ： 浅拷贝是指对基本类型的值拷贝，以及对对象类型的地址拷贝。它是将数据中所有的数据引用下来，依旧指向同一个存放地址，拷贝之后的数据修改之后，也会影响到原数据的中的对象数据。最简单直接的浅拷贝就是直接赋值,如：let obj = xxx或者Array.prototype.slice()

深拷贝

深拷贝：指复制并创建一个一模一样的对象，不共享内存，修改新对象，旧对象保持不变。

应用场景：常用的场景就是表格编辑对话框回显，你需要深拷贝当前行数据赋值上去，否则当你修改编辑框的数据，你会发现表格的对应行的数据也会跟着修改。

Object.assign()

//用法
let obj = {a:'a',b:'b'}
let newObj = Object.assign({},obj) 

用法很简单，可以拷贝复杂类型。但是有限制，首先它只能用于对象的拷贝，其次它是只能深拷贝第一层，第二层开始就是浅拷贝了(一深二浅),不能拷贝循环引用类型。

实验代码：

let obj = {date:new Date(),regexp:new RegExp(),err:new Error(),fn:()=>{console.log(222)},un:undefined,nan:NaN,c:{fn:new Date()}
}
// obj.a=obj //循环引用类型不能拷贝，报错，大概意思是说要转为json格式
let arr = Object.assign({},obj)
console.log('obj',obj)
console.log('arr',arr) 

实验截图：

拓展运算符

拓展运算符的功能很强大，可以用于对象和数组，可以拷贝对象和数组，可以将数组转换为参数序列，复制数组，合并数组等。这里主要讲的拷贝功能，其他功能读者有兴趣可以另行寻找文章了解。

//扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中
let obj = {a:'a',b:'b'}
let arr = [1,2,3]
let newObj = {...obj}
let newArr = [...arr] 

用法也是很简单，也可以拷贝复杂类型。但是也有限制。仅作为第一层是为深拷贝，可以拷贝复杂类型,对于数组和对象都一样,对于第二层极其以后的值，扩展运算符将不能对其进行打散扩展，也不能对其进行深拷贝，即拷贝后和拷贝前第二层中的对象或者数组仍然引用的是同一个地址，其中一方改变，另一方也跟着改变。

实验代码：

//这里只贴上对于数组的操作，对象的操作跟上面的差不多，拓展运算符的拷贝也不能拷贝循环引用的数据
let arr = [1,2,3,[2,3,[4]]]
let newArr = [...arr]
console.log('arr',arr)
console.log('newArr',newArr) 

实验截图

JSON.parse(JSON.stringify(obj))

这种方式是我在项目中用的最多的方法。但是局限性比前两个还多。它只适用于纯数据json对象的深度克隆。

//用法
let obj = {a:'a'}
let json = JSON.parse(JSON.stringify(obj)) 

用法简单，局限性很多，目前我所了解的大概有这些：

1.如果obj里面存在时间对象,JSON.parse(JSON.stringify(obj))之后，时间对象变成了字符串。
2.如果obj里有RegExp、Error对象，则序列化的结果将只得到空对象。
3.如果obj里有函数，undefined，则序列化的结果会把函数， undefined丢失。
4.如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null。
5.JSON.stringify()只能序列化对象的可枚举的自有属性。如果obj中的对象是有构造函数生成的， 则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor。
6.如果对象中存在循环引用的情况也无法正确实现深拷贝。

实验代码：

//定义一个构造函数function Person(age){this.age = age}let obj = {date: new Date(),regexp: new RegExp(),err: new Error(),fn: () => {console.log(222)},un: undefined,nan: NaN,c: {fn: new Date()},age:new Person(20)}obj.a = obj //无法拷贝循环引用的数据,报错，大概意思是说要转为json格式let json = JSON.parse(JSON.stringify(obj))console.log('obj', obj)console.log('json', json) 

实验截图：

使用较为完整的深拷贝

Lodash

建议使用Lodash库，这是一个很强大的库，里面有各种各样的封装方法，十分强大。

1.安装npm i lodash2.组件引入import _ from 'lodash'3.使用const form = _.cloneDeep(拷贝的对象) 

使用JQ

通过jq的$.extend()实现深拷贝，当extend内的第一个参数为true时，实现的是深拷贝，false是浅拷贝。

自定义方法

这里的方法是从网上搬运过来的，我之前面试的时候就背这个，个人觉得挺全面的

function deepClone(obj, cache = new WeakMap()) {if (typeof obj !== 'object') return obj //普通类型，直接返回if (obj === null) return objif (cache.get(obj)) return cache.get(obj)//防止循环引用，程序进入死循环if (obj instanceof Date) return new Date(obj)//返回时间格式if (obj instanceof RegExp) return new RegExp(obj)//返回正则if (typeof obj === 'symbol') return Symbol(obj.description)	// 处理 Symbol//找到所属原型上的constructor,所属原型上的constructor指向点前对象的构造函数let cloneObj = new obj.constructor()// console.log(cloneObj)cache.set(obj, cloneObj)//缓存拷贝的对象，用于处理循环引用的情况for (let key in obj) {//hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性（也就是，是否有指定的键）。if (obj.hasOwnProperty(key)) {// console.log(key)cloneObj[key] = deepClone(obj[key], cache)//递归拷贝}}return cloneObj}//测试const obj = { name: 'Jack', address: { x: 100, y: 200 }, a: [1, 2, 3, 4], b: Symbol('22') }obj.a = obj//循环引用，会一直嵌套const newObj = deepClone(obj)console.log('obj', obj)console.log('newObj', newObj) 

总结：学艺不精，请多多担待，写下这篇文章主要是为了记录自己的成长，如果能顺便帮到你那笔者会很开心。如果有大佬有宝贵的意见可以指导，将万分感谢(*￣︶￣)！

最后

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享