Javascript-浅拷贝和深拷贝

前言

本文来分析javascript开发中经常会遇到的浅拷贝和深拷贝以及总结网上各种实现方式，希望对大家有所帮助。

什么是浅拷贝和深拷贝？

先聊一下Javascript的数据类型有哪些？

基本类型：

1. 数字型(Number)
2. 字符类型(String)
3. 布尔类型(Boolean)
4. Null
5. Undefined
6. Symbol

引用类型：

1. 对象类型(Object)
2. 数组类型(Array)
3. 函数类型(Function)
4. 正则类型(Regex)
5. 日期类型(Date)

浅拷贝定义：

浅拷贝其实是只复制了值类型 引用类型也能复制过去 不过复制的是引用类型的指针地址 如果后面对其修改双方都会产生影响，而不是真正拷贝，因此存在父对象被篡改的可能。

深拷贝定义：
深拷贝就是不但复制了值类型也复制了引用类型 不过引用类型的指针地址都是独立存在的 相互修改不影响

了解了深拷贝和浅拷贝的定义，接下来我们来讲讲如何实现？

实现浅拷贝方式

数组：

• [...]
• [].slice()
• [].splice(0)
• Array.from()

对象：

• {...}
• Object.assign({},a)

数组和对象都可适用

• lodash包中的clone()方法

实现深拷贝方式

数组和对象都可适用

• JSON.parse(JSON.stringify()) 缺点：不能复制undefined和function类型
• 递归方法(遍历)，缺点：不能解决循环引用问题
• jquery的$.extend()方法
• npm lodash包中的cloneDeep()方法(推荐)

总结

1、要理解什么是浅拷贝和深拷贝以及区别，再在理解的基本上再去找解决方案和实现方法。

引用

js对象浅拷贝和深拷贝详解
how-do-i-deep-clone-an-object-in-react
lodash cloneDeep