工作日常 js引用型別資料深拷貝與淺拷貝

2021-08-13 03:56:00 字數 2497 閱讀 9272

js資料型別

關於js的淺拷貝和深拷貝

++只有引用資料型別才會有深拷貝和淺拷貝這麼一說。由於js的儲存都是存位址的,淺拷貝會導致obj1和obj2指向同乙個記憶體位址。這麼一來,如果操作其中的任意乙個obj那麼就會導致元記憶體位址的資料更改。所以需要使用到深拷貝,為拷貝出的物件開闢一塊新的記憶體位址。這樣一來,就會出現原物件與新拷貝的物件在不同的記憶體位址。從而達到前後物件相互不影響。++

淺拷貝

陣列的淺拷貝

var oldarray = [1,2,3,4,5,6];

var newarray = ;

newarray = oldarray;

newarray[0] = '改變的元素';

console.log(oldarray); //

'改變的元素',2,3,4,5,6

console.log(newarray); //

'改變的元素',2,3,4,5,6

物件的淺拷貝

function

copyobject

(obj);

for(var item in obj)

return outobj;

}// object.assign() 將元物件的屬性列舉到新的物件,然後返回新的物件

var obj =

var b = {};

object.assign(b,obj);

if(b === obj) // true

深拷貝
陣列的concat與slice方法(假裝深拷貝)

++concat與slice方法都是淺拷貝乙個陣列的元素然後拷貝給乙個新的陣列。只是如果陣列的單個元素是數字,字串等簡單資料型別的時候,原陣列的物件不會受新陣列的影響。如果陣列的項是引用型別陣列或物件,則就是淺拷貝。++

var origin = [1,2,3,4,5];

var copyslice = origin.slice(0);

var copyconcat = origin.concat();

copyslice[0] = 'one';

copyconcat[0] = 'concat';

console.log(origin); // [1,2,3,4,5]

var origin = [[1,2,3],];

var copyslice = origin.slice(0);

var copyconcat = origin.concat();

copyslice[0][0] = 'slice';

copyconcat[1].name = 'concat';

console.log(origin) // [['slice',2,3],]

深拷貝實現方法json.parse和json.stringify();

這種方法使用較為簡單,可以滿足基本的深拷貝需求,而且能夠處理json格式能表示的所有資料型別,但是對於正規表示式型別、函式型別等無法進行深拷貝(而且會直接丟失相應的值)。還有一點不好的地方是它會拋棄物件的constructor。也就是深拷貝之後,不管這個物件原來的建構函式是什麼,在深拷貝之後都會變成object。同時如果物件中存在迴圈引用的情況也無法正確處理。

//例1

var source = }

var target = json.parse(json.stringify(source));

target.name = "target"; //改變target的name屬性

console.log(source.name); //source

console.log(target.name); //target

target.child.name = "target child"; //改變target的child

console.log(source.child.name); //child

console.log(target.child.name); //target child

//例2

var source = , child: }

var target = json.parse(json.stringify(source));

console.log(target.name); //undefined

//例3

var source = , child:new

regexp("e") }

var target = json.parse(json.stringify(source));

console.log(target.name); //undefined

console.log(target.child); //object {}

js中引用資料型別的深拷貝

首先 再記錄一下js中的資料型別 基本型別 number string boolean null undefined 引用型別 object function 不在此次的考慮範圍內 array,object es6中新加了乙個symbol,至今沒在案例中使用過,所以就提一下,有興趣的可以自己去看一下...

引用型別及深拷貝

js中的資料型別 值型別 字串 string 數值 number 布林值 boolean undefined null symbol 引用型別 物件 object 陣列 array 函式 function 變數賦值 當儲存的是值型別的變數來賦值時,是複製乙個副本 當儲存的是引用型別的變數來賦值時,傳...

js基本型別與引用型別,淺拷貝和深拷貝

1.基本型別 string,number,boolean,null,undefined 2.引用型別 function,array,object 基本型別 存放在棧記憶體中的簡單資料段,資料大小確定,記憶體空間大小可以分配。5種基本資料型別有undefined null boolean number...