js 陣列物件深拷貝

結論：物件的拷貝不能採用直接賦值的方式。

踩過的坑如下：

formdata本來是父元件傳過來的，但是我不想直接用，於是我直接賦值給乙個formdatacopy的物件。

但是詭異的事情發生了，就是在我填寫自己的表單元件的時候，一旦表單的資料發生的變化時，本來是formdatacopy的值發生變化，但是『formdatadefault值』這個字串卻被列印出來，也就是說formdata改變了。

奇怪，formdata是父元件傳過來的值怎麼會改變呢？

經過一番掙扎，才發現formdatacopy使用的是簡單的賦值，導致formdatacopy和formdata指向相同的物件。

formdatacopy一改變，formdata就會跟著變。

以上是背景，所以我就對淺拷貝和深拷貝進行了總結：

什麼是淺拷貝：兩者是指向乙個物件。

1、物件的直接遍歷賦值。

2、es6中的var copyobj = object.assign({}, obj);

3、es7擴充套件運算子var copyobj =

4、jquery淺拷貝var copiedobject = jquery.extend({}, originalobject)如果改變了originalobject，copiedobject 也會變。

(兩者指向不同的物件，但是只能拷貝一層)

如果該元素是個物件引用 (不是實際的物件)，slice 會拷貝這個物件引用到新的陣列裡。兩個物件引用都引用了同乙個物件。如果被引用的物件發生改變，則新的和原來的陣列中的這個元素也會發生改變，所以是淺拷貝。

對於字串、數字及布林值來說(不是 string、number 或者 boolean 物件)，slice 會拷貝這些值到新的陣列裡。在別的陣列裡修改這些字串或數字或是布林值，將不會影響另乙個陣列。

也就是說，如果原陣列改變的是基本資料型別，比如string，boolean，number的資料，不會影響到新陣列；

但是如果改變的是物件或者陣列中的資料，是會影響到新陣列的，也也就是對於物件或者陣列，新舊陣列指向的是乙個物件。

(下面說的深拷貝是基本物件的深拷貝，不考慮物件的複雜屬性，比如set，get，function等)

1、最簡單的方式json.parse(json.stringify(obj))這種方法使用較為簡單，可以滿足基本的深拷貝需求，而且能夠處理json格式能表示的所有資料型別，但是對於正規表示式型別、函式型別等無法進行深拷貝(而且會直接丟失相應的值)。

2、jquery深拷貝var copiedobject = $.extend(true, {}, originalobject)

3、手動寫遞迴方式

var array = [,,
];function copy (obj) ;
if(typeof obj !== 'object')
for(var i in obj)
return newobj
}var copyarray = copy(array)
copyarray[0].number = 100;
console.log(array); // [, , ]
console.log(copyarray); // [, , ]

結論：物件的拷貝不能採用直接賦值的方式。

踩過的坑如下：

formdata本來是父元件傳過來的，但是我不想直接用，於是我直接賦值給乙個formdatacopy的物件。

奇怪，formdata是父元件傳過來的值怎麼會改變呢？

經過一番掙扎，才發現formdatacopy使用的是簡單的賦值，導致formdatacopy和formdata指向相同的物件。

formdatacopy一改變，formdata就會跟著變。

以上是背景，所以我就對淺拷貝和深拷貝進行了總結：

什麼是淺拷貝：兩者是指向乙個物件。

1、物件的直接遍歷賦值。

2、es6中的var copyobj = object.assign({}, obj);

3、es7擴充套件運算子var copyobj =

4、jquery淺拷貝var copiedobject = jquery.extend({}, originalobject)如果改變了originalobject，copiedobject 也會變。

(兩者指向不同的物件，但是只能拷貝一層)

也就是說，如果原陣列改變的是基本資料型別，比如string，boolean，number的資料，不會影響到新陣列；

但是如果改變的是物件或者陣列中的資料，是會影響到新陣列的，也也就是對於物件或者陣列，新舊陣列指向的是乙個物件。

(下面說的深拷貝是基本物件的深拷貝，不考慮物件的複雜屬性，比如set，get，function等)

2、jquery深拷貝var copiedobject = $.extend(true, {}, originalobject)

3、手動寫遞迴方式

var array = [,,
];function copy (obj) ;
if(typeof obj !== 'object')
for(var i in obj)
return newobj
}var copyarray = copy(array)
copyarray[0].number = 100;
console.log(array); // [, , ]
console.log(copyarray); // [, , ]

js 陣列物件深拷貝

js陣列，物件深拷貝

js 陣列物件深拷貝

js 陣列物件深拷貝

相關推薦