JS 中深拷贝的几种实现方法

JavaScript023

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

JS 中深拷贝的几种实现方法

1、使用递归的方式实现深拷贝

//使用递归的方式实现数组、对象的深拷贝

function deepClone1(obj) {

//判断拷贝的要进行深拷贝的是数组还是对象,是数组的话进行数组拷贝,对象的话进行对象拷贝

var objClone = Array.isArray(obj) ? [] : {}

//进行深拷贝的不能为空,并且是对象或者是

if (obj &&typeof obj === "object") {

for (key in obj) {

if (obj.hasOwnProperty(key)) {

if (obj[key] &&typeof obj[key] === "object") {

objClone[key] = deepClone1(obj[key])

} else {

objClone[key] = obj[key]

}

}

}

}

return objClone

}

2、通过 JSON 对象实现深拷贝

//通过js的内置对象JSON来进行数组对象的深拷贝

function deepClone2(obj) {

var _obj = JSON.stringify(obj),

objClone = JSON.parse(_obj)

return objClone

}

JSON对象实现深拷贝的一些问题

* 无法实现对对象中方法的深拷贝

3、通过jQuery的extend方法实现深拷贝

var array = [1,2,3,4]

var newArray = $.extend(true,[],array)

4、Object.assign()拷贝

当对象中只有一级属性,没有二级属性的时候,此方法为深拷贝,但是对象中有对象的时候,此方法,在二级属性以后就是浅拷贝。

5、lodash函数库实现深拷贝

lodash很热门的函数库,提供了 lodash.cloneDeep()实现深拷贝

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

lodash.cloneDeep

数组深拷贝

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

2. slice(idx1, idx2)

参数可以省略

1)没有参数是拷贝数组

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

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

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

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

基本数据类型: 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()等方式,可以自己下去尝试一下哦!