js對象深度克隆代碼實現,js淺克隆和深克隆的區別

本文目錄一覽：

1、JS中如何進行對象的深拷貝
2、JS使用JSON.parse(),JSON.stringify()實現對對象的深拷貝功能分析
3、js怎麼克隆對象
4、如何使用原生 javascript 代碼深度克隆一個對象
5、js實現深拷貝的幾種方法

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;

}

JS使用JSON.parse(),JSON.stringify()實現對對象的深拷貝功能分析

本文實例講述了JS使用JSON.parse(),JSON.stringify()實現對對象的深拷貝功能。分享給大家供大家參考，具體如下：

根據不包含引用對象的普通數組深拷貝得到啟發，不拷貝引用對象，拷貝一個字符串會新辟一個新的存儲地址，這樣就切斷了引用對象的指針聯繫。

測試例子：

var

test={

a:”ss”,

b:”dd”,

c:[

{dd:”css”,ee:”cdd”},

{mm:”ff”,nn:”ee”}

]

};

var

test1

JSON.parse(JSON.stringify(test));//拷貝數組,注意這行的拷貝方法

console.log(test);

console.log(test1);

test1.c[0].dd=”change”;

//改變test1的c屬性對象的d屬性

console.log(test);

//不影響test

console.log(test1);

測試結果：

根據測試結果，我們可以看到，test1已經從test複製一份，並且test1改變其中屬性的值時，對原來的對象test沒有造成影響。

JSON.parse(),JSON.stringify()兼容性問題

可以通過為IE7以及IE7以下版本的IE瀏覽器引入json2.js，使用json2.js來解決JSON的兼容性問題

!–[if

script

src=”具體放路徑/json2.js”/script

![endif]–

json2.js的github地址為：

好了，到這裡就實現了，使用JSON.parse(),JSON.stringify()對對象的深拷貝~~

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：測試上述代碼運行效果。

更多關於JavaScript相關內容可查看本站專題：《javascript面向對象入門教程》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章:JavaScript基於遍歷操作實現對象深拷貝功能示例JavaScript對象的淺拷貝與深拷貝實例分析JavaScript

中對象的深拷貝js對象淺拷貝和深拷貝詳解淺談JavaScript中面向對象的的深拷貝和淺拷貝jQuery深拷貝Json對象簡單示例JavaScript對象拷貝與賦值操作實例分析淺談angularJs函數的使用方法(大小寫轉換,拷貝,擴充對象)JavaScript對象拷貝與Object.assign用法實例分析js實現數組和對象的深淺拷貝

js怎麼克隆對象

這題的意思是把一個對象中的內容一級一級的複製到另外一個對象中。用for(var i in obj)的方式就可以了。

至於類型，js雖然是弱類型，但其實是有類型的，如數字類型，就是Number，對象類型就是Object，String,Date,Array,Boolean,Function等，然要判斷對象的類型也很簡單，如：

var a = 2;

a.constructor == Number;// 判斷是否為數值

a.constructor == String;// 判斷是否為字符串 a = “test”

a.constructor == Date;// 判斷是否為日期 a = new Date()

a.constructor == Array;// 判斷是否為數組 a = [1,”2″,true]

a.constructor == Boolean;// 判斷是否為布爾型 a = true

a.constructor == Object;// 判斷是否為對象 a = {}

a.constructor == Function;// 判斷是否為方法類型 a = function(){}

如何使用原生 javascript 代碼深度克隆一個對象

var s = {“a”: “aaaaa”},

lightClone = {},

deepClone = {};

//淺clone

lightClone = s;

lightClone.a = ‘lightClone’;

console.log(lightClone.a);//lightClone

console.log(s.a);//lightClone

//深clone

s = {“a”: “aaaa”};

for(var k in s) {

deepClone[k] = s[k];

}

deepClone.a = “deepClone”;

console.log(deepClone.a);//deepClone

console.log(s.a);//aaaaa

js實現深拷貝的幾種方法

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

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

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

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

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

原創文章，作者：AWGNU，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/317506.html