前言
本文来剖析 javascript 开发中常常会遇到的浅拷贝和深拷贝以及总结网上各种实现形式,心愿对大家有所帮忙。
什么是浅拷贝和深拷贝?
先聊一下 Javascript 的数据类型有哪些?
值类型:数字型 (Number)、字符类型(String)、布尔类型(Boolean)、Null、undefined、Symbol
援用类型:对象类型(Object)、数组类型(Array)、函数类型(function)、正则类型(Regex)、日期类型(Date)
定义:
浅拷贝:浅拷贝其实是只复制了值类型 援用类型也能复制过来 不过复制的是援用类型的指针地址 如果前面对其批改单方都会产生影响,而不是真正拷贝,因而存在父对象被篡改的可能。
深拷贝:深拷贝就是岂但复制了值类型也复制了援用类型 不过援用类型的指针地址都是独立存在的 互相批改不影响
理解了深拷贝和浅拷贝的定义,接下来咱们来讲讲如何实现?
实现浅拷贝形式
1、[…],{…}
2、[].slice()和[].splice(0),Object.assign({},a)
3、Array.from()
实现深拷贝形式
1、JSON.parse(JSON.stringify()) 毛病:不能复制 undefined 和 function 类型
2、递归办法(遍历),毛病:不能解决循环援用问题
3、jquery 的 $.extend() 办法
4、npm lodash 包中的 cloneDeep() 办法(举荐)
总结
1、要了解什么是浅拷贝和深拷贝以及区别,再在了解的基本上再去找解决方案和实现办法。
援用
js 对象浅拷贝和深拷贝详解
how-do-i-deep-clone-an-object-in-react
lodash cloneDeep