JS 深拷贝及实现深拷贝的三种方法(递归,JSON,jQuery)的缺点总结

一,为什么要是用深拷贝:列如把一个数组,对象a赋值给另一个变量b,当b改变的时候,a中对应的值不发生变化。

1,不使用深拷贝:

var a={a:1,b:2,c:3}

var b=a

b.a=2

console.log('原对象',a)

console.log('赋值后',b)

当把a对象赋值给b对象后,更改b对象的属性,而a对象的属性也发生了变化。这是不想要的结果。

2,使用深拷贝:

var a={a:1,b:2,c:3}

var b=deepClone(a)

b.a=2

console.log('原对象',a)

console.log('赋值后',b)

这样就是所想要的 当改变b的属性时,a的属性不会发生变化

二,实现深复制的三种方法与不足

1,使用递归实现的方式:

//使用递归实现深拷贝函数

function deepClone(obj) {

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

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

for (key in obj) {

if (obj.hasOwnProperty(key)) {

//判断obj的子元素是否为object对象,如果是则就递归拷贝

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

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

} else {

//如果不为对象就直接拷贝

objClone[key] = obj[key]

}

}

}

}

return objClone

}

不足:代码比其他两种方式复杂。

2,使用JSON的stringify和parse:

//使用json实现深拷贝

function deepClone2(obj){

let _obj=JSON.stringify(obj)

return JSON.parse(_obj)

}

不足:1,无法拷贝 对象中的方法属性  2,无法拷贝 对象中值为undefined的属性

3,使用jquery中的extend属性:

$.extend(true,[],object)

不足:1,需要引用jQuery库  2,无法拷贝 对象中值为undefined的属性

三,使用对比

var object={a:1,f1:function(){this.name='name'},under:undefined,null:null,array:[1,3,5,7],objects:{a:1,b:2,c:3}}

原对象是包含了 基本数据类型,函数,数组,对象,undefined,null 等几种属性。现在使用上面的三种方法进行拷贝。

// 第一种 递归方法

var clone1=deepClone(object)

clone1.array[0]='递归'

clone1.say='递归'

clone1.objects.a='递归'

// 第二种JSON

var clone2=deepClone2(object)

clone2.array[0]='JSON'

clone2.say='Json'

clone2.objects.a='Json'

// 第三种 jQuery的extend方法

var clone3=$.extend(true,[],object)

clone3.array[0]='jQuery'

clone3.say='JQuery'

clone3.objects.a='Jquery'

总结:除了使用递归的方式,其它两种存在各自的不足。JSON的方式代码简单,可以使用在对数组的深拷贝,或是没有函数方法的对象深拷贝。jQuery的方法可以在项目中需要使用jQuery的项目中使用,不然引一个包只用来深拷贝,有点浪费。

-------------------------------------------------------------------------------------------------------------------------------------------------------------------如遇到问题:+WX:WAZJ-0508,及时联系---------------------------------------------------------------------------------------------------------------------------------------------------

发布了58 篇原创文章 · 获赞 41 · 访问量 12万+

猜你喜欢

转载自blog.csdn.net/Zeng__Yi/article/details/95862385