一,爲什麼要是用深拷貝:列如把一個數組,對象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,及時聯繫---------------------------------------------------------------------------------------------------------------------------------------------------