首先複習一下javascript中的變量類型
基本類型
- number
- string
- boolean
- undefined
- null
引用類型
- function
- array
- date
- 正則
- 錯誤
基本類型變量的複製,內容修改後,不會對另一變量產生影響
var a = 1;
var b =a;
a = 2;
console.log(a);//2
console.log(b);//1
引用類型變量若將A對象內容賦值給B對象,則B對象只是A對象的引用,此時若修改了B的內容,A的內容也會隨之變化
var a = {a:1,b:2};
var b = a;
b.b = 3;
console.log(a);//{a:1,b:3}
console.log(b);//{a:1,b:3}
以此得出的結論,在Javascript下,將一個對象類型變量賦值僅得到對象的引用。
但在某些情況下,出於對功能上的要求,必須要求變量在獲得另一個對象的複製後,各自修改內容,不會互相影響;使用Javascript原生可參照以下方式:
var arr = {"a":"1","b":"2"};
var arr1 = arr;
arr = {};
arr["a"] = 2;
console.log(arr);//{"a":2}
console.log(arr1);//{"a":"1","b":"2"}
原理是A變量是B對象變量的引用時,將A置空,再爲A設置內容,就不會再是B的引用
還可以利用JSON.stringify方法和jQuery的$.parseJSON方法進行處理(略麻煩)
var data = {a:1,b:2,c:3,d:[0,1,2,3]};
var str = JSON.stringify(data);
var data1 = $.parseJSON(str);
data1["e"] = 5;
data1["d"][0] = 22;
console.log(data);//{a: 1, b: 2, c: 3, d: [0,1,2,3]}
console.log(data1);//{a: 1, b: 2, c: 3, d: [22,1,2,3], e: 5}
這種轉換的過程實際就是重新生成對象了
使用jQuery的$.extend()方法來擴展、複製對象
var a = {a:1,b:2};
var b = $.extend({},a);
b.b = 3;
console.log(a);//{a:1,b:2}
console.log(b);//{a:1,b:3}
以上的方式,若A變量的屬性裏還有子對象,比如:{a:1,b:2,c:{aa:11,bb:22}},在進行復制時,子對象的內容依然是引用的方式,會互相影響
var a = {a:1,b:2,c:{aa:11,bb:22}};
var b = $.extend({},a);
b.b = 3;
b.c.aa = 33;
console.log(a);//{a:1,b:2,c:{aa:33,bb:22}}
console.log(b);//{a:1,b:3,c:{aa:33,bb:22}}
使用$.extend()方法的深度複製方式,即可杜絕以上問題,使用深度複製,即使母對象中子對象有再多層級,依然會進行完整複製,並不會進行對象引用
var a = {a:1,b:2,c:{aa:11,bb:22}};
var b = $.extend(true,{},a);
b.b = 3;
b.c.aa = 33;
console.log(a);//{a:1,b:2,c:{aa:11,bb:22}}
console.log(b);//{a:1,b:3,c:{aa:33,bb:22}}