javascript中拷貝,js數據拷貝的幾種方式

本文目錄一覽：

• 1、JavaScript中淺拷貝和深拷貝的區別和實現
• 2、js實現深拷貝的幾種方法
• 3、js對象淺拷貝有那些方法呢？
• 4、JS中實現深拷貝的幾種方法(object,Array)
• 5、JS中如何進行對象的深拷貝
• 6、JavaScript怎樣進行真正有效的對象拷貝

JavaScript中淺拷貝和深拷貝的區別和實現

淺拷貝只是拷貝了引用, 數據在內存中還是一個, 如果引用的對象發生了變化, 該變量也會同步變化.

深拷貝相當於把內存上的數據拷貝了一份, 此時修改該變量不會影響原來的變量, 同理修改原來的變量也不會影響現在的變量.

淺拷貝:

const foo = { bar: ‘bar’, baz: ‘baz’ }

const ref_foo = foo

深拷貝(最簡單的方法, 拷貝性能也不弱):

const foo = { bar: ‘bar’, baz: ‘baz’ }

const ano_foo = JSON.parse(JSON.stringify(foo))

js實現深拷貝的幾種方法

簡單來說，深拷貝主要是將另一個對象的屬性值拷貝過來之後，另一個對象的屬性值並不受到影響，因為此時它自己在堆中開闢了自己的內存區域，不受外界干擾。

淺拷貝主要拷貝的是對象的引用值，當改變對象的值，另一個對象的值也會發生變化。

使用 js ON.stringify和 js ON.parse實現深拷貝：JSON.stringify把對象轉成字符串，再用JSON.parse把字符串轉成新的對象；

缺陷：它會拋棄對象的 const ructor，深拷貝之後，不管這個對象原來的構造 函數 是什麼，在深拷貝之後都會變成Object；這種方法能正確處理的對象只有 Number, String, Boolean, Array, 扁平對象，也就是說，只有可以轉成JSON格式的對象才可以這樣用，像function沒辦法轉成JSON；

遞歸拷貝實現深拷貝，解決循環引用問題

js對象淺拷貝有那些方法呢？

1、首先可以通過Object.assign來解決這個問題，很多人認為這個函數是用來深拷貝的。其實並不是，Object.assign只會拷貝所有的屬性值到新的對象中，如果屬性值是對象的話，拷貝的是地址，所以並不是深拷貝。

2、還可以通過展開運算符…來實現淺拷貝

let a = {age: 1}

let b = { …a }

a.age = 2

console.log(b.age) // 1

JS中實現深拷貝的幾種方法(object,Array)

4.通過第三方工具實現深拷貝

lodash.cloneDeep

數組深拷貝

1. concat(arr1, arr2,….)

2. slice(idx1, idx2)

參數可以省略

1）沒有參數是拷貝數組

2）只有一個參數是從該位置起到結束拷貝數組元素

3）兩個參數，拷貝從起始位置到結束位置的元素（不包含結束位置的元素：含頭不含尾）

注意：當數組中的元素均為一維是深拷貝

          數組中元素一維以上是值的引用

JS中如何進行對象的深拷貝

//拷貝數據，深拷貝數據，絕對不會出現對象與數組引用相同位置

var copyData = function(item) {

if(item == null) {

return null;

}

if($.isArray(item)) {

var newArray = [];

for(var i=0;iitem.length;i++) {

newArray.push(copyData(item[i]));

}

return newArray;

}

if($.isPlainObject(item)) {

var newObj = {};

for(var p in item) {

newObj[p] = copyData(item[p]);

}

return newObj

}

return item;

}

JavaScript怎樣進行真正有效的對象拷貝

有效的對象拷貝應該是指深拷貝。

淺拷貝 ： 就是兩個js 對象指向同一塊內存地址，所以當obj1 ，obj2指向obj3的時候，一旦其中一個改變，其他的便會改變！

深拷貝：就是重新複製一塊內存，這樣就不會互相影響。

有些時候我們定義一個數組，把這個數據賦值給跟多對象數組中的一個字段，當我們改變對象數組中的該字段的時候，我們會把原來的數組也改變了，這樣就會引起其他數組對象中的對應的字段改變，這不是我們想要的。

這個時候我們會用到深拷貝。

深拷貝的方法：

var deepCopy = function(source)

{

var result;

(source instanceof Array) ? (result = []) : (result = {});

for (var key in source) {

result[key] = (typeof source[key]===’object’) ? deepCopy(source[key]) : source[key];

}    

return result;  

}