JavaScript的數據類型分爲:原始數據類型和對象類型。兩者在內存中存放的方式不一樣,致使了其賦值時差別。分別舉個栗子 數組
1.原始數據類型:Undefined、Null、Boolean、Number以及String。測試
2.對象類型spa
var x = 1; var y = x; //y得到了和x一樣的值 y = 2; console.log(x); // 1 var m = [1,2]; //m存放的是指向[1,2]這個數組對象的引用地址 var n = m; //n也得到 [1,2]數組對象的引用地址 n[0] = 3; console.log(m); //[3,2]
顧名思義,淺拷貝就是流於表面的拷貝方式;當屬性值爲對象類型時,只拷貝了對象數據的引用,致使新舊數據沒有徹底分離,還會互相影響。再舉個栗子···code
var array1 = ['a',1,true,{name:'lei',age:18}]; var array2 = array1.concat(); //注意不能直接=,否則直接數組對象,沒有原始類型了 array2[0] = 'b'; //array1[0]是原始數據類型 因此是直接賦值的 array2[3].name = 'zhang'; //array1[3]是對象數據類型 因此拷貝的是對象的引用,其實仍是和原數組使用同一對象 console.log(array1); // ['a',1,true,{name:'zhang',age:18}]
//實現淺拷貝 function shallowCopy( target ){ if(typeof target !== 'object') return ; //判斷目標類型,來建立返回值 var newObj = target instanceof Array ? [] : {}; for(var item in target){ //只複製元素自身的屬性,不復制原型鏈上的 if(target.hasOwnProperty(item)){ newObj[item] = target[item] } } return newObj } var test = [1,'a',{name:'lei',age:18}]; var copy = shallowCopy(test); console.log(copy[2].name); //lei copy[0] = 0; copy[2].name = 'zhang'; console.log(test[0]); //1 原數據不變 console.log(test[2].name); //zhang 原數據也被修改
從淺拷貝解釋基本能夠明白,深拷貝就是 ‘徹底’拷貝,拷貝以後新舊數據徹底分離,再也不共用對象類型的屬性值,不會互相影響。對象
//實現深拷貝 function deepCopy( target ){ if(typeof target !== 'object') return ; //判斷目標類型,來建立返回值 var newObj = target instanceof Array ? [] : {}; for(var item in target){ //只複製元素自身的屬性,不復制原型鏈上的 if(target.hasOwnProperty(item)){ newObj[item] = typeof target[item] == 'object' ? deepCopy(target[item]) : target[item] //判斷屬性值類型 } } return newObj } //測試 var test = [1,'a',{name:'lei',age:18}]; var copy2 = deepCopy(test); copy[0] = 0; copy2[2].name = 'zhang' console.log(test); //[1,'a',{name:'lei',age:18}] 未受到影響