JS中实现深拷贝的几种方法(object,Array)

JavaScript033

JS中实现深拷贝的几种方法(object,Array),第1张

4.通过第三方工具实现深拷贝

lodash.cloneDeep

数组深拷贝

1. concat(arr1, arr2,....)

2. slice(idx1, idx2)

参数可以省略

1)没有参数是拷贝数组

2)只有一个参数是从该位置起到结束拷贝数组元素

3)两个参数,拷贝从起始位置到结束位置的元素(不包含结束位置的元素:含头不含尾)

注意:当数组中的元素均为一维是深拷贝

          数组中元素一维以上是值的引用

先说一下浅拷贝的实现方式

ES6 中 Object 的一方法,可以是来合并多个JS对象(能用来实现浅拷贝)

第一个参数拷贝的目标对象,后面的参数是拷贝的来源对象

利用扩展运算法,可以实现浅拷贝的的功能。

手写浅拷贝的思路:

将一个对象从内存中完整的拷贝出来给目标独对象,并新开辟一个全新的内存空间存放对象,新对象的修改并不会改变原对象,实现真正的分离。

最简单的深拷贝的方法,就是把一个对象序列化成为 JSON 的字符串,并将对象里面的内容转成字符串,最后用 JSON.parse() 将 JSON 字符串生成一个新的对象。

但是 JSON.stringify 实现深拷贝有些地方需要注意:

这只是简版的,利用递归的方式实现深拷贝,同 JSON.stringify 效果一样,还是有些问题没有解决

即使修改 obj.data 下的属性,也是跟之前的没有关系

基本数据类型: String、Number、Boolean、Null、Undefined

复杂数据类型: Object

使用typeof进行判断数据类型,只能够判断基本数据类型string number boolean 以及 function,而null和object不能够进一步的判断。

使用A instanceof B的方式进行判断,字面意思,A是否是B的实例,可以判断出Array和Object类型,但是undefined和null不能区分数据类型,基础的数据类型,因为不是使用new出来的,也测试不出来。

Object.prototype.toString()方法可以返回一个表示该对象的字符串'[object type]',为了每个对象都能通过 Object.prototype.toString() 来检测,需要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式来调用,传递要检查的对象作为第一个参数,称为 thisArg。

实现思路:

其实还有很多深拷贝的方式,比如说Object.assign(),JSON.stringify()等方式,可以自己下去尝试一下哦!