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的項目中使用,不然引一個包只用來深拷貝,有點浪費。

 

微信小程序【My簡歷】有需要的可以瞭解一下:張三的簡歷

-------------------------------------------------------------------------------------------------------------------------------------------------------------------如遇到問題:+WX:WAZJ-0508,及時聯繫---------------------------------------------------------------------------------------------------------------------------------------------------

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章